Skip to content

Commit 1e71477

Browse files
πŸ“ Document new oauthLogin (#1191)
* πŸ“ Document new `oauthLogin` * Update docs/hub/spaces-oauth.md Co-authored-by: Omar Sanseviero <osanseviero@gmail.com> * πŸ“ Document oauth --------- Co-authored-by: Omar Sanseviero <osanseviero@gmail.com>
1 parent 2fb0838 commit 1e71477

File tree

1 file changed

+20
-1
lines changed

1 file changed

+20
-1
lines changed

β€Ždocs/hub/spaces-oauth.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ Those scopes are optional and can be added by setting `hf_oauth_scopes` in your
7777

7878
## Adding the button to your Space
7979

80-
You now have all the information to add a "Sign-in with HF" button to your Space. Some libraries ([Python](https://github.com/lepture/authlib), [NodeJS](https://github.com/panva/node-openid-client)) can help you implement the OpenID/OAuth protocol. Gradio also provides **built-in support**, making implementing the Sign-in with HF button a breeze; you can [check out the associated guide](https://www.gradio.app/guides/sharing-your-app#o-auth-login-via-hugging-face).
80+
You now have all the information to add a "Sign-in with HF" button to your Space. Some libraries ([Python](https://github.com/lepture/authlib), [NodeJS](https://github.com/panva/node-openid-client)) can help you implement the OpenID/OAuth protocol.
81+
82+
Gradio and hugginface.js also provide **built-in support**, making implementing the Sign-in with HF button a breeze; you can check out the associated guides with [gradio](https://www.gradio.app/guides/sharing-your-app#o-auth-login-via-hugging-face) and with [hugginface.js](https://huggingface.co/docs/huggingface.js/hub/README#oauth-login).
8183

8284
Basically, you need to:
8385

@@ -96,3 +98,20 @@ You should use `target=_blank` on the button to open the sign-in page in a new t
9698
- [Gradio test app](https://huggingface.co/spaces/Wauplin/gradio-oauth-test)
9799
- [Hugging Chat (NodeJS/SvelteKit)](https://huggingface.co/spaces/huggingchat/chat-ui)
98100
- [Inference Widgets (Auth.js/SvelteKit)](https://huggingface.co/spaces/huggingfacejs/inference-widgets), uses the `inference-api` scope to make inference requests on behalf of the user.
101+
- [Client-Side in a Static Space (huggingface.js)](https://huggingface.co/spaces/huggingfacejs/client-side-oauth) - very simple JavaScript example.
102+
103+
JS Code example:
104+
105+
```js
106+
import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
107+
108+
const oauthResult = await oauthHandleRedirectIfPresent();
109+
110+
if (!oauthResult) {
111+
// If the user is not logged in, redirect to the login page
112+
window.location.href = await oauthLoginUrl();
113+
}
114+
115+
// You can use oauthResult.accessToken, oauthResult.userInfo among other things
116+
console.log(oauthResult);
117+
```

0 commit comments

Comments
Β (0)