https://supertokens.com/ logo
Join Discord
Powered by
Hey guys, I'm trying to use supertokens with next....
# support-questions-legacy
d
Hey guys, I'm trying to use supertokens with next.js 13, but i get an error when trying Step 2.3 of the Next.js Integration guide:
Copy code
Unhandled Runtime Error
Error: SuperTokens must be initialized before calling this method.
------------------------------------------------------------------
pages/auth/[[...path]].tsx (15:8) @ eval

  13 | // if the user visits a page that is not handled by us (like /auth/random), then we redirect them back to the auth page.
  14 | useEffect(() => {
> 15 |   if (SuperTokens.canHandleRoute() === false) {
     |      ^
  16 |     redirectToAuth()
  17 |   }
  18 | }, [])
. Any ideas? I presume the
Copy code
SuperTokensReact.init(frontendConfig())
in 
_app.tsx
(although I added this in 
context-providers.tsx
which is basically the same thing) is meant to initialize, but it doesn't seem to. (
context-providers.tsx
has
Copy code
'use client'
up the top, not sure if important)
r
Hey @semagraph
Can you add the supertokensreact.init part on the global scope as shown in the docs?
s
I tried migrating to the old next.js 13, going to take a while to recreate it now
Most important question is, is there any reason that supertokens wouldn't work with the new 
app
structure for Next.js 13?
Don't want to spend a long time trying to get it working only to find out there are some fundamental incompatibilities
Ok got back to that state
@rp_st can you clarify which part of the docs you're referring to? Step 1.6 right?
Copy code
ts
  if (typeof window !== 'undefined') {
    SuperTokensReact.init(frontendConfig())
  }
I have that in my 
pages/_app.tsx
file, although supertokens maybe can't recognize it?
r
can you do a console log in the if statement?
s
sure
r
And also which part of the code is throwing the not initialised error? You should make sure that that is not running on server side
s
@rp_st am I console.log'ing the output of 
SuperTokensReact.init(..)
?
r
you should just console log some random string before calling that function. Does it get printed?
s
hmm doesn't seem to be getting called
r
right. The error comes up before it's getting printed?
s
nothing is printed at all it looks like
r
see the terminal. Is there any error in there?
s
er sorry should i be doing this at 
/
or at 
/auth
?
r
either is fine
s
/
does show the console.log output, 
/auth
does not
r
what happens in /auth? Is there an error in your terminal?
s
no error for either route, although 
/
does show an updated 
warn
message in the next log
(which happens on normal requests)
/auth
does not though
are the values of the 
/config/**
files important here?
r
have you tried our demo nextjs app? That uses nextjs 13
maybe you should start from that and build on top
s
this one right? 
npx create-supertokens-app@latest --frontend=next --recipe=thirdpartyemailpassword
r
yea
s
Yeah that's the one i migrated to, but is that compatible with the 
app
structure though? didn't see that directory in there
the main reason I wanted to use supertokens with Next.js 13 was to take advantage of those new features around 
app/
as far as I understand it Next.js 13 is backwards-compatible using the old layout structure, which I assumed the supertokens app also uses
(To clarify that example app does work, I was just hoping to get it working with the new structure)
r
We will have to investigate about the new structure. But mostly, it should work. We will do this in the coming weeks
s
No worries rp, appreciate the help
5 Views
PreviousNext
Powered by