semagraph
03/13/2023, 9:29 AMnkshah2
03/13/2023, 9:40 AMsemagraph
03/13/2023, 9:40 AMnkshah2
03/13/2023, 9:40 AMsemagraph
03/13/2023, 9:41 AMts
import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
import SessionReact from 'supertokens-auth-react/recipe/session'
import { appInfo } from './appInfo'
import Router from 'next/router'
export const frontendConfig = () => {
return {
appInfo,
recipeList: [
ThirdPartyEmailPasswordReact.init({
signInAndUpFeature: {
providers: [
ThirdPartyEmailPasswordReact.Google.init(),
ThirdPartyEmailPasswordReact.Facebook.init(),
ThirdPartyEmailPasswordReact.Github.init(),
ThirdPartyEmailPasswordReact.Apple.init(),
],
},
}),
SessionReact.init(),
],
windowHandler: (oI: any) => {
return {
...oI,
location: {
...oI.location,
setHref: (href: string) => {
Router.push(href)
},
},
}
},
}
}
SuperTokensReact.init
is meant to be called from pages/_app.tsx
, tsx
if (typeof window !== 'undefined') {
// we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
SuperTokensReact.init(frontendConfig())
}
function MyApp({ Component, pageProps }: AppProps) {
return (
<SuperTokensWrapper>
<Component {...pageProps} />
</SuperTokensWrapper>
);
}
export default MyApp
, however next.js v13 (app directory) has a new layout systemSuperTokensReact.init()
is also meant to be called outside of a component, but because next/router
is deprecated for the app directory, how should we call Router.push
?nkshah2
03/13/2023, 9:46 AMpage.js
semagraph
03/13/2023, 9:47 AMError: No instance of Session found. Make sure to call the Session.init method. See
error (which happens if i call .init()
inside useEffect()
), or I'm unable to access the router because it's outside of the page componentnkshah2
03/13/2023, 9:48 AMsemagraph
03/13/2023, 9:49 AMnkshah2
03/13/2023, 9:49 AM_app.js
semagraph
03/13/2023, 9:52 AMtsx
'use client'
// imports
export default function RootLayout(props) {
useEffect(() => {
SuperTokensReact.init(frontendConfig());
}, []);
return (
<ChakraProvider theme={theme}>
<SuperTokensWrapper>
{children}
</SuperTokensWrapper>
</ChakraProvider>
)
}
txt
Unhandled Runtime Error
Error: No instance of Session found. Make sure to call the Session.init method. See https://supertokens.io/docs/emailpassword/quick-setup/frontend
nkshah2
03/13/2023, 9:53 AMsemagraph
03/13/2023, 9:56 AMconst router = useRouter()
to it (e.g. frontendConfig(router)
), I get the error Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
nkshah2
03/13/2023, 10:37 AMSuperTokensWrapper
needs Session recipesemagraph
03/13/2023, 10:40 AMts
'use client'
import ThirdPartyReact from "supertokens-auth-react/recipe/thirdparty";
import SessionReact from "supertokens-auth-react/recipe/session";
import { appInfo } from "./appInfo";
//import Router from "next/router";
export let frontendConfig = (router: any) => {
return {
appInfo,
// recipeList contains all the modules that you want to
// use from SuperTokens. See the full list here: https://supertokens.com/docs/guides
recipeList: [
ThirdPartyReact.init({
signInAndUpFeature: {
providers: [
ThirdPartyReact.Github.init(),
ThirdPartyReact.Apple.init(),
],
},
}),
SessionReact.init(),
],
// this is so that the SDK uses the next router for navigation
windowHandler: (oI) => {
return {
...oI,
location: {
...oI.location,
setHref: (href) => {
//Router.push(href);
router.push(href);
},
},
};
},
};
};
nkshah2
03/13/2023, 10:42 AMsemagraph
03/13/2023, 10:42 AMRouter
from next/router
with a router param from useRouter()
hook in the RootLayout component, but obviously that leads to the issue previously discussed)nkshah2
03/13/2023, 10:42 AMsemagraph
03/13/2023, 10:43 AMnkshah2
03/13/2023, 10:44 AMSuperTokensReact.init(frontendConfig({
push: () => {...},
}));
And then in window handler
export let frontendConfig = ({push}) => {
...
windowHandler: (oI) => {
return {
...oI,
location: {
...oI.location,
setHref: (href) => {
push(href);
},
},
};
},
semagraph
03/13/2023, 10:46 AMtsx
const push = (href) => {
router.push(href);
}
?nkshah2
03/13/2023, 10:47 AMsemagraph
03/13/2023, 10:52 AMnkshah2
03/13/2023, 10:53 AMsemagraph
03/13/2023, 10:53 AMnkshah2
03/13/2023, 10:54 AMsemagraph
03/13/2023, 10:54 AMnkshah2
03/13/2023, 10:55 AMsemagraph
03/13/2023, 10:59 AMparas
03/21/2023, 12:35 PMsemagraph
03/21/2023, 12:42 PMnkshah2
03/22/2023, 5:04 AMparas
03/22/2023, 1:55 PM