import{S as xr,i as Jr,s as Yr,e as r,k as p,w as R,t as o,N as zr,c as s,d as a,m as u,a as i,x as H,h as l,b as h,G as e,g as c,y as L,q as M,o as j,B as G,v as Qr}from"../chunks/vendor-hf-doc-builder.js";import{T as Tl}from"../chunks/Tip-hf-doc-builder.js";import{I as Qe}from"../chunks/IconCopyLink-hf-doc-builder.js";import{C as Xr}from"../chunks/CodeBlock-hf-doc-builder.js";function Zr(Q){let f,S,d,_,y,v,m,$,g,b,O;return{c(){f=r("p"),S=o("This guide will take you through the process of integrating a "),d=r("em"),_=o("Sign-In with HF"),y=o(" button into any Space. If you\u2019re seeking a fast and simple method to implement this in a "),v=r("strong"),m=o("Gradio"),$=o(" Space, take a look at its "),g=r("a"),b=o("built-in integration"),O=o("."),this.h()},l(I){f=s(I,"P",{});var w=i(f);S=l(w,"This guide will take you through the process of integrating a "),d=s(w,"EM",{});var Te=i(d);_=l(Te,"Sign-In with HF"),Te.forEach(a),y=l(w," button into any Space. If you\u2019re seeking a fast and simple method to implement this in a "),v=s(w,"STRONG",{});var Pe=i(v);m=l(Pe,"Gradio"),Pe.forEach(a),$=l(w," Space, take a look at its "),g=s(w,"A",{href:!0,rel:!0});var ve=i(g);b=l(ve,"built-in integration"),ve.forEach(a),O=l(w,"."),w.forEach(a),this.h()},h(){h(g,"href","https://www.gradio.app/guides/sharing-your-app#o-auth-login-via-hugging-face"),h(g,"rel","nofollow")},m(I,w){c(I,f,w),e(f,S),e(f,d),e(d,_),e(f,y),e(f,v),e(v,m),e(f,$),e(f,g),e(g,b),e(f,O)},d(I){I&&a(f)}}}function qr(Q){let f,S,d,_,y;return{c(){f=r("p"),S=o("You can also use the HF OAuth flow to create a \u201CSign in with HF\u201D flow in any website or App, outside of Spaces. "),d=r("a"),_=o("Read our general OAuth page"),y=o("."),this.h()},l(v){f=s(v,"P",{});var m=i(f);S=l(m,"You can also use the HF OAuth flow to create a \u201CSign in with HF\u201D flow in any website or App, outside of Spaces. "),d=s(m,"A",{href:!0});var $=i(d);_=l($,"Read our general OAuth page"),$.forEach(a),y=l(m,"."),m.forEach(a),this.h()},h(){h(d,"href","./oauth")},m(v,m){c(v,f,m),e(f,S),e(f,d),e(d,_),e(f,y)},d(v){v&&a(f)}}}function Wr(Q){let f,S,d,_,y,v,m,$;return{c(){f=r("p"),S=o("You should use "),d=r("code"),_=o("target=_blank"),y=o(" on the button to open the sign-in page in a new tab, unless you run the space outside its "),v=r("code"),m=o("iframe"),$=o(". Otherwise, you might encounter issues with cookies on some browsers.")},l(g){f=s(g,"P",{});var b=i(f);S=l(b,"You should use "),d=s(b,"CODE",{});var O=i(d);_=l(O,"target=_blank"),O.forEach(a),y=l(b," on the button to open the sign-in page in a new tab, unless you run the space outside its "),v=s(b,"CODE",{});var I=i(v);m=l(I,"iframe"),I.forEach(a),$=l(b,". Otherwise, you might encounter issues with cookies on some browsers."),b.forEach(a)},m(g,b){c(g,f,b),e(f,S),e(f,d),e(d,_),e(f,y),e(f,v),e(v,m),e(f,$)},d(g){g&&a(f)}}}function Vr(Q){let f,S,d,_,y,v,m,$,g,b,O,I,w,Te,Pe,ve,X,Ca,_e,Da,Ua,Ft,Z,Bt,q,xt,F,W,Xe,Ee,Ta,Ze,Pa,Jt,U,Na,qe,Ra,Ha,We,La,Ma,Yt,Ne,ja,zt,me,Qt,V,Ga,Re,Fa,Ba,Xt,K,xa,we,Ja,Ya,Zt,C,He,Ve,za,Qa,Xa,Le,Ke,Za,qa,Wa,ee,et,Va,Ka,tt,eo,to,ao,te,at,oo,lo,ye,ot,ro,so,qt,ae,io,lt,no,co,Wt,B,oe,rt,ge,ho,st,po,Vt,Me,uo,Kt,le,it,nt,fo,vo,ct,ht,_o,ea,T,Eo,pt,mo,wo,be,yo,go,ta,re,bo,ut,So,$o,aa,x,se,ft,Se,Ao,dt,Oo,oa,je,ko,la,ie,Ge,vt,Io,Co,Do,Fe,_t,Uo,To,ra,ne,Po,Et,No,Ro,sa,J,ce,mt,$e,Ho,wt,Lo,ia,k,Mo,Ae,jo,Go,Oe,Fo,Bo,yt,xo,Jo,ke,Yo,zo,na,Be,Qo,ca,P,Y,Xo,gt,Zo,qo,bt,Wo,Vo,Ko,D,el,St,tl,al,$t,ol,ll,At,rl,sl,il,E,nl,Ot,cl,hl,kt,pl,ul,It,fl,dl,Ct,vl,_l,Dt,El,ml,Ut,wl,yl,Tt,gl,bl,ha,he,pa,z,pe,Pt,Ie,Sl,Nt,$l,ua,ue,Rt,Ce,Al,Ol,Ht,De,kl,fa;return v=new Qe({}),Z=new Tl({props:{$$slots:{default:[Zr]},$$scope:{ctx:Q}}}),q=new Tl({props:{$$slots:{default:[qr]},$$scope:{ctx:Q}}}),Ee=new Qe({}),me=new Xr({props:{code:"dGl0bGUlM0ElMjBHcmFkaW8lMjBPYXV0aCUyMFRlc3QlMEFlbW9qaSUzQSUyMCVGMCU5RiU4RiU4NiUwQWNvbG9yRnJvbSUzQSUyMHBpbmslMEFjb2xvclRvJTNBJTIwcGluayUwQXNkayUzQSUyMGdyYWRpbyUwQXNka192ZXJzaW9uJTNBJTIwMy40MC4wJTBBcHl0aG9uX3ZlcnNpb24lM0ElMjAzLjEwLjYlMEFhcHBfZmlsZSUzQSUyMGFwcC5weSUwQSUwQWhmX29hdXRoJTNBJTIwdHJ1ZSUwQWhmX29hdXRoX3JlZGlyZWN0X3BhdGglM0ElMjAlMkZjdXN0b21fY2FsbGJhY2tfcm91dGUlMjAlMjMlMjBvcHRpb25hbCUyQyUyMHNlZSUyMCUyMlJlZGlyZWN0JTIwVVJMcyUyMiUyMGJlbG93",highlighted:`<span class="hljs-attr">title:</span> <span class="hljs-string">Gradio</span> <span class="hljs-string">Oauth</span> <span class="hljs-string">Test</span>
<span class="hljs-attr">emoji:</span> <span class="hljs-string">\u{1F3C6}</span>
<span class="hljs-attr">colorFrom:</span> <span class="hljs-string">pink</span>
<span class="hljs-attr">colorTo:</span> <span class="hljs-string">pink</span>
<span class="hljs-attr">sdk:</span> <span class="hljs-string">gradio</span>
<span class="hljs-attr">sdk_version:</span> <span class="hljs-number">3.40</span><span class="hljs-number">.0</span>
<span class="hljs-attr">python_version:</span> <span class="hljs-number">3.10</span><span class="hljs-number">.6</span>
<span class="hljs-attr">app_file:</span> <span class="hljs-string">app.py</span>

<span class="hljs-attr">hf_oauth:</span> <span class="hljs-literal">true</span>
<span class="hljs-attr">hf_oauth_redirect_path:</span> <span class="hljs-string">/custom_callback_route</span> <span class="hljs-comment"># optional, see &quot;Redirect URLs&quot; below</span>`}}),ge=new Qe({}),Se=new Qe({}),$e=new Qe({}),he=new Tl({props:{warning:!0,$$slots:{default:[Wr]},$$scope:{ctx:Q}}}),Ie=new Qe({}),{c(){f=r("meta"),S=p(),d=r("h1"),_=r("a"),y=r("span"),R(v.$$.fragment),m=p(),$=r("span"),g=o("Adding a Sign-In with HF button to your Space"),b=p(),O=r("p"),I=o("You can enable a built-in sign-in flow in your Space by seamlessly creating and associating an "),w=r("a"),Te=o("OAuth/OpenID connect"),Pe=o(" app so users can log in with their HF account."),ve=p(),X=r("p"),Ca=o("This enables new use cases for your Space. For instance, when combined with "),_e=r("a"),Da=o("Persistent Storage"),Ua=o(", a generative AI Space could allow users to log in to access their previous generations, only accessible to them."),Ft=p(),R(Z.$$.fragment),Bt=p(),R(q.$$.fragment),xt=p(),F=r("h2"),W=r("a"),Xe=r("span"),R(Ee.$$.fragment),Ta=p(),Ze=r("span"),Pa=o("Create an OAuth app"),Jt=p(),U=r("p"),Na=o("All you need to do is add "),qe=r("code"),Ra=o("hf_oauth: true"),Ha=o(" to your Space\u2019s metadata inside your "),We=r("code"),La=o("README.md"),Ma=o(" file."),Yt=p(),Ne=r("p"),ja=o("Here\u2019s an example of metadata for a Gradio Space:"),zt=p(),R(me.$$.fragment),Qt=p(),V=r("p"),Ga=o("You can check out the "),Re=r("a"),Fa=o("configuration reference docs"),Ba=o(" for more information."),Xt=p(),K=r("p"),xa=o("This will add the following "),we=r("a"),Ja=o("environment variables"),Ya=o(" to your space:"),Zt=p(),C=r("ul"),He=r("li"),Ve=r("code"),za=o("OAUTH_CLIENT_ID"),Qa=o(": the client ID of your OAuth app (public)"),Xa=p(),Le=r("li"),Ke=r("code"),Za=o("OAUTH_CLIENT_SECRET"),qa=o(": the client secret of your OAuth app"),Wa=p(),ee=r("li"),et=r("code"),Va=o("OAUTH_SCOPES"),Ka=o(": scopes accessible by your OAuth app. Currently, this is always "),tt=r("code"),eo=o('"openid profile"'),to=o("."),ao=p(),te=r("li"),at=r("code"),oo=o("OPENID_PROVIDER_URL"),lo=o(": The URL of the OpenID provider. The OpenID metadata will be available at "),ye=r("a"),ot=r("code"),ro=o("{OPENID_PROVIDER_URL}/.well-known/openid-configuration"),so=o("."),qt=p(),ae=r("p"),io=o("As for any other environment variable, you can use them in your code by using "),lt=r("code"),no=o('os.getenv("OAUTH_CLIENT_ID")'),co=o(", for example."),Wt=p(),B=r("h2"),oe=r("a"),rt=r("span"),R(ge.$$.fragment),ho=p(),st=r("span"),po=o("Redirect URLs"),Vt=p(),Me=r("p"),uo=o("The allowed redirect URIs for your OAuth app are:"),Kt=p(),le=r("ul"),it=r("li"),nt=r("code"),fo=o("https://{SPACE_SUBDOMAIN}.hf.space/auth/callback"),vo=p(),ct=r("li"),ht=r("code"),_o=o("https://{SPACE_SUBDOMAIN}.hf.space/login/callback"),ea=p(),T=r("p"),Eo=o("Note that "),pt=r("code"),mo=o("SPACE_SUBDOMAIN"),wo=o(" is also "),be=r("a"),yo=o("available"),go=o(" as an environment variable."),ta=p(),re=r("p"),bo=o("You can add a custom relative redirect path by setting "),ut=r("code"),So=o("hf_oauth_redirect_path"),$o=o(" in your Space\u2019s metadata."),aa=p(),x=r("h2"),se=r("a"),ft=r("span"),R(Se.$$.fragment),Ao=p(),dt=r("span"),Oo=o("Scopes"),oa=p(),je=r("p"),ko=o("The following scopes are available:"),la=p(),ie=r("ul"),Ge=r("li"),vt=r("code"),Io=o("openid"),Co=o(": Get the ID token in addition to the access token."),Do=p(),Fe=r("li"),_t=r("code"),Uo=o("profile"),To=o(": Get the user\u2019s profile information (username, avatar, etc.)"),ra=p(),ne=r("p"),Po=o("You should use "),Et=r("code"),No=o('"openid profile"'),Ro=o(" as the scope for your OAuth app."),sa=p(),J=r("h2"),ce=r("a"),mt=r("span"),R($e.$$.fragment),Ho=p(),wt=r("span"),Lo=o("Adding the button to your Space"),ia=p(),k=r("p"),Mo=o("You now have all the information to add a \u201CSign-in with HF\u201D button to your Space. Some libraries ("),Ae=r("a"),jo=o("Python"),Go=o(", "),Oe=r("a"),Fo=o("NodeJS"),Bo=o(") can help you implement the OpenID/OAuth protocol. Gradio also provides "),yt=r("strong"),xo=o("built-in support"),Jo=o(", making implementing the Sign-in with HF button a breeze; you can "),ke=r("a"),Yo=o("check out the associated guide"),zo=o("."),na=p(),Be=r("p"),Qo=o("Basically, you need to:"),ca=p(),P=r("ul"),Y=r("li"),Xo=o("Redirect the user to "),gt=r("code"),Zo=o("https://huggingface.co/oauth/authorize?redirect_uri={REDIRECT_URI}&scope=openid%20profile&client_id={CLIENT_ID}&state={STATE}"),qo=o(", where "),bt=r("code"),Wo=o("STATE"),Vo=o(" is a random string that you will need to verify later."),Ko=p(),D=r("li"),el=o("Handle the callback on "),St=r("code"),tl=o("/auth/callback"),al=o(" or "),$t=r("code"),ol=o("/login/callback"),ll=o(" (or your own custom callback URL) and verify the "),At=r("code"),rl=o("state"),sl=o(" parameter."),il=p(),E=r("li"),nl=o("Use the "),Ot=r("code"),cl=o("code"),hl=o(" query parameter to get an access token and id token from "),kt=r("code"),pl=o("https://huggingface.co/oauth/token"),ul=o(" (POST request with "),It=r("code"),fl=o("client_id"),dl=o(", "),Ct=r("code"),vl=o("code"),_l=o(", "),Dt=r("code"),El=o("grant_type=authorization_code"),ml=o(" and "),Ut=r("code"),wl=o("redirect_uri"),yl=o(" as form data, and with "),Tt=r("code"),gl=o("Authorization: Basic {base64(client_id:client_secret)}"),bl=o(" as a header)."),ha=p(),R(he.$$.fragment),pa=p(),z=r("h2"),pe=r("a"),Pt=r("span"),R(Ie.$$.fragment),Sl=p(),Nt=r("span"),$l=o("Examples:"),ua=p(),ue=r("ul"),Rt=r("li"),Ce=r("a"),Al=o("Gradio test app"),Ol=p(),Ht=r("li"),De=r("a"),kl=o("Hugging Chat (NodeJS/SvelteKit)"),this.h()},l(t){const n=zr('[data-svelte="svelte-1phssyn"]',document.head);f=s(n,"META",{name:!0,content:!0}),n.forEach(a),S=u(t),d=s(t,"H1",{class:!0});var Ue=i(d);_=s(Ue,"A",{id:!0,class:!0,href:!0});var Lt=i(_);y=s(Lt,"SPAN",{});var Mt=i(y);H(v.$$.fragment,Mt),Mt.forEach(a),Lt.forEach(a),m=u(Ue),$=s(Ue,"SPAN",{});var Pl=i($);g=l(Pl,"Adding a Sign-In with HF button to your Space"),Pl.forEach(a),Ue.forEach(a),b=u(t),O=s(t,"P",{});var da=i(O);I=l(da,"You can enable a built-in sign-in flow in your Space by seamlessly creating and associating an "),w=s(da,"A",{href:!0,rel:!0});var Nl=i(w);Te=l(Nl,"OAuth/OpenID connect"),Nl.forEach(a),Pe=l(da," app so users can log in with their HF account."),da.forEach(a),ve=u(t),X=s(t,"P",{});var va=i(X);Ca=l(va,"This enables new use cases for your Space. For instance, when combined with "),_e=s(va,"A",{href:!0,rel:!0});var Rl=i(_e);Da=l(Rl,"Persistent Storage"),Rl.forEach(a),Ua=l(va,", a generative AI Space could allow users to log in to access their previous generations, only accessible to them."),va.forEach(a),Ft=u(t),H(Z.$$.fragment,t),Bt=u(t),H(q.$$.fragment,t),xt=u(t),F=s(t,"H2",{class:!0});var _a=i(F);W=s(_a,"A",{id:!0,class:!0,href:!0});var Hl=i(W);Xe=s(Hl,"SPAN",{});var Ll=i(Xe);H(Ee.$$.fragment,Ll),Ll.forEach(a),Hl.forEach(a),Ta=u(_a),Ze=s(_a,"SPAN",{});var Ml=i(Ze);Pa=l(Ml,"Create an OAuth app"),Ml.forEach(a),_a.forEach(a),Jt=u(t),U=s(t,"P",{});var xe=i(U);Na=l(xe,"All you need to do is add "),qe=s(xe,"CODE",{});var jl=i(qe);Ra=l(jl,"hf_oauth: true"),jl.forEach(a),Ha=l(xe," to your Space\u2019s metadata inside your "),We=s(xe,"CODE",{});var Gl=i(We);La=l(Gl,"README.md"),Gl.forEach(a),Ma=l(xe," file."),xe.forEach(a),Yt=u(t),Ne=s(t,"P",{});var Fl=i(Ne);ja=l(Fl,"Here\u2019s an example of metadata for a Gradio Space:"),Fl.forEach(a),zt=u(t),H(me.$$.fragment,t),Qt=u(t),V=s(t,"P",{});var Ea=i(V);Ga=l(Ea,"You can check out the "),Re=s(Ea,"A",{href:!0});var Bl=i(Re);Fa=l(Bl,"configuration reference docs"),Bl.forEach(a),Ba=l(Ea," for more information."),Ea.forEach(a),Xt=u(t),K=s(t,"P",{});var ma=i(K);xa=l(ma,"This will add the following "),we=s(ma,"A",{href:!0,rel:!0});var xl=i(we);Ja=l(xl,"environment variables"),xl.forEach(a),Ya=l(ma," to your space:"),ma.forEach(a),Zt=u(t),C=s(t,"UL",{});var fe=i(C);He=s(fe,"LI",{});var Il=i(He);Ve=s(Il,"CODE",{});var Jl=i(Ve);za=l(Jl,"OAUTH_CLIENT_ID"),Jl.forEach(a),Qa=l(Il,": the client ID of your OAuth app (public)"),Il.forEach(a),Xa=u(fe),Le=s(fe,"LI",{});var Cl=i(Le);Ke=s(Cl,"CODE",{});var Yl=i(Ke);Za=l(Yl,"OAUTH_CLIENT_SECRET"),Yl.forEach(a),qa=l(Cl,": the client secret of your OAuth app"),Cl.forEach(a),Wa=u(fe),ee=s(fe,"LI",{});var jt=i(ee);et=s(jt,"CODE",{});var zl=i(et);Va=l(zl,"OAUTH_SCOPES"),zl.forEach(a),Ka=l(jt,": scopes accessible by your OAuth app. Currently, this is always "),tt=s(jt,"CODE",{});var Ql=i(tt);eo=l(Ql,'"openid profile"'),Ql.forEach(a),to=l(jt,"."),jt.forEach(a),ao=u(fe),te=s(fe,"LI",{});var Gt=i(te);at=s(Gt,"CODE",{});var Xl=i(at);oo=l(Xl,"OPENID_PROVIDER_URL"),Xl.forEach(a),lo=l(Gt,": The URL of the OpenID provider. The OpenID metadata will be available at "),ye=s(Gt,"A",{href:!0,rel:!0});var Zl=i(ye);ot=s(Zl,"CODE",{});var ql=i(ot);ro=l(ql,"{OPENID_PROVIDER_URL}/.well-known/openid-configuration"),ql.forEach(a),Zl.forEach(a),so=l(Gt,"."),Gt.forEach(a),fe.forEach(a),qt=u(t),ae=s(t,"P",{});var wa=i(ae);io=l(wa,"As for any other environment variable, you can use them in your code by using "),lt=s(wa,"CODE",{});var Wl=i(lt);no=l(Wl,'os.getenv("OAUTH_CLIENT_ID")'),Wl.forEach(a),co=l(wa,", for example."),wa.forEach(a),Wt=u(t),B=s(t,"H2",{class:!0});var ya=i(B);oe=s(ya,"A",{id:!0,class:!0,href:!0});var Vl=i(oe);rt=s(Vl,"SPAN",{});var Kl=i(rt);H(ge.$$.fragment,Kl),Kl.forEach(a),Vl.forEach(a),ho=u(ya),st=s(ya,"SPAN",{});var er=i(st);po=l(er,"Redirect URLs"),er.forEach(a),ya.forEach(a),Vt=u(t),Me=s(t,"P",{});var tr=i(Me);uo=l(tr,"The allowed redirect URIs for your OAuth app are:"),tr.forEach(a),Kt=u(t),le=s(t,"UL",{});var ga=i(le);it=s(ga,"LI",{});var ar=i(it);nt=s(ar,"CODE",{});var or=i(nt);fo=l(or,"https://{SPACE_SUBDOMAIN}.hf.space/auth/callback"),or.forEach(a),ar.forEach(a),vo=u(ga),ct=s(ga,"LI",{});var lr=i(ct);ht=s(lr,"CODE",{});var rr=i(ht);_o=l(rr,"https://{SPACE_SUBDOMAIN}.hf.space/login/callback"),rr.forEach(a),lr.forEach(a),ga.forEach(a),ea=u(t),T=s(t,"P",{});var Je=i(T);Eo=l(Je,"Note that "),pt=s(Je,"CODE",{});var sr=i(pt);mo=l(sr,"SPACE_SUBDOMAIN"),sr.forEach(a),wo=l(Je," is also "),be=s(Je,"A",{href:!0,rel:!0});var ir=i(be);yo=l(ir,"available"),ir.forEach(a),go=l(Je," as an environment variable."),Je.forEach(a),ta=u(t),re=s(t,"P",{});var ba=i(re);bo=l(ba,"You can add a custom relative redirect path by setting "),ut=s(ba,"CODE",{});var nr=i(ut);So=l(nr,"hf_oauth_redirect_path"),nr.forEach(a),$o=l(ba," in your Space\u2019s metadata."),ba.forEach(a),aa=u(t),x=s(t,"H2",{class:!0});var Sa=i(x);se=s(Sa,"A",{id:!0,class:!0,href:!0});var cr=i(se);ft=s(cr,"SPAN",{});var hr=i(ft);H(Se.$$.fragment,hr),hr.forEach(a),cr.forEach(a),Ao=u(Sa),dt=s(Sa,"SPAN",{});var pr=i(dt);Oo=l(pr,"Scopes"),pr.forEach(a),Sa.forEach(a),oa=u(t),je=s(t,"P",{});var ur=i(je);ko=l(ur,"The following scopes are available:"),ur.forEach(a),la=u(t),ie=s(t,"UL",{});var $a=i(ie);Ge=s($a,"LI",{});var Dl=i(Ge);vt=s(Dl,"CODE",{});var fr=i(vt);Io=l(fr,"openid"),fr.forEach(a),Co=l(Dl,": Get the ID token in addition to the access token."),Dl.forEach(a),Do=u($a),Fe=s($a,"LI",{});var Ul=i(Fe);_t=s(Ul,"CODE",{});var dr=i(_t);Uo=l(dr,"profile"),dr.forEach(a),To=l(Ul,": Get the user\u2019s profile information (username, avatar, etc.)"),Ul.forEach(a),$a.forEach(a),ra=u(t),ne=s(t,"P",{});var Aa=i(ne);Po=l(Aa,"You should use "),Et=s(Aa,"CODE",{});var vr=i(Et);No=l(vr,'"openid profile"'),vr.forEach(a),Ro=l(Aa," as the scope for your OAuth app."),Aa.forEach(a),sa=u(t),J=s(t,"H2",{class:!0});var Oa=i(J);ce=s(Oa,"A",{id:!0,class:!0,href:!0});var _r=i(ce);mt=s(_r,"SPAN",{});var Er=i(mt);H($e.$$.fragment,Er),Er.forEach(a),_r.forEach(a),Ho=u(Oa),wt=s(Oa,"SPAN",{});var mr=i(wt);Lo=l(mr,"Adding the button to your Space"),mr.forEach(a),Oa.forEach(a),ia=u(t),k=s(t,"P",{});var N=i(k);Mo=l(N,"You now have all the information to add a \u201CSign-in with HF\u201D button to your Space. Some libraries ("),Ae=s(N,"A",{href:!0,rel:!0});var wr=i(Ae);jo=l(wr,"Python"),wr.forEach(a),Go=l(N,", "),Oe=s(N,"A",{href:!0,rel:!0});var yr=i(Oe);Fo=l(yr,"NodeJS"),yr.forEach(a),Bo=l(N,") can help you implement the OpenID/OAuth protocol. Gradio also provides "),yt=s(N,"STRONG",{});var gr=i(yt);xo=l(gr,"built-in support"),gr.forEach(a),Jo=l(N,", making implementing the Sign-in with HF button a breeze; you can "),ke=s(N,"A",{href:!0,rel:!0});var br=i(ke);Yo=l(br,"check out the associated guide"),br.forEach(a),zo=l(N,"."),N.forEach(a),na=u(t),Be=s(t,"P",{});var Sr=i(Be);Qo=l(Sr,"Basically, you need to:"),Sr.forEach(a),ca=u(t),P=s(t,"UL",{});var Ye=i(P);Y=s(Ye,"LI",{});var ze=i(Y);Xo=l(ze,"Redirect the user to "),gt=s(ze,"CODE",{});var $r=i(gt);Zo=l($r,"https://huggingface.co/oauth/authorize?redirect_uri={REDIRECT_URI}&scope=openid%20profile&client_id={CLIENT_ID}&state={STATE}"),$r.forEach(a),qo=l(ze,", where "),bt=s(ze,"CODE",{});var Ar=i(bt);Wo=l(Ar,"STATE"),Ar.forEach(a),Vo=l(ze," is a random string that you will need to verify later."),ze.forEach(a),Ko=u(Ye),D=s(Ye,"LI",{});var de=i(D);el=l(de,"Handle the callback on "),St=s(de,"CODE",{});var Or=i(St);tl=l(Or,"/auth/callback"),Or.forEach(a),al=l(de," or "),$t=s(de,"CODE",{});var kr=i($t);ol=l(kr,"/login/callback"),kr.forEach(a),ll=l(de," (or your own custom callback URL) and verify the "),At=s(de,"CODE",{});var Ir=i(At);rl=l(Ir,"state"),Ir.forEach(a),sl=l(de," parameter."),de.forEach(a),il=u(Ye),E=s(Ye,"LI",{});var A=i(E);nl=l(A,"Use the "),Ot=s(A,"CODE",{});var Cr=i(Ot);cl=l(Cr,"code"),Cr.forEach(a),hl=l(A," query parameter to get an access token and id token from "),kt=s(A,"CODE",{});var Dr=i(kt);pl=l(Dr,"https://huggingface.co/oauth/token"),Dr.forEach(a),ul=l(A," (POST request with "),It=s(A,"CODE",{});var Ur=i(It);fl=l(Ur,"client_id"),Ur.forEach(a),dl=l(A,", "),Ct=s(A,"CODE",{});var Tr=i(Ct);vl=l(Tr,"code"),Tr.forEach(a),_l=l(A,", "),Dt=s(A,"CODE",{});var Pr=i(Dt);El=l(Pr,"grant_type=authorization_code"),Pr.forEach(a),ml=l(A," and "),Ut=s(A,"CODE",{});var Nr=i(Ut);wl=l(Nr,"redirect_uri"),Nr.forEach(a),yl=l(A," as form data, and with "),Tt=s(A,"CODE",{});var Rr=i(Tt);gl=l(Rr,"Authorization: Basic {base64(client_id:client_secret)}"),Rr.forEach(a),bl=l(A," as a header)."),A.forEach(a),Ye.forEach(a),ha=u(t),H(he.$$.fragment,t),pa=u(t),z=s(t,"H2",{class:!0});var ka=i(z);pe=s(ka,"A",{id:!0,class:!0,href:!0});var Hr=i(pe);Pt=s(Hr,"SPAN",{});var Lr=i(Pt);H(Ie.$$.fragment,Lr),Lr.forEach(a),Hr.forEach(a),Sl=u(ka),Nt=s(ka,"SPAN",{});var Mr=i(Nt);$l=l(Mr,"Examples:"),Mr.forEach(a),ka.forEach(a),ua=u(t),ue=s(t,"UL",{});var Ia=i(ue);Rt=s(Ia,"LI",{});var jr=i(Rt);Ce=s(jr,"A",{href:!0,rel:!0});var Gr=i(Ce);Al=l(Gr,"Gradio test app"),Gr.forEach(a),jr.forEach(a),Ol=u(Ia),Ht=s(Ia,"LI",{});var Fr=i(Ht);De=s(Fr,"A",{href:!0,rel:!0});var Br=i(De);kl=l(Br,"Hugging Chat (NodeJS/SvelteKit)"),Br.forEach(a),Fr.forEach(a),Ia.forEach(a),this.h()},h(){h(f,"name","hf:doc:metadata"),h(f,"content",JSON.stringify(Kr)),h(_,"id","adding-a-signin-with-hf-button-to-your-space"),h(_,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),h(_,"href","#adding-a-signin-with-hf-button-to-your-space"),h(d,"class","relative group"),h(w,"href","https://developer.okta.com/blog/2019/10/21/illustrated-guide-to-oauth-and-oidc"),h(w,"rel","nofollow"),h(_e,"href","https://huggingface.co/docs/hub/spaces-storage"),h(_e,"rel","nofollow"),h(W,"id","create-an-oauth-app"),h(W,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),h(W,"href","#create-an-oauth-app"),h(F,"class","relative group"),h(Re,"href","./spaces-config-reference"),h(we,"href","https://huggingface.co/docs/hub/spaces-overview#helper-environment-variables"),h(we,"rel","nofollow"),h(ye,"href","https://huggingface.co/.well-known/openid-configuration"),h(ye,"rel","nofollow"),h(oe,"id","redirect-urls"),h(oe,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),h(oe,"href","#redirect-urls"),h(B,"class","relative group"),h(be,"href","https://huggingface.co/docs/hub/spaces-overview#helper-environment-variables"),h(be,"rel","nofollow"),h(se,"id","scopes"),h(se,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),h(se,"href","#scopes"),h(x,"class","relative group"),h(ce,"id","adding-the-button-to-your-space"),h(ce,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),h(ce,"href","#adding-the-button-to-your-space"),h(J,"class","relative group"),h(Ae,"href","https://github.com/lepture/authlib"),h(Ae,"rel","nofollow"),h(Oe,"href","https://github.com/panva/node-openid-client"),h(Oe,"rel","nofollow"),h(ke,"href","https://www.gradio.app/guides/sharing-your-app#o-auth-login-via-hugging-face"),h(ke,"rel","nofollow"),h(pe,"id","examples"),h(pe,"class","header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"),h(pe,"href","#examples"),h(z,"class","relative group"),h(Ce,"href","https://huggingface.co/spaces/Wauplin/gradio-oauth-test"),h(Ce,"rel","nofollow"),h(De,"href","https://huggingface.co/spaces/coyotte508/chat-ui"),h(De,"rel","nofollow")},m(t,n){e(document.head,f),c(t,S,n),c(t,d,n),e(d,_),e(_,y),L(v,y,null),e(d,m),e(d,$),e($,g),c(t,b,n),c(t,O,n),e(O,I),e(O,w),e(w,Te),e(O,Pe),c(t,ve,n),c(t,X,n),e(X,Ca),e(X,_e),e(_e,Da),e(X,Ua),c(t,Ft,n),L(Z,t,n),c(t,Bt,n),L(q,t,n),c(t,xt,n),c(t,F,n),e(F,W),e(W,Xe),L(Ee,Xe,null),e(F,Ta),e(F,Ze),e(Ze,Pa),c(t,Jt,n),c(t,U,n),e(U,Na),e(U,qe),e(qe,Ra),e(U,Ha),e(U,We),e(We,La),e(U,Ma),c(t,Yt,n),c(t,Ne,n),e(Ne,ja),c(t,zt,n),L(me,t,n),c(t,Qt,n),c(t,V,n),e(V,Ga),e(V,Re),e(Re,Fa),e(V,Ba),c(t,Xt,n),c(t,K,n),e(K,xa),e(K,we),e(we,Ja),e(K,Ya),c(t,Zt,n),c(t,C,n),e(C,He),e(He,Ve),e(Ve,za),e(He,Qa),e(C,Xa),e(C,Le),e(Le,Ke),e(Ke,Za),e(Le,qa),e(C,Wa),e(C,ee),e(ee,et),e(et,Va),e(ee,Ka),e(ee,tt),e(tt,eo),e(ee,to),e(C,ao),e(C,te),e(te,at),e(at,oo),e(te,lo),e(te,ye),e(ye,ot),e(ot,ro),e(te,so),c(t,qt,n),c(t,ae,n),e(ae,io),e(ae,lt),e(lt,no),e(ae,co),c(t,Wt,n),c(t,B,n),e(B,oe),e(oe,rt),L(ge,rt,null),e(B,ho),e(B,st),e(st,po),c(t,Vt,n),c(t,Me,n),e(Me,uo),c(t,Kt,n),c(t,le,n),e(le,it),e(it,nt),e(nt,fo),e(le,vo),e(le,ct),e(ct,ht),e(ht,_o),c(t,ea,n),c(t,T,n),e(T,Eo),e(T,pt),e(pt,mo),e(T,wo),e(T,be),e(be,yo),e(T,go),c(t,ta,n),c(t,re,n),e(re,bo),e(re,ut),e(ut,So),e(re,$o),c(t,aa,n),c(t,x,n),e(x,se),e(se,ft),L(Se,ft,null),e(x,Ao),e(x,dt),e(dt,Oo),c(t,oa,n),c(t,je,n),e(je,ko),c(t,la,n),c(t,ie,n),e(ie,Ge),e(Ge,vt),e(vt,Io),e(Ge,Co),e(ie,Do),e(ie,Fe),e(Fe,_t),e(_t,Uo),e(Fe,To),c(t,ra,n),c(t,ne,n),e(ne,Po),e(ne,Et),e(Et,No),e(ne,Ro),c(t,sa,n),c(t,J,n),e(J,ce),e(ce,mt),L($e,mt,null),e(J,Ho),e(J,wt),e(wt,Lo),c(t,ia,n),c(t,k,n),e(k,Mo),e(k,Ae),e(Ae,jo),e(k,Go),e(k,Oe),e(Oe,Fo),e(k,Bo),e(k,yt),e(yt,xo),e(k,Jo),e(k,ke),e(ke,Yo),e(k,zo),c(t,na,n),c(t,Be,n),e(Be,Qo),c(t,ca,n),c(t,P,n),e(P,Y),e(Y,Xo),e(Y,gt),e(gt,Zo),e(Y,qo),e(Y,bt),e(bt,Wo),e(Y,Vo),e(P,Ko),e(P,D),e(D,el),e(D,St),e(St,tl),e(D,al),e(D,$t),e($t,ol),e(D,ll),e(D,At),e(At,rl),e(D,sl),e(P,il),e(P,E),e(E,nl),e(E,Ot),e(Ot,cl),e(E,hl),e(E,kt),e(kt,pl),e(E,ul),e(E,It),e(It,fl),e(E,dl),e(E,Ct),e(Ct,vl),e(E,_l),e(E,Dt),e(Dt,El),e(E,ml),e(E,Ut),e(Ut,wl),e(E,yl),e(E,Tt),e(Tt,gl),e(E,bl),c(t,ha,n),L(he,t,n),c(t,pa,n),c(t,z,n),e(z,pe),e(pe,Pt),L(Ie,Pt,null),e(z,Sl),e(z,Nt),e(Nt,$l),c(t,ua,n),c(t,ue,n),e(ue,Rt),e(Rt,Ce),e(Ce,Al),e(ue,Ol),e(ue,Ht),e(Ht,De),e(De,kl),fa=!0},p(t,[n]){const Ue={};n&2&&(Ue.$$scope={dirty:n,ctx:t}),Z.$set(Ue);const Lt={};n&2&&(Lt.$$scope={dirty:n,ctx:t}),q.$set(Lt);const Mt={};n&2&&(Mt.$$scope={dirty:n,ctx:t}),he.$set(Mt)},i(t){fa||(M(v.$$.fragment,t),M(Z.$$.fragment,t),M(q.$$.fragment,t),M(Ee.$$.fragment,t),M(me.$$.fragment,t),M(ge.$$.fragment,t),M(Se.$$.fragment,t),M($e.$$.fragment,t),M(he.$$.fragment,t),M(Ie.$$.fragment,t),fa=!0)},o(t){j(v.$$.fragment,t),j(Z.$$.fragment,t),j(q.$$.fragment,t),j(Ee.$$.fragment,t),j(me.$$.fragment,t),j(ge.$$.fragment,t),j(Se.$$.fragment,t),j($e.$$.fragment,t),j(he.$$.fragment,t),j(Ie.$$.fragment,t),fa=!1},d(t){a(f),t&&a(S),t&&a(d),G(v),t&&a(b),t&&a(O),t&&a(ve),t&&a(X),t&&a(Ft),G(Z,t),t&&a(Bt),G(q,t),t&&a(xt),t&&a(F),G(Ee),t&&a(Jt),t&&a(U),t&&a(Yt),t&&a(Ne),t&&a(zt),G(me,t),t&&a(Qt),t&&a(V),t&&a(Xt),t&&a(K),t&&a(Zt),t&&a(C),t&&a(qt),t&&a(ae),t&&a(Wt),t&&a(B),G(ge),t&&a(Vt),t&&a(Me),t&&a(Kt),t&&a(le),t&&a(ea),t&&a(T),t&&a(ta),t&&a(re),t&&a(aa),t&&a(x),G(Se),t&&a(oa),t&&a(je),t&&a(la),t&&a(ie),t&&a(ra),t&&a(ne),t&&a(sa),t&&a(J),G($e),t&&a(ia),t&&a(k),t&&a(na),t&&a(Be),t&&a(ca),t&&a(P),t&&a(ha),G(he,t),t&&a(pa),t&&a(z),G(Ie),t&&a(ua),t&&a(ue)}}}const Kr={local:"adding-a-signin-with-hf-button-to-your-space",sections:[{local:"create-an-oauth-app",title:"Create an OAuth app"},{local:"redirect-urls",title:"Redirect URLs "},{local:"scopes",title:"Scopes"},{local:"adding-the-button-to-your-space",title:"Adding the button to your Space"},{local:"examples",title:"Examples:"}],title:"Adding a Sign-In with HF button to your Space"};function es(Q){return Qr(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class rs extends xr{constructor(f){super();Jr(this,f,es,Vr,Yr,{})}}export{rs as default,Kr as metadata};
