Next.js Discord

Discord Forum

NextAuth.js error

Answered
SharpieMaster posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by SharpieMaster
new
View full answer

24 Replies

SharpieMaster
I am getting 2 different errors
[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] 
https://next-auth.js.org/errors#oauth_callback_handler_error getUserByAccount is not a function {
  message: 'getUserByAccount is not a function',
  stack: 'TypeError: getUserByAccount is not a function\n' +
    '    at Object.callback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/callback.js:42:49)\n' +       
    '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
    '    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:202:38)\n' +
    '    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)\n' +      
    '    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:84:24)\n' +
    '    at async eval (webpack-internal:///(rsc)/./node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:254:37)',       
  name: 'TypeError'
}
when I try to sign in
and
[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(rsc)/./node_modules/.pnpm/jose@4.14.6/node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:18:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(rsc)/./node_modules/.pnpm/jose@4.14.6/node_modules/jose/dist/node/cjs/jwt/decrypt.js:10:61)\n' +
    '    at Object.decode (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/jwt/index.js:44:52)\n' +
    '    at async Object.session (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/session.js:25:34)\n' +   
    '    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:125:21)\n' +
    '    at async RootLayout (webpack-internal:///(rsc)/./src/app/layout.tsx:24:21)',
  name: 'JWEInvalid'
}

Whenever I load a page
If you need any information please ask
SharpieMaster
Please
@SharpieMaster I am getting 2 different errors
Satin Angora
can you please give me some details or code snippet where you have define or use your "getUserByAccount" function.
Sun bear
You need to provide a much more detailed explanation for your code man
@Satin Angora can you please give me some details or code snippet where you have define or use your "getUserByAccount" function.
SharpieMaster
I do not ever define or use getUserByAccount, I am using Next Auth js with the prisma adapter
schema.prisma is just the standard nextauth things like user account session and a token or something
I am using github provider and I do have all the env variables needed
I do not currently have all of my files since I forgot to commit them on my pc, but I will able to provide the specific files in 10h
@Sun bear You need to provide a much more detailed explanation for your code man
SharpieMaster
Yes, thats why I said to ask because I dont know which files are useful
schema.prisma:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider = "sqlite"
    url      = env("DATABASE_URL")
}

model Account {
    id                 String    @id @default(cuid())
    userId             String
    providerType       String
    providerId         String
    providerAccountId  String
    refreshToken       String?
    accessToken        String?
    accessTokenExpires DateTime?
    createdAt          DateTime  @default(now())
    updatedAt          DateTime  @updatedAt
    user               User      @relation(fields: [userId], references: [id])

    @@unique([providerId, providerAccountId])
}

model Session {
    id           String   @id @default(cuid())
    userId       String
    expires      DateTime
    sessionToken String   @unique
    accessToken  String   @unique
    createdAt    DateTime @default(now())
    updatedAt    DateTime @updatedAt
    user         User     @relation(fields: [userId], references: [id])
}

model User {
    id            String    @id @default(cuid())
    name          String?
    email         String?   @unique
    emailVerified DateTime?
    image         String?
    createdAt     DateTime  @default(now())
    updatedAt     DateTime  @updatedAt
    accounts      Account[]
    sessions      Session[]
}

model VerificationRequest {
    id         String   @id @default(cuid())
    identifier String
    token      String   @unique
    expires    DateTime
    createdAt  DateTime @default(now())
    updatedAt  DateTime @updatedAt

    @@unique([identifier, token])
}
src/app/api/auth/[...nextauth]/route.ts:

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "@/server/db/client";

const adapter = NextAuth({
    adapter: PrismaAdapter(prisma),
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID ?? "",
            clientSecret: process.env.GITHUB_SECRET ?? "",
        }),
    ],
});

export { adapter as GET, adapter as POST };
src/server/db/client.ts:

import { PrismaClient } from "@prisma/client";

declare global {
    var prisma: PrismaClient | undefined;
}

export const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") global.prisma = prisma;
layout.tsx:

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import SessionProvider from "./components/SessionProvider";
import { getServerSession } from "next-auth";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default async function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const session = await getServerSession();

    return (
        <html lang="en">
            <head>
                <link
                    rel="/vercel.svg"
                    href="favicon.ico"
                    type="image/x-icon"
                />
            </head>
            <body className={`${inter.className} min-h-screen`}>
                <SessionProvider session={session}>{children}</SessionProvider>
            </body>
        </html>
    );
}
SessionProvider.ts:

"use client";
import { SessionProvider } from "next-auth/react";
export default SessionProvider;
    "dependencies": {
        "@next-auth/prisma-adapter": "^1.0.7",
        "@prisma/client": "5.3.1",
        "@types/node": "20.6.2",
        "@types/react": "18.2.21",
        "@types/react-dom": "18.2.7",
        "autoprefixer": "10.4.15",
        "eslint": "8.49.0",
        "eslint-config-next": "13.4.19",
        "next": "13.5.2",
        "postcss": "8.4.29",
        "prettier": "^3.0.3",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "tailwindcss": "3.3.3",
        "typescript": "5.2.2",
        "next-auth": "^4.23.1"
    },
    "devDependencies": {
        "prisma": "^5.3.1"
    }
SharpieMaster
I fixed the next auth error, but I still get the json web token error 
[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(rsc)/./node_modules/.pnpm/jose@4.14.6/node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:18:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(rsc)/./node_modules/.pnpm/jose@4.14.6/node_modules/jose/dist/node/cjs/jwt/decrypt.js:10:61)\n' +
    '    at Object.decode (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/jwt/index.js:44:52)\n' +
    '    at async Object.session (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:125:21)\n' +
    '    at async RootLayout (webpack-internal:///(rsc)/./src/app/layout.tsx:24:21)',
  name: 'JWEInvalid'
SharpieMaster
new
Answer