Try signing with a different account. - Callback error

Describe the bug When trying to sign in to GitHub it says “Try signing with a different account.”

Steps to reproduce

Clone orangopus/libby
click “Login”
Click “Sign in with GitHub”

Make sure to include the client ID and secret in .env as GITHUB_ID and GITHUB_SECRET

Expected behavior I expected it to login and return to the app.

Screenshots or error logs The error is browser_7MIk0bI7BK

Feedback Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

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

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:34 (10 by maintainers)

Top GitHub Comments

9reactions

ndom91commented, Jun 15, 2021

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
      },
    }),

8reactions

bhatvikrantcommented, Jun 14, 2021

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:

ran yarn add next-auth
Followed the steps in this guide to install next-auth/prisma-adapter@canary
added database: process.env.DATABASE_URL in [...nextauth].js file
This is how my github OAuth application registration looks like
added GITHUB_ID, GITHUB_SECRET, DATABASE_URL environment variables in .env.local
import { signOut, useSession } from 'next-auth/client' used in src/components/Navbar/index.tsx for checking session usage.
import { signIn } from 'next-auth/client' used in src/components/Auth/OAuthProviders.tsx for signing in.
After doing all this, I start the next server using yarn dev
then, go to http://localhost:3000/login, then click on github, that redirects me to http://localhost:3000/api/auth/signin
then I click on Sign in with Github, login with my github credentials and then I get this error:
In the nextjs server console, I get the following error