Has anyone managed to get supertokens working with next.js v13 app directory?

Hi @semagraph, The app directory setup should be similar to the pages directory setup. We dont have docs for it but if you are facing issues I can help

yeah that would be appreciated, been stuck on this for a while

What have you tried already?

A lot lol, gone through the Next.js integration guide, among many other things. First question is regarding `/config/frontendConfig.ts`:

ts
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)
          },
        },
      }
    },
  }
}

You could do this in the Root Layout. Other than that you would have to call it on every route's

page.js

Doesn't work in the root layout, either I get an

Error: 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 component

Does this get thrown from the root layout itself? or from some page component?

that error gets thrown from the root layout itself

Can I see the code for your root layout?

correct, so the root layout i'm focusing on (i have several) is has the path `src/app/(home)/home/layout-client.tsx`:

tsx
'use client'

// imports

export default function RootLayout(props) {
  useEffect(() => {
    SuperTokensReact.init(frontendConfig());
  }, []);

  return (
    <ChakraProvider theme={theme}>
      <SuperTokensWrapper>
        {children}
      </SuperTokensWrapper>
    </ChakraProvider>
  )
}

You can call init outside of a use effect

if i take it out of useEffect, and pass

const 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.

Hmm

yeah, here it is:

ts
'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);
                    },
                },
            };
        },
    };
};

One way could be to pass a function (or a set of functions) to frontendConfig that handles navigation

(tried replacing

Router

from

next/router

with a router param from

useRouter()

hook in the RootLayout component, but obviously that leads to the issue previously discussed)

And then call that function in relevant places inside windowHandler

pass it something like a state value?

Something like this:

SuperTokensReact.init(frontendConfig({
  push: () => {...},
}));

And then in window handler

export let frontendConfig = ({push}) => {
...
windowHandler: (oI) => {
            return {
                ...oI,
                location: {
                    ...oI.location,
                    setHref: (href) => {
                      push(href);
                    },
                },
            };
        },

what would the contents of push look like?

Yeah its unfortunate but with the lack of router docs for next 13 at the moment this is the only thing I can think of

Can you give a full example?

So we are working on docs for it but they arent complete at all and we dont have a full sample to share at the moment

by full example i mean just the RootLayout code + the frontendConfig code

If you open an issue in the auth react SDK we can probably provide something in a couple days (once a little bandwidth frees up in the team)

I'm not sure it's as easy as you think it is, passing a handler function doesn't bypass that error

Yeah like I said it was the only thing I could think of, theres probably other nuances to Next 13 that we need to evaluate properly

fair enough, i get v13 is quite a large departure from older versions, so might take some time for you guys to implement a solution

have we got this resolved, am too getting this error

Not that I’m aware of

We are still evaluating everything that would need to change/get affected with Next13 (including app directories) but we dont have any progress to report as of yet

okk thanks for the update