Works on localhost but not when deployed #1480

jahirfiquitiva · 2021-03-08T17:12:05Z

jahirfiquitiva
Mar 8, 2021

Describe the bug
Hi, I am currently working on a PWA and implementing next-auth. It works pretty fine in localhost but it doesn't when I deploy it to Vercel.

When deployed, after login, the site becomes unresponsive and nothing is shown there.

Steps to reproduce
You can access this website: https://dev.synaptiko.io and try to login. The app will freeze and eventually becomes unresponsive.

Expected behavior
The site should work the same way as it does in desktop

Screenshots or error logs

Localhost site with user logged in

Deployed site with user logged in

Additional context

pages/api/auth/[...nextauth].ts

const options: InitOptions = {
  providers: [
    Providers.LinkedIn({
      clientId: process.env.LINKEDIN_CLIENT_ID || '',
      clientSecret: process.env.LINKEDIN_CLIENT_SECRET || '',
    }),
    Providers.Discord({
      clientId: process.env.DISCORD_CLIENT_ID || '',
      clientSecret: process.env.DISCORD_CLIENT_SECRET || '',
    }),
  ],
  database: process.env.DATABASE_URL,
  debug: true,
};

export default (req: NextApiRequest, res: NextApiResponse): NextApiFunc =>
  NextAuth(req, res, options);

pages/_app.tsx

const App: FC<AppProps> = ({ Component, pageProps }) => (
  <ChakraProvider theme={myTheme}>
    <Head>
      <meta
        name={'viewport'}
        content={
          // eslint-disable-next-line max-len
          'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover,uc-fitscreen=yes'
        }
      />
    </Head>
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  </Chakra>
);

custom useSynaptikoSession

const useSynaptikoSession = (): [
  Session | null | undefined,
  boolean,
  boolean,
] => {
  const [session, loading] = useSession();
  const [validSession, setValidSession] = useState(false);

  useMemo(() => {
    const isNotValid =
      (!session && !loading) || !Object.keys(session || {}).length;
    setValidSession(!isNotValid);
  }, [session, loading]);

  return [
    loading ? null : validSession ? session : null,
    typeof window !== 'undefined' && loading,
    validSession,
  ];
};

export default useSynaptikoSession;

Found the documentation helpful
Found documentation but was incomplete
Could not find relevant documentation
Found the example project helpful
Did not find the example project helpful

jahirfiquitiva · 2021-03-08T17:16:09Z

jahirfiquitiva
Mar 8, 2021
Author

NEXTAUTH_URL is set to https://dev.synaptiko.io

and the providers are setup like this:

discord

linkedin

0 replies

mattfranciswork0 · 2021-06-28T04:37:30Z

mattfranciswork0
Jun 28, 2021

I have the same issue, were you able to solve it?

1 reply

mattfranciswork0 Jun 28, 2021

Also, how were you able to get the email from linkedin? Linkedin refuses to return the email value for me.

SawkaDev · 2022-11-26T04:33:13Z

SawkaDev
Nov 26, 2022

Same issue. how did you fix it?

0 replies

Swanand-Wagh · 2025-01-05T07:26:54Z

Swanand-Wagh
Jan 5, 2025

whats the fix?

0 replies

LDrex1 · 2025-01-06T00:36:23Z

LDrex1
Jan 6, 2025

Since you are deploying on Vercel, try to remove the NEXTAUTH_URL from the envs and see if it works. Unlike other platforms, vercel will discover that particular variable automatically. Since you said the login works, I think that might just be the issue, if that doesn't work. Then check the error written in the logs and let me know.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Works on localhost but not when deployed #1480

{{title}}

Replies: 5 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Works on localhost but not when deployed #1480

jahirfiquitiva Mar 8, 2021

Replies: 5 comments · 1 reply

jahirfiquitiva Mar 8, 2021 Author

mattfranciswork0 Jun 28, 2021

mattfranciswork0 Jun 28, 2021

SawkaDev Nov 26, 2022

Swanand-Wagh Jan 5, 2025

LDrex1 Jan 6, 2025

jahirfiquitiva
Mar 8, 2021

Replies: 5 comments 1 reply

jahirfiquitiva
Mar 8, 2021
Author

mattfranciswork0
Jun 28, 2021

SawkaDev
Nov 26, 2022

Swanand-Wagh
Jan 5, 2025

LDrex1
Jan 6, 2025