1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6419],{8202:(s,l,e)=>{e.d(l,{_2:()=>r,ok:()=>o,ox:()=>t,pn:()=>a});var n=e(7378),c=e(86106);function r({children:s}){return(0,c.jsx)("div",{className:"step-description",children:s})}function o({children:s}){return(0,c.jsx)("div",{className:"step-code",children:s})}function a({title:s,children:l}){let e=null,a=null;return n.Children.forEach(l,s=>{(0,n.isValidElement)(s)&&(s.type===r?e=s:s.type===o&&(a=s))}),(0,c.jsxs)("div",{className:"step",children:[(0,c.jsxs)("div",{className:"step-content",children:[(0,c.jsx)("strong",{className:"step-title",children:s}),e]}),a]})}function t({children:s}){return(0,c.jsx)("div",{className:"steps",children:s})}},43244:(s,l,e)=>{e.d(l,{A:()=>o});e(7378);var n=e(23372);const c={tabItem:"tabItem_w6aI"};var r=e(86106);function o({children:s,hidden:l,className:e}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,n.A)(c.tabItem,e),hidden:l,children:s})}},51471:(s,l,e)=>{e.d(l,{A:()=>g});var n=e(7378),c=e(23372),r=e(23418),o=e(46585),a=e(30505),t=e(99202),i=e(81922),F=e(46923),d=e(73126);function h(s){return n.Children.toArray(s).filter(s=>"\n"!==s).map(s=>{if(!s||(0,n.isValidElement)(s)&&function(s){const{props:l}=s;return!!l&&"object"==typeof l&&"value"in l}(s))return s;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof s.type?s.type:s.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function p(s){const{values:l,children:e}=s;return(0,n.useMemo)(()=>{const s=l??function(s){return h(s).map(({props:{value:s,label:l,attributes:e,default:n}})=>({value:s,label:l,attributes:e,default:n}))}(e);return function(s){const l=(0,F.XI)(s,(s,l)=>s.value===l.value);if(l.length>0)throw new Error(`Docusaurus error: Duplicate values "${l.map(s=>s.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(s),s},[l,e])}function x({value:s,tabValues:l}){return l.some(l=>l.value===s)}function j({queryString:s=!1,groupId:l}){const e=(0,a.W6)(),c=function({queryString:s=!1,groupId:l}){if("string"==typeof s)return s;if(!1===s)return null;if(!0===s&&!l)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return l??null}({queryString:s,groupId:l});return[(0,i.aZ)(c),(0,n.useCallback)(s=>{if(!c)return;const l=new URLSearchParams(e.location.search);l.set(c,s),e.replace({...e.location,search:l.toString()})},[c,e])]}function y(s){const{defaultValue:l,queryString:e=!1,groupId:c}=s,r=p(s),[o,a]=(0,n.useState)(()=>function({defaultValue:s,tabValues:l}){if(0===l.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(s){if(!x({value:s,tabValues:l}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${s}" but none of its children has the corresponding value. Available values are: ${l.map(s=>s.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return s}const e=l.find(s=>s.default)??l[0];if(!e)throw new Error("Unexpected error: 0 tabValues");return e.value}({defaultValue:l,tabValues:r})),[i,F]=j({queryString:e,groupId:c}),[h,y]=function({groupId:s}){const l=function(s){return s?`docusaurus.tab.${s}`:null}(s),[e,c]=(0,d.Dv)(l);return[e,(0,n.useCallback)(s=>{l&&c.set(s)},[l,c])]}({groupId:c}),u=(()=>{const s=i??h;return x({value:s,tabValues:r})?s:null})();(0,t.A)(()=>{u&&a(u)},[u]);return{selectedValue:o,selectValue:(0,n.useCallback)(s=>{if(!x({value:s,tabValues:r}))throw new Error(`Can't select invalid tab value=${s}`);a(s),F(s),y(s)},[F,y,r]),tabValues:r}}var u=e(52538);const m={tabList:"tabList_duiv",tabItem:"tabItem_a1H9"};var C=e(86106);function N({className:s,block:l,selectedValue:e,selectValue:n,tabValues:r}){const a=[],{blockElementScrollPositionUntilNextRender:t}=(0,o.a_)(),i=s=>{const l=s.currentTarget,c=a.indexOf(l),o=r[c].value;o!==e&&(t(l),n(o))},F=s=>{let l=null;switch(s.key){case"Enter":i(s);break;case"ArrowRight":{const e=a.indexOf(s.currentTarget)+1;l=a[e]??a[0];break}case"ArrowLeft":{const e=a.indexOf(s.currentTarget)-1;l=a[e]??a[a.length-1];break}}l?.focus()};return(0,C.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,
1c.A)("tabs",{"tabs--block":l},s),children:r.map(({value:s,label:l,attributes:n})=>(0,C.jsx)("li",{role:"tab",tabIndex:e===s?0:-1,"aria-selected":e===s,ref:s=>{a.push(s)},onKeyDown:F,onClick:i,...n,className:(0,c.A)("tabs__item",m.tabItem,n?.className,{"tabs__item--active":e===s}),children:l??s},s))})}function f({lazy:s,children:l,selectedValue:e}){const r=(Array.isArray(l)?l:[l]).filter(Boolean);if(s){const s=r.find(s=>s.props.value===e);return s?(0,n.cloneElement)(s,{className:(0,c.A)("margin-top--md",s.props.className)}):null}return(0,C.jsx)("div",{className:"margin-top--md",children:r.map((s,l)=>(0,n.cloneElement)(s,{key:l,hidden:s.props.value!==e}))})}function A(s){const l=y(s);return(0,C.jsxs)("div",{className:(0,c.A)(r.G.tabs.container,"tabs-container",m.tabList),children:[(0,C.jsx)(N,{...l,...s}),(0,C.jsx)(f,{...l,...s})]})}function g(s){const l=(0,u.A)();return(0,C.jsx)(A,{...s,children:h(s.children)},String(l))}},56225:(s,l,e)=>{e.d(l,{R:()=>o,x:()=>a});var n=e(7378);const c={},r=n.createContext(c);function o(s){const l=n.useContext(r);return n.useMemo(function(){return"function"==typeof s?s(l):{...l,...s}},[l,s])}function a(s){let l;return l=s.disableParentContext?"function"==typeof s.components?s.components(c):s.components||c:o(s.components),n.createElement(r.Provider,{value:l},s.children)}},61518:(s,l,e)=>{e.r(l),e.d(l,{assets:()=>d,contentTitle:()=>F,default:()=>x,frontMatter:()=>i,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"core-concepts/authentication/Auth0","title":"Auth0","description":"This guide will walk you through integrating Auth0 authentication with your SpacetimeDB application.","source":"@site/versioned_docs/version-1.12.0/00200-core-concepts/00500-authentication/00200-Auth0.md","sourceDirName":"00200-core-concepts/00500-authentication","slug":"/core-concepts/authentication/Auth0","permalink":"/docs/1.12.0/core-concepts/authentication/Auth0","draft":false,"unlisted":false,"editUrl":"https://github.com/clockworklabs/SpacetimeDB/edit/master/docs/versioned_docs/version-1.12.0/00200-core-concepts/00500-authentication/00200-Auth0.md","tags":[],"version":"1.12.0","sidebarPosition":200,"frontMatter":{"title":"Auth0"},"sidebar":"sidebar","previous":{"title":"React Integration","permalink":"/docs/1.12.0/core-concepts/authentication/spacetimeauth/react-integration"},"next":{"title":"Clerk","permalink":"/docs/1.12.0/core-concepts/authentication/Clerk"}}');var c=e(86106),r=e(56225),o=e(8202),a=e(51471),t=e(43244);const i={title:"Auth0"},F=void 0,d={},h=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Getting started",id:"getting-started",level:2}];function p(s){const l={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...s.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(l.p,{children:"This guide will walk you through integrating Auth0 authentication with your SpacetimeDB application."}),"\n",(0,c.jsx)(l.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,c.jsx)(l.p,{children:"We assume you have the following prerequisites in place:"}),"\n",(0,c.jsxs)(l.ul,{children:["\n",(0,c.jsxs)(l.li,{children:["A working SpacetimeDB project, follow our ",(0,c.jsx)(l.a,{href:"/docs/1.12.0/quickstarts/react",children:"React Quickstart Guide"})," if you need help setting this up."]}),"\n"]}),"\n",(0,c.jsx)(l.h2,{id:"getting-started",children:"Getting started"}),"\n",(0,c.jsxs)(o.ox,{children:[(0,c.jsxs)(o.pn,{title:"Install Auth0 React SDK",children:[(0,c.jsx)(o._2,{children:(0,c.jsx)(l.p,{children:"Install the Auth0 React SDK into your React application."})}),(0,c.jsx)(o.ok,{children:(0,c.jsxs)(a.A,{groupId:"package-manager",defaultValue:"NPM",children:[(0,c.jsx)(t.A,{value:"NPM",label:"NPM",children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsx)(l.code,{children:(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"npm"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" add"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" @auth0/auth0-react"})]})})})})}),(0,c.jsx)(t.A,{value:"Yarn",label:"Yarn",children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsx)(l.code,{children:(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"yarn"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" add"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" @auth0/auth0-react"})]})})})})}),(0,c.jsx)(t.A,{value:"PNPM",label:"PNPM",children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsx)(l.code,{children:(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"pnpm"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" add"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" @auth0/auth0-react"})]})})})})}),(0,c.jsx)(t.A,{value:"Bun",label:"Bun",children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsx)(l.code,{children:(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"bun"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" add"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:" @auth0/auth0-react"})]})})})})})]})})]}),(0,c.jsxs)(o.pn,{title:"Setup your Auth0 App",children:[(0,c.jsx)(o._2,{children:(0,c.jsxs)(l.ol,{children:["\n",(0,c.jsxs)(l.li,{children:["Head to the ",(0,c.jsx)(l.a,{href:"https://manage.auth0.com/dashboard/",children:"Auth0 Dashboard"})]}),"\n",(0,c.jsxs)(l.li,{children:["Click on ",(0,c.jsx)(l.strong,{children:"Applications"})," > ",(0,c.jsx)(l.strong,{children:"Applications"})," > ",(0,c.jsx)(l.strong,{children:"Create Application"})]}),"\n",(0,c.jsxs)(l.li,{children:["In the popup, enter a name for your app, select ",(0,c.jsx)(l.code,{children:"Single Page Web Application"}),"\nas the app type and click Create"]}),"\n",(0,c.jsxs)(l.li,{children:["Switch to the ",(0,c.jsx)(l.strong,{children:"Settings"})," tab on the ",(0,c.jsx)(l.strong,{children:"Application Details"})," page"]}),"\n",(0,c.jsx)(l.li,{children:"Save the Domain and Client ID values from the dashboard somewhere handy, you'll\nneed them later"}),"\n",(0,c.jsx)(l.li,{children:"Finally, on the Settings tab of your Application Details page, configure the\nURLs from the table on the right"}),"\n"]})}),(0,c.jsx)(o.ok,{children:(0,c.jsxs)(l.table,{children:[(0,c.jsx)(l.thead,{children:(0,c.jsxs)(l.tr,{children:[(0,c.jsx)(l.th,{children:"URL Type"}),(0,c.jsx)(l.th,{children:"URL"})]})}),(0,c.jsxs)(l.tbody,{children:[(0,c.jsxs)(l.tr,{children:[(0,c.jsx)(l.td,{children:"Allowed Callback URLs"}),(0,c.jsx)(l.td,{children:(0,c.jsx)(l.code,{children:"http://localhost:5173"})})]}),(0,c.jsxs)(l.tr,{children:[(0,c.jsx)(l.td,{children:"Allowed Logout URLs"}),(0,c.jsx)(l.td,{children:(0,c.jsx)(l.code,{children:"http://localhost:5173"})})]}),(0,c.jsxs)(l.tr,{children:[(0,c.jsx)(l.td,{children:"Allowed Web Origins"}),(0,c.jsx)(l.td,{children:(0,c.jsx)(l.code,{children:"http://localhost:5173"})})]})]})]})})]}),(0,c.jsxs)(o.pn,{title:"Create an AutoLogin Component",children:[(0,c.jsx)(o._2,{children:(0,c.jsxs)(l.p,{children:["Create an ",(0,c.jsx)(l.code,{children:"AutoLogin"})," component that automatically handles user login and ID token\nretrieval using the Auth0 React SDK. This component will redirect unauthenticated\nusers to the Auth0 login page and provide the ID token to its children via context."]})}),(0,c.jsx)(o.ok,{children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsxs)(l.code,{children:[(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { useAuth0 } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"@auth0/auth0-react"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { createContext, useContext, useEffect, useMemo, useState } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" IdTokenContext "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" createContext"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"string"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" |"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" undefined"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">("}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:"undefined"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useIdToken"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"}
1,children:"() {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ctx "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useContext"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(IdTokenContext);"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"ctx) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" throw"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6",fontWeight:"bold"},children:" new"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" Error"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"useIdToken must be used within an IdTokenProvider"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ctx;"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" AutoLogin"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"({ "}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { children"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" React"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"."}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"ReactNode"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { isLoading, isAuthenticated, loginWithRedirect, getIdTokenClaims } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useAuth0"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"();"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" [idToken, setIdToken] "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useState"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"string"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" |"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" null"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">("}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:"null"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" [error, setError] "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useState"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"Error"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" |"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" null"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">("}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:"null"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useEffect"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(() "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"isLoading "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"&&"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" !"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"isAuthenticated) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" loginWithRedirect"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"}
1,children:"()."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"catch"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"err"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" =>"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" setError"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(err));"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }, [isLoading, isAuthenticated, loginWithRedirect]);"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useEffect"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(() "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" let"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" cancelled "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:" false"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" run"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" async"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" () "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" (isLoading) "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#6272A4"},children:" // IMPORTANT: If not authenticated, ensure token is cleared"})}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"isAuthenticated) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"cancelled) "}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"setIdToken"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:"null"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" try"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" claims "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" await"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" getIdTokenClaims"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"}
1,children:"();"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" token "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" claims?.__raw "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"??"}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:" null"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"token) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" throw"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6",fontWeight:"bold"},children:" new"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" Error"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"Auth0 returned no ID token (__raw missing)."}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"cancelled) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" setIdToken"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(token);"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"catch"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" (e) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"cancelled) "}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"setError"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(e "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"as"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" Error"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" };"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" run"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"();"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" () "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" cancelled "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:" true"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" };"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }, [isLoading, isAuthenticated, getIdTokenClaims]);"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" value "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useMemo"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"string"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" |"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" undefined"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">(() "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" idToken "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"??"}),(0,c.jsx)(l.span,{style:{color:"#BD93F9"},children:" undefined"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }, [idToken]);"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ready "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" !"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"isLoading "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"&&"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" isAuthenticated "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"&&"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" !!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"idToken "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"&&"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" !"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"error;"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" (error) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"p"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Authentication error</"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"p"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"pre"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">{error.message}</"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"pre"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" </"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" );"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" if"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"ready) {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"p"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Loading...</"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"p"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">;"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"IdTokenContext.Provider"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" value"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{value}>{children}</"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"IdTokenContext.Provider"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" );"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})]}),(0,c.jsxs)(o.pn,{title:"Use Auth0Provider and AutoLogin in main.tsx",children:[(0,c.jsxs)(o._2,{children:[(0,c.jsxs)(l.p,{children:["Wrap your application with the ",(0,c.jsx)(l.code,{children:"Auth0Provider"})," component to ",(0,c.jsx)(l.code,{children:"main.tsx"})," to enable\nauthentication."]}),(0,c.jsx)(l.admonition,{type:"info",children:(0,c.jsxs)(l.p,{children:["Don't forget to remove any existing ",(0,c.jsx)(l.code,{children:"SpacetimeDBProvi
1der"})," wrapper from this\nfile as we will be adding it somewhere else later in this guide."]})})]}),(0,c.jsx)(o.ok,{children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsxs)(l.code,{children:[(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Auth0Provider } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"@auth0/auth0-react"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { StrictMode } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { createRoot } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react-dom/client"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" App "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"./App.tsx"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { AutoLogin } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"./AutoLogin.tsx"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"createRoot"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(document."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"getElementById"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"root"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:")"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"!"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:")."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"render"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"StrictMode"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Auth0Provider"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" domain"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"<YOUR_AUTH0_DOMAIN>"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" clientId"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"<YOUR_AUTH0_CLIENT_ID>"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" authorizationParams"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{{"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" redirect_uri"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" window.location.origin,"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }}"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" >"})}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"AutoLogin"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"App"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" </"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"AutoLogin"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" </"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Auth0Provider"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" </"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"StrictMode"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})})]})})})})]}),(0,c.jsxs)(o.pn,{title:"Update App.tsx to use the ID Token",children:[(0,c.jsx)(o._2,{children:(0,c.jsxs)(l.p,{children:["Update your ",(0,c.jsx)(l.code,{children:"App.tsx"})," file to use the ",(0,c.jsx)(l.code,{children:"useIdToken"})," hook from the ",(0,c.jsx)(l.code,{children:"AutoLogin"}),"\ncomponent to get the ID token and pass it to the ",(0,c.jsx)(l.code,{children:"DbConnection"})," builder."]})}),(0,c.jsx)(o.ok,{children:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(l.pre,{className:"shiki spacetime-dark",style:{backgroundColor:"var(--clockworklabs-code-background-color)",color:"#F8F8F2"},tabIndex:"0",children:(0,c.jsxs)(l.code,{children:[(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { useMemo } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Identity } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"spacetimedb"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"}
1,children:" { SpacetimeDBProvider } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"spacetimedb/react"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { useIdToken } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"./AutoLogin"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { DbConnection, ErrorContext } "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"./module_bindings"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:";"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"const"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" onConnect"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"_conn"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" DbConnection"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:", "}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"identity"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" Identity"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" console."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"log"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"Connected to SpacetimeDB with identity:"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" identity."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"toHexString"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"()"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" );"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"};"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"const"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" onDisconnect"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" () "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" console."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"log"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"Disconnected from SpacetimeDB"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:");"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"};"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"const"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" onConnectError"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"_ctx"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" ErrorContext"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:", "}),(0,c.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"err"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" Error"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" console."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"log"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"Error connecting to SpacetimeDB:"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:", err);"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"};"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" default"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" App"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"}
1,children:"() {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" idToken "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useIdToken"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"();"})]}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" connectionBuilder "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:" useMemo"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(() "}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" DbConnection."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"builder"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"()"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"withUri"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"<YOUR SPACETIMEDB URL>"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:")"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"withModuleName"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"("}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F1FA8C"},children:"<YOUR SPACETIMEDB MODULE NAME>"}),(0,c.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:")"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"withToken"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(idToken)"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"onConnect"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(onConnect)"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"onDisconnect"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(onDisconnect)"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ."}),(0,c.jsx)(l.span,{style:{color:"#50FA7B"},children:"onConnectError"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(onConnectError);"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" }, [idToken]);"})}),"\n",(0,c.jsx)(l.span,{className:"line"}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"SpacetimeDBProvider"}),(0,c.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" connectionBuilder"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{connectionBuilder}>"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"h1"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">SpacetimeDB React App</"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"h1"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"p"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">You can now use SpacetimeDB in your app!</"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"p"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" </"}),(0,c.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsxs)(l.span,{className:"line",children:[(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" </"}),(0,c.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"}
1,children:"SpacetimeDBProvider"}),(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:" );"})}),"\n",(0,c.jsx)(l.span,{className:"line",children:(0,c.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})]})]})]})}function x(s={}){const{wrapper:l}={...(0,r.R)(),...s.components};return l?(0,c.jsx)(l,{...s,children:(0,c.jsx)(p,{...s})}):p(s)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.