Theo's Typesafe Cult•2y ago

nextAuth working only locally (not on vercel deployment)

I've been trying for a day now. I don't know the issue. I can't even get an error. When the nextAuth singIn() method runs, I just get the /api/auth/error page.

100 Replies

Johnson•2y ago

I'll have to add to this: sometimes it works miraculously, without anyone changing anything, seemingly random.

Johnson•2y ago

I can also observe the /api/auth/singin page displaying no providers (which might be the source of the error)

Johnson•2y ago

I got google and discord providers

Ambushfall•2y ago

Didn't have this happen to me at all, so I can't say what's causing it, have the repo publicly available for possible replication?

barry•2y ago

No clue without code

Johnson•2y ago

I just found out that I can run a working commit on vercel, but as soon as I promote that same vercel deployment to production, it breaks It's a private repo🙃 , I can share code tho (I just don't know what to share)

barry•2y ago

You’re missing NEXTAUTH_SECRET as environment variable It’s required in prod Optional elsewise

Johnson•2y ago

nop

Johnson•2y ago

I can try changing it

barry•2y ago

So what are the logs saying

Johnson•2y ago

which ones I can't seem to get any errors

barry•2y ago

The ones that fail lol

Johnson•2y ago

well the terminal says nothing the chrome console says nothing vercel functions just show the get request for /api/auth/error

barry•2y ago

What if you build it and run it locally

Johnson•2y ago

I can try again, but pretty sure that yields nothing ye, it works locally so no errors

barry•2y ago

also if you set env to production

Johnson•2y ago

wut where

barry•2y ago

in env variables?

Johnson•2y ago

am I supposed to have an env variable that says wether or not I am in prod ?

barry•2y ago

You don’t need it no

Johnson•2y ago

I only have a database env for dev and prod that I switch around so how do I change this ?

barry•2y ago

just set NODE_ENV to production build and run

Johnson•2y ago

NODE_ENV=production?

barry•2y ago

yes

Johnson•2y ago

I did npm run build and npm start and it still works

barry•2y ago

idk wtf you done then lol does the build fail what part fails

Johnson•2y ago

like, npm run build?

barry•2y ago

vercel build

Johnson•2y ago

uhh no I don' think so I can post some warnings

barry•2y ago

so it shows a ready state etc

barry•2y ago

like that

Johnson•2y ago

ye ofc

barry•2y ago

^^ but the screen is white? blank

Johnson•2y ago

what do you mean?

barry•2y ago

the page*

Johnson•2y ago

uhh no why would it be white

barry•2y ago

is it blank

Johnson•2y ago

barry•2y ago

so the page works

Johnson•2y ago

yes

barry•2y ago

what part doesnt work oauth?

Johnson•2y ago

everything works (I think, most is behind the auth wall) its just that when I go to signIn() or manually go to /api/auth/signin

barry•2y ago

you doing oauth?

Johnson•2y ago

signIn() gives the api/auth/error page

barry•2y ago

or password stuff

Johnson•2y ago

oauth only that nothing more

barry•2y ago

and you added https://vercel.deployment.example.com/api/auth/callback/discord https://vercel.deployment.example.com/api/auth/callback/google as a callback on google and discord

Johnson•2y ago

and /api/auth/signin is just empty

barry•2y ago

and its not localhost

Johnson•2y ago

yes yes ofc, it works locally and I am not getting an invalid callback uri error

barry•2y ago

you doing signIn() or signIn("google") / signIn("discord")

Johnson•2y ago

actually, the vercel build in preview gives me the invalid callback uri error tried both, no difference

barry•2y ago

for example your discord oauth how is the settings on developer portal setup

Johnson•2y ago

the callback uri?

barry•2y ago

sure

Johnson•2y ago

http://localhost:3000/api/auth/callback/discord and the same for our websites

barry•2y ago

ill send you an example

Johnson•2y ago

its not a callback uri error thats really not it

barry•2y ago

yeah thats obv not going to work on vercel?? vercelurl.com/api/auth/callback/discord you cant do localhost and expect it to work when deployed on vercel

Johnson•2y ago

we are talking past each other I think

barry•2y ago

you're saying your callback uri is this http://localhost:3000/api/auth/callback/discord right

Johnson•2y ago

I am saying 1. there are more 2. even if it was blank it would not make a difference because I would an invalid callback uri error then but that is not the error I am getting I am getting nothing except a redirect to /api/auth/error

barry•2y ago

so going to api/auth/signin goes to that

Johnson•2y ago

no calling the signIn() function, through a button, goes to that I can manually go to /api/auth/signin and see this >no providers

barry•2y ago

show the button and the onclick

Johnson•2y ago

