Comments (11)
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
from supertokens-auth-react.
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.
from supertokens-auth-react.
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
.
from supertokens-auth-react.
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.
from supertokens-auth-react.
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:
- I've tracked down the hydration issue
- I've tracked down "div inside main" issue
- 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.
from supertokens-auth-react.
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.
from supertokens-auth-react.
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 🤷
from supertokens-auth-react.
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?
from supertokens-auth-react.
There's no refresh token API call in that setup. There's the initial sign in API call and that's it.
from supertokens-auth-react.
@alexedwardjones can i see the sign in API call's response headers?
from supertokens-auth-react.
The hydration issue should have been fixed now. You can see the diff: https://github.com/supertokens/create-supertokens-app/pull/87/files
from supertokens-auth-react.
Related Issues (20)
- sessionContext not destroyed on frontend after signOut in v.0.32.3 HOT 18
- KeyError: 'access_token' in Flask Python backend (during sign in on NextJS frontend) HOT 6
- Add logo property for custom logos HOT 4
- [Discussion] OAuth 2.0 changes HOT 1
- Vite run fails: ThirdPartyEmailPasswordPreBuiltUI dependency could not be resolved when importing HOT 3
- Example Issue on "with-one-login-per-subdomain" HOT 4
- getAccessToken() always returning the old access token after refreshing the session HOT 11
- Component wrapped in `SessionAuth` doesn't get the latest session context HOT 2
- Abstract away navigation from the pre built UI
- NextJS warning for styling HOT 2
- Update Needed: SuperTokens Compatibility with Next.js 14 (App Router) HOT 2
- Fail to import getSuperTokensRoutesForReactRouterDom HOT 2
- Possibility to override "thirdPartyEmailPasswordDivider" style HOT 2
- Overriding password reset component results in the logo outside the container
- SSR support for SessionAuth HOT 3
- Nested redirects HOT 2
- Create Remix example for TPEP recipe HOT 2
- Example Electron App out of date HOT 2
- Doesn't work on React Router 6.4 (v6.22.3) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from supertokens-auth-react.