next-auth: Try signing with a different account. - Callback error

Hey william, thanks for this!

You probably saw it, but theres an issue/PR related to this in the core repo already as well: https://github.com/nextauthjs/next-auth/pull/2108 + https://github.com/nextauthjs/adapters/issues/130

Balazs initially said he wanted to hold off on this change until the next major release since it seems like a breaking change. Some users will have already coded around it expecting it to be a number instead of a string, etc.

How do you see it? Would this be a breaking change in your opinion?

EDIT: Someone posted a workaround in that thread:

I’ll leave this note here for the benefit of other people who might run into the same issue.

Until this gets fixed, use this workaround:

import NextAuth, { User as NextAuthUser } from ‘next-auth’ interface NextAuthUserWithStringId extends NextAuthUser { id: string }

Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      profile(profile) {
        return {
          id: profile.id.toString(),
          name: profile.name || profile.login,
          email: profile.email,
          image: profile.avatar_url,
        } as NextAuthUserWithStringId
      },
    }),

prisma related issue solved for me by just generating the client again

npx prisma generate

This is the code for a reproducible example @williamluke4

NOTE: The github oAuth on vercel preview deployment won’t work since I have not added the github and my database environment variables in the vercel environment, but you can add your own environment variables for testing. Please let me know if I should add them.

Steps I took to setup nextauthjs in this project:

1. ran yarn add next-auth

2. Followed the steps in this guide to install next-auth/prisma-adapter@canary

3. added database: process.env.DATABASE_URL in [...nextauth].js file

4. This is how my github OAuth application registration looks like

5. added GITHUB_ID, GITHUB_SECRET, DATABASE_URL environment variables in .env.local

6. import { signOut, useSession } from 'next-auth/client' used in src/components/Navbar/index.tsx for checking session usage.

7. import { signIn } from 'next-auth/client' used in src/components/Auth/OAuthProviders.tsx for signing in.

8. After doing all this, I start the next server using yarn dev

9. then, go to http://localhost:3000/login, then click on github, that redirects me to http://localhost:3000/api/auth/signin

10. then I click on Sign in with Github, login with my github credentials and then I get this error:

11. In the nextjs server console, I get the following error

Thankyou @williamluke4 for helping out 😃

Looks like the return from the git hub provider has an extra value that is not in the example prisma schema. I added refresh_token_expires_in Int? to my accont model so it looks like

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?
  access_token       String?
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?
  session_state      String?
  oauth_token_secret String?
  oauth_token        String?
  refresh_token_expires_in        Int?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

accont creation from git hub work for me after this

Thanks @bhatvikrant, I’ll have a dig around tomorrow morning

I am hitting this issue using google authentication with prisma. It was working fine before starting to integrate with Prisma.

