NextJS demo app not working

[alexedwardjones]

I just tried following the new docs for setting up NextJS with the app directory and was having some issues so I tried the demo app using npx create-supertokens-app@latest --frontend=next --recipe=thirdpartyemailpassword.

When I run the app, it doesn't seem to work. Loading localhost:3000 redirects you to a blank localhost:3000/auth and after waiting for a moment these two pages seem to redirect between each other in an infinite loop.

[rishabhpoddar]

Can you answer the following:

• Your node version, the browser and the OS being used.
• Did you select app dir or pages dir?
• Do you see any console errors on the browser?
• Do you see any errors on the terminal on which you ran npm run start

[alexedwardjones]

Node version: v16.18.0 Chrome version: 117.0.5938.92 OS: Mac Sonoma 14.0 App dir or pages dir: App

The infinite loop issue seems to happen when I start my app on http://localhost:3000, log in and then stop the app. I then start the demo app, navigate to http://localhost:3000 it goes into the infinite loop. If I clear my site data the demo app starts working correctly. Both apps are configured to use http://localhost:3000 and the connectionUri is set to https://try.supertokens.com so I wouldn't expect to see any issues.

On a side note, which I might raise in a separate issue, when I'm not experiencing the infinite loop on the demo app I am seeing a number of errors/warnings.

In the terminal...

Module not found: Can't resolve 'encoding' in '/Users/alex/Development/supertokens-test/my-app/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/node-fetch/lib/index.js
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/supertokens-node/lib/build/utils.js
./node_modules/supertokens-node/lib/build/recipe/session/utils.js
./node_modules/supertokens-node/lib/build/recipe/session/index.js
./node_modules/supertokens-node/recipe/session/index.js
./app/config/backend.ts
./app/api/auth/[...path]/route.ts

In the browser, when I log in and refresh the page...

1 of 2 unhandled errors
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Did not expect server HTML to contain a <div> in <main>.

2 of 2 unhandled errors
Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[alexedwardjones]

It looks like the infinite loop is happening because my app is only setting the sFrontApp cookie and not the sAccessToken cookie. You can reproduce the loop by logging into the demo app, deleting the sAccessToken cookie and refreshing the page.

I'll take a look to see if I can work out why my app isn't setting the sAccessToken.

[alexedwardjones]

I'm not sure if this will have any impact but I can see in the demo app that there are separate set-cookie headers for the sAccessToken and sRefreshToken.

In my app both are included under a single set-cookie header in a comma-delimited format.

[porcellus]

Hi, I'm having some trouble reproducing this issue. Using node 16 and a freshly generated example app I'm seeing well formed headers and it all seems to work right. Any ideas on how could I reproduce this?

About the other issues you reported:

1. I've tracked down the hydration issue
2. I've tracked down "div inside main" issue
3. The Module not found issue is because of some backwards compatibility code we have. In our testing it didn't cause any problems.

I'll add fixes to 1. and 2. from the above to the CLI during the weekend.

[alexedwardjones]

Hey 👋 Thanks for looking into those other issues.

I'm still trying to dig into why the cookies aren't getting set correctly.

Demo Project Immediately after logging in I see the following cookies in my dev tools.

And then after refreshing I see these cookies.

My Project Immediately after logging in I see the following cookies in my dev tools.

And then after refreshing I see these cookies.

I'm going to try removing things from my project and copy/pasting code from the demo project bit by bit until they match exactly. Hopefully that should dig up the root of the issue.

[alexedwardjones]

Looks like the issue was caused by my version of NextJS. After upgrading from 13.2.3 to 13.5.6 it seems to have resolved itself. I guess the app directory wasn't marked as stable until 13.4 so these sorts of things are to be expected 🤷

[rishabhpoddar]

When you tried to refresh in your project (which used 13.2.3), can i see the response headers from the refresh token API call?

[alexedwardjones]

There's no refresh token API call in that setup. There's the initial sign in API call and that's it.

[rishabhpoddar]

@alexedwardjones can i see the sign in API call's response headers?

[rishabhpoddar]

The hydration issue should have been fixed now. You can see the diff: https://github.com/supertokens/create-supertokens-app/pull/87/files