Nextjs 13 part 1 Authentication with callback error

React
1

I have gotten stuck at the Authentication part when ever i try to login with google it says i should try another account. I have restart the server most times still not working. Then i used github authentication and it worked, as soon as i added the prisma both google and github not working . please i want help is been a week now still cant figure out what’s wrong.

import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from 'next-auth/providers/github';
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma/client";
import { NextAuthOptions } from "next-auth";


export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
    providers: [
  GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID!,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET!
  }),

  GitHubProvider({
    clientId: process.env.GITHUB_ID!,
    clientSecret: process.env.GITHUB_SECRET!
  })
  ],
  session: {
      strategy: 'jwt'
    }
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }
2

Did you setup GITHUB ID and SECRET in .env file?

GITHUB_ID=“XXXXXXX”
GITHUB_SECRET=“XXXXXXX”

Please paste or check the errors code for further diagnose.

3

This is my .env file

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="mysql://root:MyP@ssw0rd@localhost:3306/nextapp"
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="denk74vzt"

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

GOOGLE_CLIENT_ID=492520705198-cgb5g1pfdnqpr0tigj4l1ld43rnrree5.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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

GITHUB_ID=Iv1.e88cdcef93669792
GITHUB_SECRET=812d78dfe3465386017c29aef9040b4364fc0905

this is the error message

next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error
Invalid `prisma.account.create()` invocation:

{
  data: {
    provider: "github",
    type: "oauth",
    providerAccountId: "137010021",
    access_token: "ghu_Kr8DOMqmA6fLOfHhgapL3XYN0eGd0o0o5JF9",
    expires_at: 1697095435,
    refresh_token: "ghr_5p2mCKqphsppDyS1mTJ8t6GG0Wfrqgn3JWv8bxazLx7BGYtMd01usSUEppmx9Rm2JsLkMo4OqSk5",
    refresh_token_expires_in: 15811200,
    ~~~~~~~~~~~~~~~~~~~~~~~~
    token_type: "bearer",
    scope: "",
    userId: "clnmdnrnp0006osspeti008da",
?   id?: String,
?   id_token?: String | Null,
?   session_state?: String | Null
  }
}

Unknown argument `refresh_token_expires_in`. Available options are marked with ?. PrismaClientValidationError:
Invalid `prisma.account.create()` invocation:

{
  data: {
    provider: "github",
    type: "oauth",
    providerAccountId: "137010021",
    access_token: "ghu_Kr8DOMqmA6fLOfHhgapL3XYN0eGd0o0o5JF9",
    expires_at: 1697095435,
    refresh_token: "ghr_5p2mCKqphsppDyS1mTJ8t6GG0Wfrqgn3JWv8bxazLx7BGYtMd01usSUEppmx9Rm2JsLkMo4OqSk5",
    refresh_token_expires_in: 15811200,
    ~~~~~~~~~~~~~~~~~~~~~~~~
    token_type: "bearer",
    scope: "",
    userId: "clnmdnrnp0006osspeti008da",
?   id?: String,
?   id_token?: String | Null,
?   session_state?: String | Null
  }
}

Unknown argument `refresh_token_expires_in`. Available options are marked with ?.
    at En (/Users/nanakwasi/Development/Project/Next/next-app/node_modules/@prisma/client/runtime/library.js:116:5888)
    at Cn.handleRequestError (/Users/nanakwasi/Development/Project/Next/next-app/node_modules/@prisma/client/runtime/library.js:123:6516)
    at Cn.handleAndLogRequestError (/Users/nanakwasi/Development/Project/Next/next-app/node_modules/@prisma/client/runtime/library.js:123:6206)
    at Cn.request (/Users/nanakwasi/Development/Project/Next/next-app/node_modules/@prisma/client/runtime/library.js:123:5926)
    at async l (/Users/nanakwasi/Development/Project/Next/next-app/node_modules/@prisma/client/runtime/library.js:128:9968) {
  name: 'LinkAccountError',
  code: undefined
}
4

Another member in this forum mentioned before that try to delete any account in you mySQL database, I tried this approach and is work, I have github and google account using the same email address that may cause the issue. Please let me know after you try it. Thanks.

5

Had similar issue,
update @next-auth/prisma-adapter dependency to the latest version

6

Also noticed your import of prisma adapter, change it to
import { PrismaAdapter } from “@next-auth/prisma-adapter”;

7

I found the solution to this problem. You must add this line in the Account model offered by NextAuth:
refresh_token_expires_in Int?

Redo an npx prisma generate and npx prisma db push and presto it works

1 Like
8

use type keyword when importin NextAuthOptions
This worked for me.

import { type NextAuthOptions } from "next-auth";