Its not about adapter its about next-auth lib issue can some one help me next-auth][debug][CREATE_STATE] { state: ‘O1k6DX0Isddd9wvUdsdnCRksudNFYQyk0ZVO4c8lqqePc’, maxAge: 900 } [next-auth][debug][CREATE_PKCE_CHALLENGE_VERIFIER] { code_challenge: ‘oEzh0AjPSnp7wIsdsdsdCtYPHVmdU-NDd39J7o’, code_challenge_method: ‘S256’, code_verifier: ‘mYB_6sdsdf8sd0nbTKvoTxeoAacW0w-tuZ_ASfUvITPs8’, PKCE_MAX_AGE: 900 } [next-auth][debug][GET_AUTHORIZATION_URL] { url: ‘https://twitter.com/i/oauth2/authorize?client_id=UlVva1VQM0sxblRnWMVc6MTpjaQ&scope=users.read tweet.read offline.access&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Ftwitter&state=O1k6DXZNNgI0I9wvUnCRksudNFYQyk0ZVO4c8lqqePc&code_challenge=oEzh0AjPSnp7wICmdPiqEjCcZ7ZBU-NDd39J7o&code_challenge_method=S256’, cookies: [ { name: ‘next-auth.state’, value: ‘eyJhbGciOiJkaXIiLCJlbmJBMjU2R0NNIn0…PkaCKXnqbDyGy-lr.FpYZLVHv9caJ3ITP4kQqW0uiyKyR-BYUzWUsd-d0F4XNk9uU-xts6VAUvD697y7oltF4pgcEEhMUvnTPbwryvDTWLqX4M-w73Td_n-jisl1Zgn7EWKi9C3JjrsHcvSXoxC-de-MUCGhR4XgRtXbnkR6WxQ.rDgOw9i9YQMYIdENxYg-6g’, options: [Object] }, { name: ‘next-auth.pkce.code_verifier’, value: ‘eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0sdQ8YT1x1hQUvSBE.02S7_YBK1ok4cRA0aa8MhcvRJ2ypHaznbVasAnhmvigiy1Jz-XNrKo0oYnR-qx5QRVWfKSmRxYI5l0-hoxp6T2Gpdpp273ATBgzQTJs7GYs5Enxjptkva4Vgr-Rw_aRal7W5G0pNHFfRYknc4FPH5cdMCEFoQFjJKSGdcwtks8lwdRSxanBJy6tw2rwxwQ.PJBK-sweSQg_K2RJMUMjA’, options: [Object] } ], provider: { id: ‘twitter’, name: ‘Twitter’, version: ‘2.0’, type: ‘oauth’, authorization: { url: ‘https://twitter.com/i/oauth2/authorize’, params: [Object] }, token: { url: ‘https://api.twitter.com/2/oauth2/token’, request: [AsyncFunction: request] }, userinfo: { url: ‘https://api.twitter.com/2/users/me’, params: [Object] }, profile: [Function: profile], checks: [ ‘pkce’, ‘state’ ], idToken: false, clientId: ‘UlVva1VQM0sxblRnWnc2sdfadhhHH’, clientSecret: ‘ffyz6bdNKWasdf1jOOevA4UQLr_IFmo’, signinUrl: ‘http://localhost:3000/api/auth/signin/twitter’, callbackUrl: ‘http://localhost:3000/api/auth/callback/twitter’ } } [next-auth][error][OAUTH_CALLBACK_ERROR] https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 403 Forbidden { error: OPError: expected 200 OK, got: 403 Forbidden

Guys, I found out a simple solution for those who struggle with email auth. Just add a callback for signin and assign a user name there. Prisma will consume that name and user will be registered.

const options = {
  callback: {
    signIn(user, account, profile) {
        user.name = slug(user.email.slice(0, user.email.indexOf('@'))) // or whatever else
  
        return true
      }
  }
}

For me it was a problem with the connection to the database. Fix the environment variable, redeploy to vercel. Presto!

I fixed this by removing the database: process.env.DATABASE_URL, that is there by default in […nextauth].js if you copiedd it from the tutorial.

@ndom91 Since the prisma adapter (non-legacy version) is marked as experimental, why not use @williamluke4’s PR as a temporary measure until the version of nextauth with the updated github provider is available? At that point you could undo the changes, or keep them to allow backwards compatibility with older versions of nextauth with the incompatible github provider code?

Awesome! Thankyou @williamluke4 and @ndom91! This works for me now!

But whenever I login using github as mentioned above, the email is stored as null in my database, how can I enable email to be stored as well as soon as someone logs in?

EDIT: I can see that the docs mention: Email address is not returned if privacy settings are enabled.

So there are quite a few different issues stuffed into this issue.

@bhatvikrant Your issue is because the GitHub providerAccountId given to the adapter is a number and in the database expects a string.

I don’t know if this is expected behaviour and whether it should be fixed in the adapter or in the provider (@ndom91 @balazsorban44 ).

I’ve opened a draft PR that will ensure that the providerAccountId is converted to a string.

Thanks, @bhatvikrant, I’ll check it out when you are ready 😃

Hey, @bhatvikrant Do you have a reproduction I can look at?

From the above ☝️ errors it seems that the adapter is trying to create a new user but there is a unique constraint violation on the field name. Meaning that a user with that name already exists.