https://supertokens.com/ logo
Join Discord
Powered by
I'm using the nextjs started integration and when ...
# support-questions
o
I'm using the nextjs started integration and when I have an active user session and I hit the /auth route I get caught in an endless redirect loop. Everything's been followed exactly as the integration says
n
Hi @oldhack Is this on production or during development as well?
o
Haven't tried it in production yet
n
Can I see the config you pass to SuperTokens on both the frontend and backend
o
Copy code
import EmailVerificationNode from 'supertokens-node/recipe/emailverification';
import ThirdPartyEmailPassword from 'supertokens-node/recipe/thirdpartyemailpassword';
import UserMetadata from 'supertokens-node/recipe/usermetadata';
import SessionNode from 'supertokens-node/recipe/session';
import { appInfo } from './appInfo';
import { TypeInput } from 'supertokens-node/types';
import Dashboard from 'supertokens-node/recipe/dashboard';

export const backendConfig = (): TypeInput => {
  const recipeList = [    ThirdPartyEmailPassword.init({
      providers: [
        ThirdPartyEmailPassword.Google({
          clientId: '***',
          clientSecret: '***',
        }),
      ],
    }),
    EmailVerificationNode.init({ mode: 'REQUIRED' }),
    SessionNode.init({ jwt: { enable: true } }),
    UserMetadata.init(),
  ];

  if (process.env.NODE_ENV === 'development')
    recipeList.push(
      Dashboard.init({ apiKey: process.env.NEXT_SUPERTOKENS_DASHBOARD_KEY }),
    );

  return {
    framework: 'express',
    supertokens: {
      connectionURI: process.env.NEXT_SUPERTOKENS_CONNECTION_URI,
      apiKey: process.env.NEXT_SUPERTOKENS_APIKEY,
    },
    appInfo,
    recipeList,
    telemetry: process.env.NODE_ENV === 'development',
    isInServerlessEnv: true,
  };
n
What is the value of app info for both?
o
Copy code
import { AppInfo } from 'supertokens-node/types';

export const appInfo: AppInfo = {
  // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo
  appName: 'project1',
  apiDomain: process.env.NEXT_PUBLIC_APP_DOMAIN,
  websiteDomain: process.env.NEXT_PUBLIC_APP_DOMAIN,
  apiBasePath: '/api/auth',
  websiteBasePath: '/auth',
};
(sorry, reposting my FE config because I missed the BE imports which are important)
Copy code
import ThirdPartyEmailPassword, {
  Google,
} from 'supertokens-auth-react/recipe/thirdpartyemailpassword';
import SessionReact from 'supertokens-auth-react/recipe/session';
import { appInfo } from './appInfo';
export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [
      ThirdPartyEmailPassword.init({
        signInAndUpFeature: {
          providers: [Google.init()],
          style: {
            superTokensBranding: {
              display: 'none',
            },
          },
        },
        getRedirectionURL: async (context) => {
          if (context.action !== 'SUCCESS') return;
          return context.redirectToPath || '/';
        },
      }),
      SessionReact.init(),
    ],
  };
};
n
Can you add a log in the site to print the full value of app info when it’s running (both server and frontend)? Just to make sure the values are being passed correctly
o
You want the it logged in the browser console, and in the server terminal?
n
Yep
o
Console:
Copy code
apiBasePath: "/api/auth"
apiDomain: "http://localhost:3999"
appName: "project1"
websiteBasePath: "/auth"
websiteDomain: "http://localhost:3999"
Server:
Copy code
app_1          | {
app_1          |   appName: 'project1',
app_1          |   apiDomain: 'http://localhost:3999',
app_1          |   websiteDomain: 'http://localhost:3999',
app_1          |   apiBasePath: '/api/auth',
app_1          |   websiteBasePath: '/auth'
app_1          | }
n
Alright in the browser the call to the refresh api returns a 200 status code?
o
What's the refresh api endpoint?
n
Should be /api/auth/refresh in your case
o
No....it gives me a 404
n
In your browser if you visit http://localhost:3999/api/auth/authorisationurl what do you see?
o
Copy code
{
  "message": "Please provide the thirdPartyId as a GET param"
}
n
Can you post a screenshot of the network tab for the 404
o
/api/auth/refresh?
n
Yep
o
n
Oh I didn’t mean visiting it in your browser, I meant when you visit the /auth route from your frontend and it goes in an infinite loop
It should call the refresh endpoint at some point in that situation
o
It does not call the refresh endpoint anywhere I can see in the logs in the loop
I keep getting these:
n
This is on the /auth route?
o
yes
To answer your original question, this does not happen in production
so that's good...I guess
n
Do you have a global middleware in your NextJS app?
o
I do not, it's almost completely empty
Also, I just disabled reactStrictMode for next, because I thought it might be related, but no dice
n
From the looks of it, it seems like a NextJS specific issue because it’s not really hitting the auth function but just to be sure can you add a log to the auth function and make sure that’s getting called when this behaviour occurs
Also is this Next 13?
o
Yes
n
Hmm we haven’t evaluated suport for that yet so it could be the sdk as well
Can you open an issue about this in SuperTokens node or auth react?
We can have a look later today
o
Will do. What next does supertokens support?
n
We tested it before the 13 launch so should be all versions leading up to that at least. 13 we are yet to confirm
o
Thanks for your help @nkshah2 !
n
Happy to help
r
We have tested it for NextJS 13 and it works fine
What do you see on the browser console when you navigate to /auth?
Also, are you using SessionAuth around your whole app? Or just protected routes?
o
Posted a screenshot above of my browser console: https://discord.com/channels/603466164219281420/1045484586198630451/1045510901404549160 The only thing I have wrapping the app is the SuperTokensWrapper
SessionAuth isn't used
Also worth pointing out again it's only in development, production is fine
r
Hmmmm. Interesting
What do you see on the browser console?
The above screenshot is of network tab
o
r
Can you show me the whole thing? What’s the TypeError message? And the domexception message
o
r
Can you navigate to localhost:3999/someotherpath?
Where someeotherpath is some valid path in your app
Does that redirect you to /?
o
Other paths work fine, I can go to the root route, and from there click a link that takes me to an (empty) /about page
r
That’s a different flow
Go to /about directly
o
Yep, /about directly also works
Worth pointing out /about is also wrapped in SessionAuth
r
So what happens when you go on that? It shows that page? Or redirects?
o
Shows the page
r
So you are logged in?
o
Yes
r
Right. So visiting /auth should redirect you to /
What’s happening on the / route?
Do you also use sessionAuth around the / route?
o
nope
/ route is just a single button
r
Can you remove supertokenswrapper entirely and see if the / route started working?
o
The / route works fine when I'm logged in
What happens is that when I try to land directly on /auth when I'm logged in, it throws me into this redirect loop
r
Hmm
Can you share your code with us? Via GitHub?
o
Definitely, I'll strip it back to bare minimum and put it up
r
Thanks! You can add me as a contributor
rishabhpoddar is my GH username. Thanks
o
Invited!
r
Ok thanks. Will check it out in a few hours
hey @oldhack
i tried your project. I login and then i visit the 
/auth
route directly, it redirects me to the 
/
route - which is expected.
no infinite redirect
how do i reproduce this issue?
o
Just tried it again, it's still happening in Firefox but it doesn't happen in Chrome
All extensions have been disabled and I've cleared my entire browser cache
Firefox 107 - this is great though, thanks for helping me through this. Irritating that I can't use firefox in development, but it is what it is. Thanks @rp !
r
hmm. I'll try and see if i can replicate it in firefox here
right yea.. happens on firefox for me too
will try and see why
hey @oldhack
in your frontend config, add the following code:
Copy code
import Router from 'next/router'


