Next.js Discord

Discord Forum

NextAuth v4 auth timing out when deployed to Vercel, but works locally

Unanswered
Sardinian Shepherd Dog posted this in #help-forum
Open in Discord
Sardinian Shepherd DogOP
I've been having an issue the past 4 hours trying to figure out why exactly my app works locally with Discord OAuth, but when deploying to vercel, it times out.

It seems like im getting a 200 when hitting discords authorize API:

https://discord.com/api/v9/oauth2/authorize

After I get a 200, it spins on Discords OAuth, because it can't redirect to my apps path:

/api/auth/callback/discord?code={code_here}

Any help is greatly appreciated as I really can't figure out what's going on!

34 Replies

Sardinian Shepherd DogOP
Feel free to try it yourself!

https://cards-beyond-humanity.vercel.app/
Login with Discord, and you'll notice it just spins forever.
I also took a look at a bunch of example apps and I believe my setup is the same as a lot of basic auth apps.
@Sardinian Shepherd Dog Feel free to try it yourself! https://cards-beyond-humanity.vercel.app/
are you able to share a screen recording and perhaps some code of the callback page? sorry I'm not comfortable authorizing some random oauth link
Sardinian Shepherd DogOP
sure! definitely
one sec
ok so basically it gets stuck here for about 10 seconds
you mean it's stuck on discord's oauth page?
Sardinian Shepherd DogOP
youll see in the network request the authorize returned a 200, then it gets stuck on my /api/auth/callback/discord?code=CODE_HERE
yes
youll see in the network request its pending
that is odd..
Sardinian Shepherd DogOP
eventually I just get a 504 Gateway Timeout
then it just hits this page
youll see on the right the /api/auth/callback with the code on the right got a 504 timeout
(I didnt show the whole thing since its giving me back a code)
Im pretty familiar with OAuth in general, I think I have everything setup just fine. Redirect urls, NEXTAUTH_SECRET envs are set properly in Vercel, etc.
export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
    /**
     * ...add more providers here.
     *
     * Most other providers require a bit more work than the Discord provider. For example, the
     * GitHub provider requires you to add the `refresh_token_expires_in` field to the Account
     * model. Refer to the NextAuth.js docs for the provider you want to use. Example:
     *
     * @see https://next-auth.js.org/providers/github
     */
  ],
};
heres my auth.ts file
import NextAuth from "next-auth";
import { authOptions } from "~/server/auth";

export default NextAuth(authOptions);
and my [...nextauth].ts
nothing really crazy. just doing what is in the documentation.
Sardinian Shepherd DogOP
any ideas would be greatly appreciated as I am completely dumbfounded why it would work locally but timeout in vercel
sorry, might need for someone else to pick up this question, i don't have any ideas either
wait, could you check vercel's logs, perhaps there's a hint there?
Sardinian Shepherd DogOP
I checked but not much. just shows the timeout really
ig i'll try authorizing with just identify as scope and see if that works
yup same thing, the redirect page hangs
Sardinian Shepherd DogOP
yeah I dont understand at all
Sardinian Shepherd DogOP
Looks like this post has the EXACT issue im having too: https://github.com/nextauthjs/next-auth/discussions/5057
Sardinian Shepherd DogOP
I figured it out... mongodb did allow access unless I specified...
Barbary Lion
@Sardinian Shepherd Dog having a similar issue, can you elaborate if you remember?