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