Hey, I'm trying to set up supertokens with next.js 13, but am getting this error when visiting `/api...

Deleted User

03/12/2023, 9:22 AM

Hey, I'm trying to set up supertokens with next.js 13, but am getting this error when visiting `/api/auth`:

Copy code

tsx
TypeError: Cannot read properties of null (reading 'useEffect')

src/pages/api/auth/[[...path]].tsx (13:14) @ Auth
  11 | 
  12 | export default function Auth(): JSX.Element {
> 13 | useEffect(() => {
     |          ^
  14 |     if (SuperTokens.canHandleRoute() === false) {
  15 |         SuperTokens.redirectToAuth({
  16 |             redirectBack: false,

rp_st

03/12/2023, 11:56 AM

Hey.

rp_st

03/12/2023, 11:56 AM

You can’t use useEffect in the api folder. Since that runs on the backend and not frontend.

semagraph

03/13/2023, 2:13 AM

ah ok, thanks @rp_st

semagraph

03/13/2023, 2:14 AM

also if I'm using next as my frontend and nest.js as my backend, does that change how I implement the frontend supertokens code? Or can I just implement both like how the guides suggest?

semagraph

03/13/2023, 2:15 AM

i.e. is there any further work I have to do to integrate the frontend (next.js) and backend (nest.js) supertokens code?

semagraph

03/13/2023, 3:25 AM

@rp_st hmm I'm now getting

Copy code

tsx
Error: SuperTokens must be initialized before calling this method.

Source
src/pages/auth/[[...path]].tsx (13:12) @ SuperTokens

  11 | export default function Auth(): JSX.Element {
  12 | useEffect(() => {
> 13 |     if (SuperTokens.canHandleRoute() === false) {
     |        ^
  14 |         SuperTokens.redirectToAuth({
  15 |             redirectBack: false,
  16 |         });

semagraph

03/13/2023, 3:26 AM

I've initialized SuperTokens in a layout in

src/app/foo/layout.tsx

, but supertokens doesn't seem to recognize that

rp_st

03/13/2023, 6:06 AM

you can follow the frontend setup for nextjs and backend setup for nestjs. Please make sure that you have initialised supertokens before using any of its functions - the error indicates that you haven't initialised supertokens at the right place - you want to do it in the global scope in your app's _app.tsx file

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).