https://supertokens.com/ logo
Join Discord
Powered by
Has anyone had this problem? It happens constantly...
# support-questions-legacy
w
Has anyone had this problem? It happens constantly, but the user just needs to try to login/request again and it works.
The error comes in this function:
r
hey ! Which social provider are you trying to sign up / in with?
@KShivendu can help here.
w
Hi @rp_st , Google.
r
Hmm. This means that google isn’t sending you an access token. Which usually implies that the auth code sent to the api is either invalid or as already been used
Are you using a custom ui on the frontend and using reactjs?
w
No, I'm using the default for next js
r
hmm. Is this replicable reliably ?
w
I've never been able to replicate it, but it happens to my users, I just know that it's giving an error because of the sentry and because I've already had complaints that sometimes it's necessary to log in several times because it keeps giving an error
r
that's really strange. We haven't had this complaint from anyone until now. Have you set any custom scope for google sign in?
w
I got this error 160 times in the last 30 days, but I have no idea what happens
I use this scope "https://www.googleapis.com/auth/userinfo.profile"
r
that seems right
i'll see what we can do to help with this. Give me sometime
w
I was able to simulate the error by changing the origin of NextCors, after changing the first attempt failed at login, the others proceed without problems: pages/auth/[[...path].ts Does this have anything to do with when it's in production?
r
hmm. So the setting you changed is in your nextjs backend which has little to do with the python backed. So this change should not affect the python backend behaviour
k
Hi @Wildson that's unexpected. Can you can see the value of 
auth_code_response
whenever the error has occurred (using Sentry)?
r
how will they see that @KShivendu ? This error is from our SDK.
k
@rp_st iirc, sentry collects variables names and values from the whole call stack when error occurs.
r
i see. okay
w
Raw trace
Sentry blur variables
r
oh.. we wanted to see the value of auth_code_response
w
I disabled the filter
r
right. Is the redirectURI in the request correct?
w
Yes
r
What the value that’s being sent to the backend? And what’s the value that’s set on Google’s dashboard?
w
I found the problem, at the time of login two signup requests are always being sent, and the token can only be obtained once and the error occurs on the second attempt. This explains why it only happened a few times, as it depended on the time of the two requests, even if the second failed, the user was authenticated with the first request and for him it was "transparent". Is there some wrong configuration in my NextJS? Even in production two login requests are made.
My frontendConfig:
Copy code
import Router from "next/router";
import SessionReact from "supertokens-auth-react/recipe/session";
import ThirdPartyEmailPasswordReact from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import { appInfo } from "./appInfo";
import { ptbr } from "./translation";

export const frontendConfig = () => {
  return {
    languageTranslations: {
      translations: {
        ptbr,
      },
      defaultLanguage: "ptbr",
    },
    appInfo,
    recipeList: [
      ThirdPartyEmailPasswordReact.init({
        style: `
        [data-supertokens~=container] {
          --palette-background: 51, 51, 51;
          --palette-inputBackground: 41, 41, 41;
          --palette-inputBorder: 41, 41, 41;
          --palette-textTitle: 255, 255, 255;
          --palette-textLabel: 255, 255, 255;
          --palette-textPrimary: 255, 255, 255;
          --palette-error: 173, 46, 46;
          --palette-textInput: 169, 169, 169;
          --palette-textLink: 169, 169, 169;
          --palette-primary: 232, 89, 12;
          --palette-primaryBorder: 220, 77, 0;
        }
        [data-supertokens~=forgotPasswordLink] {
          visibility: hidden;
          position: absolute;
        }
        [data-supertokens~=headerSubtitle] {
          visibility: hidden;
          position: absolute;
        }
        `,
        signInAndUpFeature: {
          providers: [ThirdPartyEmailPasswordReact.Google.init()],
        },
      }),
      SessionReact.init(),
    ],
    windowHandler: (oI: any) => {
      return {
        ...oI,
        location: {
          ...oI.location,
          setHref: (href: string) => {
            Router.push(href);
          },
        },
      };
    },
  };
};
r
hmm. So you are using our pre built UI?
w
Yes
r
Hmmm. Can you please open an issue about this? Also stating the react version and your frontend setup?
We can have a look. Cause we do remember fixing this issue before
w
Yes, thanks for the help
r
Thanks
Also, is this happening in production build as well? Or just dev build?
w
Both
r
Right ok. We can have a look once you open an issue. Please mention the NextJS version you use as well
w
r
Also provide the frontend supertokens.init config that you have
Thanks. Btw, are you calling signinup function from our SDK on your own on the frontend?
w
This setup?
Copy code
import { Request, Response } from "express";
import { NextApiRequest, NextApiResponse } from "next";
import NextCors from "nextjs-cors";
import supertokens from "supertokens-node";
import { middleware } from "supertokens-node/framework/express";
import { superTokensNextWrapper } from "supertokens-node/nextjs";
import { backendConfig } from "../../../config/backendConfig";

supertokens.init(backendConfig());

const websiteDomain = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";

export default async function superTokens(req: NextApiRequest & Request, res: NextApiResponse & Response) {
  // NOTE: We need CORS only if we are querying the APIs from a different origin
  await NextCors(req, res, {
    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
    origin: websiteDomain,
    credentials: true,
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
  });

  await superTokensNextWrapper(
    async (next) => {
      // This is needed for production deployments with Vercel
      res.setHeader("Cache-Control", "no-cache, no-store, max-age=0, must-revalidate");
      await middleware()(req, res, next);
    },
    req,
    res
  );
  if (!res.writableEnded) {
    res.status(404).send("Not found");
  }
}
I believe your SDK
r
no i mean the frontend supertokens.init
w
What location is this? _app? I'm a little confused
r
yea. in the _app.tsx, you must be doing supertokens.init from the supertokens-auth-react SDK
i want to know the config provided to supertokens.init
w
Copy code
`
if (typeof window !== "undefined") {
  SuperTokensReact.init(frontendConfig());
}

function App({ Component, pageProps }: AppProps<{ fromSupertokens: string }>) {
  const [opened, setOpened] = useState(false);
  const { width } = useViewportSize();
  const router = useRouter();

  useEffect(() => {
    async function doRefresh() {
      if (pageProps.fromSupertokens === "needs-refresh") {
        if (await Session.attemptRefreshingSession()) {
          location.reload();
        } else {
          redirectToAuth();
        }
      }
    }
    doRefresh();
  }, [pageProps.fromSupertokens]);

  if (pageProps.fromSupertokens === "needs-refresh") {
    return null;
  }

  return (
    <>
      <Head>
        <title>Explorernet</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>

      <AppProviders>
        {router.pathname.startsWith("/auth") && <Component {...pageProps} key={router.asPath} />}
        {!router.pathname.startsWith("/auth") && (
          <AppShell
            fixed
            navbarOffsetBreakpoint="sm"
            navbar={
              width < 769 && width > 0 ? <NavbarMobile opened={opened} setOpened={setOpened} /> : <CustomNavbar />
            }
            styles={(theme) => ({
              main: {
                backgroundColor: theme.colorScheme == "dark" ? theme.colors.dark[8] : theme.colors.gray[0],
              },
            })}
            header={width < 769 && width > 0 ? <CustomHeader opened={opened} setOpened={setOpened} /> : undefined}
          >
            <SessionAuth>
              <RouterTransition />
              <Component {...pageProps} key={router.asPath} />
            </SessionAuth>
          </AppShell>
        )}
      </AppProviders>
    </>
  );
}

export default App;
r
yup. The contents of 
frontendConfig()
w
frontendConfig
Copy code
import Router from "next/router";
import SessionReact from "supertokens-auth-react/recipe/session";
import ThirdPartyEmailPasswordReact from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import { appInfo } from "./appInfo";
import { ptbr } from "./translation";

export const frontendConfig = () => {
  return {
    languageTranslations: {
      translations: {
        ptbr,
      },
      defaultLanguage: "ptbr",
    },
    appInfo,
    recipeList: [
      ThirdPartyEmailPasswordReact.init({
        style: `
        [data-supertokens~=container] {
          --palette-background: 51, 51, 51;
          --palette-inputBackground: 41, 41, 41;
          --palette-inputBorder: 41, 41, 41;
          --palette-textTitle: 255, 255, 255;
          --palette-textLabel: 255, 255, 255;
          --palette-textPrimary: 255, 255, 255;
          --palette-error: 173, 46, 46;
          --palette-textInput: 169, 169, 169;
          --palette-textLink: 169, 169, 169;
          --palette-primary: 232, 89, 12;
          --palette-primaryBorder: 220, 77, 0;
        }
        [data-supertokens~=forgotPasswordLink] {
          visibility: hidden;
          position: absolute;
        }
        [data-supertokens~=headerSubtitle] {
          visibility: hidden;
          position: absolute;
        }
        `,
        signInAndUpFeature: {
          providers: [ThirdPartyEmailPasswordReact.Google.init()],
        },
      }),
      SessionReact.init(),
    ],
    windowHandler: (oI: any) => {
      return {
        ...oI,
        location: {
          ...oI.location,
          setHref: (href: string) => {
            Router.push(href);
          },
        },
      };
    },
  };
};
r
ok this helps. Thanks. I'll add this to the issue as well.
and are you doing any react component override?
w
No, the only override I do is in the backend
r
ok got it. Thanks for the info. We will try and replicate the issue first
w
Ok, thanks
r
Hey @Wildson the two requests being made - are they both POST requests? Or is one of them OPTIONS?
w
both POST
r
Okay
w
Sometime both return status 200 🤷🏻‍♂️
r
That shouldn’t be possible
Can I see the network area screenshot along with the method?
w
r
Can you show the method as well? So don’t select any one request
w
This is in production build
r
Can you get chrome to show the method as well?
Tagging @porcellus and @alisheraituarov1544 here.
w
It helps?
r
And the second request one as well please
w
r
Hmm. This seems very strange. I’m not sure how google allows using the same auth code twice. Very odd!
We will try and replicate it
w
Maybe as it is very fast/the same time for both is possible, I put a delay between one or the other and I could not replicate
r
How did you put a delay?
w
random.randint(1, 5)
In my backend
r
where on the backend?
w
Django, i will send to you
r
Right ok. Makes sense. Thanks for the info
p
I see nothing out of ordinary in the frontend code, and trying this with the same versions I could not replicate the issue. Is there anything else that could help me get the same error? Or maybe any code/repo I could look at?
I'll try replicating it again, but any help/further info would be greatly appreciated 🙂
w
Later I will try to simulate with a public repository, what I noticed is that only with the social login (Google and GitHub) this duplication happens, with email and password only one request is sent
46 Views
PreviousNext
Powered by