Getting "Try signing in with a different account" on Vercel deployment but not in local environment

[rael346]

Question 💬

After using signIn with Google Provider, instead of redirecting to /onboard, the page redirects back to sign-in with this url: [main url]/sign-in?callbackUrl=https%3A%2F%2F[main url]%2Fonboard&error=Callback. This is only happening when I deploy this on Vercel, but doesn't happen in local environment.

How to reproduce ☕️

package.json

    "next": "12.2.4",
    "next-auth": "^4.10.3",
    "react": "18.2.0",

authOptions

export const authOptions: NextAuthOptions = {
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
        session.user.isOnboarded = user.isOnboarded;
      }
      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/sign-in",
  },
};

env

# Prisma

DATABASE_URL=xxx

# Next Auth

NEXTAUTH_SECRET=xxx
NEXTAUTH_URL=http://localhost:3000

# Next Auth Google Provider

GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=xxx

Here is the current repo and it is deploy here

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[rael346]

I tried logging the error when deploying and get this error

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] 
https://next-auth.js.org/errors#oauth_callback_handler_error error: Error validating datasource `db`: the URL must start with the protocol `mysql://`.
  -->  schema.prisma:11
   | 
10 |   provider             = "mysql"
11 |   url                  = env("DATABASE_URL")
   | 

Validation Error Count: 1 Error: error: Error validating datasource `db`: the URL must start with the protocol `mysql://`.
  -->  schema.prisma:11
   | 
10 |   provider             = "mysql"
11 |   url                  = env("DATABASE_URL")
   | 

Validation Error Count: 1
    at RequestHandler.handleRequestError (/var/task/node_modules/@prisma/client/runtime/index.js:28664:13)
    at PrismaClient._getDmmf (/var/task/node_modules/@prisma/client/runtime/index.js:29740:23)
    at async PrismaClient._executeRequest (/var/task/node_modules/@prisma/client/runtime/index.js:29661:22)
    at async consumer (/var/task/node_modules/@prisma/client/runtime/index.js:29618:18)
    at async PrismaClient._request (/var/task/node_modules/@prisma/client/runtime/index.js:29639:16)
    at async getUserByAccount (/var/task/node_modules/@next-auth/prisma-adapter/dist/index.js:11:29) {
  name: 'GetUserByAccountError',
  code: undefined
}

Seems to be a prisma error. For reference, my DATABASE_URL env is 'mysql://...' and I'm using planetscale.

[rael346]

Found a fix for this, in local env I surround the DATABASE_URL with backticks, but the backticks should be remove on vercel env variable.