supertokens.init({
  // ....
  windowHandler: (oI: any) => {
      return {
        ...oI,
        location: {
          ...oI.location,
          setHref: (href: string) => {
            Router.push(href)
          },
        },
      }
    },
})
basically we are telling supertokens to use next router for navigation instead of doing a full reload. Full reload seems to cause nextjs to have this weird issue that you are facing
o
Doesn't work for me. As an aside, there's no type for 
windowHandler
, but, ignoring that, I still get redirected
r
oh really.. i just tried this on the example you gave and that fixed it
can you make sure you rebuild and stuff
o
If I add a 
console
anywhere inside the windowHandler, I don't see it getting logged on the FE
r
can you show me where you have added the windowHandler?
oh sorry./
my snippet above is wrong
it should be in supertokens.init level
updated the code
o
Copy code
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const windowHandler = (oI: any) => {
  console.log('whats up');
  return {
    ...oI,
    location: {
      ...oI.location,
      setHref: (href: string) => {
        Router.push(href);
      },
    },
  };
};

export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [
      ThirdPartyEmailPassword.init({
        signInAndUpFeature: {
          style: { superTokensBranding: { display: 'none' } },
        },
        getRedirectionURL: async (context) => {
          if (context.action !== 'SUCCESS') return;
          return context.redirectToPath || '/';
        },
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        windowHandler,
      }),
      SessionReact.init(),
    ],
  };
};
Ah, cool
Yep, it works, nice. Thanks!
r
cool.
PreviousNext
Powered by