{session ? (
        <div
          className={`flex items-center justify-center gap-2 ${
            showBar && "px-1"
          }`}
        >
          {showBar && (
            <div className="flex-1 rounded-full bg-gray-300 p-1">
              <p className="text-sm">Quick Menu</p>
            </div>
          )}
          <div className="flex h-8 w-8 cursor-pointer items-center justify-center self-center rounded-full bg-gray-300">
            <button
              onClick={() =>
                signOut({
                  callbackUrl: "/",
                })
              }
            >
              <img
                src={session.user?.image as string}
                alt="Profile picture"
                className="rounded-full"
              />
            </button>
          </div>
        </div>
      ) : (
        <div
          className={`flex items-center justify-center gap-2 ${
            showBar && "px-1"
          }`}
        >
          {showBar && (
            <div className="flex-1 rounded-full bg-gray-300 p-1">
              <p className="text-sm">Quick Menu</p>
            </div>
          )}
          <div className="border-rou flex h-8 w-8 cursor-pointer items-center justify-center self-center rounded-full bg-gray-200">
            <button onClick={() => signIn()}>
              <FaDiscord className="icon text-purple-500" />
            </button>
          </div>
        </div>
      )}

{session ? (
        <div
          className={`flex items-center justify-center gap-2 ${
            showBar && "px-1"
          }`}
        >
          {showBar && (
            <div className="flex-1 rounded-full bg-gray-300 p-1">
              <p className="text-sm">Quick Menu</p>
            </div>
          )}
          <div className="flex h-8 w-8 cursor-pointer items-center justify-center self-center rounded-full bg-gray-300">
            <button
              onClick={() =>
                signOut({
                  callbackUrl: "/",
                })
              }
            >
              <img
                src={session.user?.image as string}
                alt="Profile picture"
                className="rounded-full"
              />
            </button>
          </div>
        </div>
      ) : (
        <div
          className={`flex items-center justify-center gap-2 ${
            showBar && "px-1"
          }`}
        >
          {showBar && (
            <div className="flex-1 rounded-full bg-gray-300 p-1">
              <p className="text-sm">Quick Menu</p>
            </div>
          )}
          <div className="border-rou flex h-8 w-8 cursor-pointer items-center justify-center self-center rounded-full bg-gray-200">
            <button onClick={() => signIn()}>
              <FaDiscord className="icon text-purple-500" />
            </button>
          </div>
        </div>
      )}

this is part of a sidebar

barry•2y ago

what if you do signIn("discord")

Johnson•2y ago

we also tried signIn("discord") and signIn("discord", {}) I'll try again, sure I think its not the button, the button is redirecting to ap/auth/error because there are no providers registered most likely as I said, I can observe there being no providers on /api/auth/signin that is sort, the first issue

barry•2y ago

show your next auth config then its api/auth/[...nextauth].ts right

Johnson•2y ago

import NextAuth, { type NextAuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
// Prisma adapter for NextAuth, optional and can be removed
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "../../../server/db/client";
import { env } from "../../../env/server.mjs";

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  // Configure one or more authentication providers
  adapter: PrismaAdapter(prisma),
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
};

export default NextAuth(authOptions);

import NextAuth, { type NextAuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
// Prisma adapter for NextAuth, optional and can be removed
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "../../../server/db/client";
import { env } from "../../../env/server.mjs";

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  // Configure one or more authentication providers
  adapter: PrismaAdapter(prisma),
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
};

export default NextAuth(authOptions);

Johnson•2y ago

barry•2y ago

exactly same as me and works

Johnson•2y ago

I think running a working commit on vercel and it breaking as soon as its promoted to production is the closest I got to the problem

barry•2y ago

you set env variables with the right names on vercel?

Johnson•2y ago

Johnson•2y ago

all set without ""

barry•2y ago

promoted to development or production

Johnson•2y ago

this works

barry•2y ago

Johnson•2y ago

when I click, promote to production, it breaks

barry•2y ago

and if you go to functions and look for errors what then

Johnson•2y ago

on the working one or on production prod is my guess

barry•2y ago

prod yh also promoting to production gives your site a new url make sure that url is added as callback uri

Johnson•2y ago

again, if it isn't I will just get this error

Johnson•2y ago

but then I know that the issue is basically fixed

barry•2y ago

the prod url is different from preview shrug

guess thats whats breaking it though

Johnson•2y ago

well I have it running on 2 extra non-vercel domains it doesn't make a difference if the callback uri is set

barry•2y ago

weird

Johnson•2y ago

also It works currently, but It will break soon it randomly switches between working and not working sometimes but the majority is non-working

barry•2y ago

send url?

Johnson•2y ago

Ambushfall•2y ago

Fixed or?

Johnson•2y ago

No🙃

Ambushfall•2y ago

Can you make a reproduction using the base CT3A and make it public?

Johnson•2y ago

I will do tomorrow, I am considering redoing the entire app at this point

Ambushfall•2y ago

Don't have to re-do it. Just re-produce the issue. Sounds like a DB integration Issue honestly. I'm just not sure exactly how to help you out with nothing to go on.

Johnson•2y ago

Yeah the "there is no error thing" is the biggest problem

theFern•2y ago

Can you provide a screenshot of your Vercel logs?

Ambushfall•2y ago

Even if there's an error, unless it's really obvious, there's likely little we can do. It's like saying "Help me, I have an issue" whilst the issue could literally be under a rock in the sea xD Kinda hard with development to pin-point. @Johnson I am aware that this sounds stupid, but test npx prisma db push/sync, and test nextauthurl to be vercel's, see if that shows any errors locally when you're in dev. environment.

Johnson•2y ago

Yeah true

Gaming

Programming

nextAuth working only locally (not on vercel deployment)