https://supertokens.com/ logo
Title
o

oldhack

11/24/2022, 11:42 PM
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

nkshah2

11/25/2022, 1:09 AM
Hi @oldhack Is this on production or during development as well?
o

oldhack

11/25/2022, 1:10 AM
Haven't tried it in production yet
n

nkshah2

11/25/2022, 1:11 AM
Can I see the config you pass to SuperTokens on both the frontend and backend
o

oldhack

11/25/2022, 1:13 AM
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

nkshah2

11/25/2022, 1:14 AM
What is the value of app info for both?
o

oldhack

11/25/2022, 1:14 AM
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)
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

nkshah2

11/25/2022, 1:16 AM
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

oldhack

11/25/2022, 1:17 AM
You want the it logged in the browser console, and in the server terminal?
n

nkshah2

11/25/2022, 1:17 AM
Yep
o

oldhack

11/25/2022, 1:19 AM
Console:
apiBasePath: "/api/auth"
apiDomain: "http://localhost:3999"
appName: "project1"
websiteBasePath: "/auth"
websiteDomain: "http://localhost:3999"
Server:
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

nkshah2

11/25/2022, 1:20 AM
Alright in the browser the call to the refresh api returns a 200 status code?
o

oldhack

11/25/2022, 1:21 AM
What's the refresh api endpoint?
n

nkshah2

11/25/2022, 1:21 AM
Should be /api/auth/refresh in your case
o

oldhack

11/25/2022, 1:22 AM
No....it gives me a 404
n

nkshah2

11/25/2022, 1:23 AM
In your browser if you visit http://localhost:3999/api/auth/authorisationurl what do you see?
o

oldhack

11/25/2022, 1:23 AM
{
  "message": "Please provide the thirdPartyId as a GET param"
}
n

nkshah2

11/25/2022, 1:24 AM
Can you post a screenshot of the network tab for the 404
o

oldhack

11/25/2022, 1:24 AM
/api/auth/refresh?
n

nkshah2

11/25/2022, 1:24 AM
Yep
o

oldhack

11/25/2022, 1:25 AM
n

nkshah2

11/25/2022, 1:25 AM
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

oldhack

11/25/2022, 1:27 AM
It does not call the refresh endpoint anywhere I can see in the logs in the loop
I keep getting these:
n

nkshah2

11/25/2022, 1:28 AM
This is on the /auth route?
o

oldhack

11/25/2022, 1:28 AM
yes
To answer your original question, this does not happen in production
so that's good...I guess
n

nkshah2

11/25/2022, 1:30 AM
Do you have a global middleware in your NextJS app?
o

oldhack

11/25/2022, 1:31 AM
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

nkshah2

11/25/2022, 1:33 AM
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

oldhack

11/25/2022, 1:35 AM
Yes
n

nkshah2

11/25/2022, 1:35 AM
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

oldhack

11/25/2022, 1:37 AM
Will do. What next does supertokens support?
n

nkshah2

11/25/2022, 1:44 AM
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

oldhack

11/25/2022, 1:45 AM
Thanks for your help @nkshah2 !
n

nkshah2

11/25/2022, 1:45 AM
Happy to help
r

rp

11/25/2022, 2:38 AM
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

oldhack

11/25/2022, 2:44 AM
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

rp

11/25/2022, 2:48 AM
Hmmmm. Interesting
What do you see on the browser console?
The above screenshot is of network tab
o

oldhack

11/25/2022, 2:51 AM
r

rp

11/25/2022, 2:52 AM
Can you show me the whole thing? What’s the TypeError message? And the domexception message
o

oldhack

11/25/2022, 2:53 AM
r

rp

11/25/2022, 2:55 AM
Can you navigate to localhost:3999/someotherpath?
Where someeotherpath is some valid path in your app
Does that redirect you to /?
o

oldhack

11/25/2022, 2:56 AM
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

rp

11/25/2022, 2:57 AM
That’s a different flow
Go to /about directly
o

oldhack

11/25/2022, 2:57 AM
Yep, /about directly also works
Worth pointing out /about is also wrapped in SessionAuth
r

rp

11/25/2022, 2:58 AM
So what happens when you go on that? It shows that page? Or redirects?
o

oldhack

11/25/2022, 2:58 AM
Shows the page
r

rp

11/25/2022, 2:58 AM
So you are logged in?
o

oldhack

11/25/2022, 2:58 AM
Yes
r

rp

11/25/2022, 2:58 AM
Right. So visiting /auth should redirect you to /
What’s happening on the / route?
Do you also use sessionAuth around the / route?
o

oldhack

11/25/2022, 2:59 AM
nope
/ route is just a single button
r

rp

11/25/2022, 2:59 AM
Can you remove supertokenswrapper entirely and see if the / route started working?
o

oldhack

11/25/2022, 3:00 AM
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

rp

11/25/2022, 3:00 AM
Hmm
Can you share your code with us? Via GitHub?
o

oldhack

11/25/2022, 3:01 AM
Definitely, I'll strip it back to bare minimum and put it up
r

rp

11/25/2022, 3:02 AM
Thanks! You can add me as a contributor
rishabhpoddar is my GH username. Thanks
o

oldhack

11/25/2022, 3:40 AM
Invited!
r

rp

11/25/2022, 4:03 AM
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

oldhack

11/25/2022, 11:57 AM
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

rp

11/25/2022, 11:59 AM
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:
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

oldhack

11/25/2022, 12:25 PM
Doesn't work for me. As an aside, there's no type for
windowHandler
, but, ignoring that, I still get redirected
r

rp

11/25/2022, 12:26 PM
oh really.. i just tried this on the example you gave and that fixed it
can you make sure you rebuild and stuff
o

oldhack

11/25/2022, 12:28 PM
If I add a
console
anywhere inside the windowHandler, I don't see it getting logged on the FE
r

rp

11/25/2022, 12:29 PM
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

oldhack

11/25/2022, 12:29 PM
// 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

rp

11/25/2022, 12:32 PM
cool.