Next.js Discord

Discord Forum

NextAuth - Token after login is not complete

Answered
Baguette posted this in #help-forum
Open in Discord
BaguetteOP
Hi everyone, before briefing my error and solutions I tested, here is some information:

My stack:
- NextAuth
- TypeScript
- Prisma
- App Router

I already looked for a tutorial (https://www.youtube.com/@ethan_mick this guy is awesome) and asked to chatgpt.

My issue:
When I login, everything seems to be working correctly (it checks if credentials are ok), but when I go to "/dashboard" and render the token information (in SSR) I only get this:

{"user":{"email":"test@test.com"}}

While I said to render the following object:

{
id: user.id,
email: user.email,
username: user.username
}

I will send the NextAuth config code bellow but I aware you that you will find TypeScript errors in the session callback since I didn't want to waste my time typing that without being convinced it would work. So I will type that when I find a fix to this issue :/
Answered by Baguette
I used the authOptions in the dashboard but the authOptions was a NextAuth object instead of a real NextAuthOptions object
View full answer

42 Replies

BaguetteOP
Yes, I do use zod but I also commented everything just in case and I will uncomment it when everything's fixed
and here's my User model in Prisma:

model User {
    id            String       @id @default(cuid())
    username      String       @unique @db.VarChar(20)
    email         String       @unique @db.VarChar(255)
    password      String?      @db.VarChar(72)
    emailVerified DateTime?
    accounts      Account[]
    sessions      Session[]
    gdpr          DateTime
    createdAt     DateTime     @default(now())
    updatedAt     DateTime     @updatedAt
    isActive      Boolean      @default(true)
}
Egyptian Mau
Can you share the rendering dashboard code?

When I login, everything seems to be working correctly (it checks if credentials are ok), but when I go to "/dashboard" and render the token information (in SSR) I only get this:
and authOptions please
BaguetteOP
import { getServerSession } from 'next-auth'
import React from 'react'
import { authOptions } from '../api/auth/[...nextauth]/route';

const UserDashboard = async () => {
    const user = await getServerSession(authOptions);
  return (
    <div>
        {
            JSON.stringify(user)
        }
    </div>
  )
}

export default UserDashboard
@Egyptian Mau and authOptions please
BaguetteOP
authOptions is in the route.ts file
Egyptian Mau
Sorry, didnt see it, you have NEXTAUTH_SECRET set?
in your env?
BaguetteOP
yup
@Egyptian Mau Sorry, didnt see it, you have NEXTAUTH_SECRET set?
BaguetteOP
Egyptian Mau
I am a noob myself, but I think you are missing the jwt callback.
async jwt({ token, user }) {
if (user) {
token.user = user;
}
return token;
},
above your session callback
@Egyptian Mau I am a noob myself, but I think you are missing the jwt callback.
BaguetteOP
I also tried with the jwt callback but same problem. And I did a testing project with Mosh Hamedani NextJS course, I took a look at the code I had in the past and there were no callbacks 🤔
Egyptian Mau
 
async jwt({ token, user }) {
      if (user) {
        token.user = user;
      }
      return token;
    },
    async session({ token, session }) {
      session.user = token.user;
      return session;
    },
this is how I have it
can you copy paste it and relog?
If that doesnt work I fear you have to wait for someone more skilled than me 😄
BaguetteOP
still not working
😭
Egyptian Mau
Sorry then 😢
BaguetteOP
don't worry, you still tried 😅
I'll read some of my old code and see what's happening
Egyptian Mau
I am a bit confused by your authOptions
shouldn't authOptions just be the config itself and then you declare the handler and export that? Maybe that is your issue?
because if you import your authOptions to consume it in the dashboard you call NextAuth(NextAuth()) no?
That doesnt seem right.
Talking about this:

    const user = await getServerSession(authOptions);
How I think it should be:

export const authOptions: AuthOptions = {YOUR CONFIG HERE}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };
BaguetteOP
okay I think I know where's the issue
let me try something
fixed
@Egyptian Mau THANKS A LOT
I'm just really dumb
Egyptian Mau
was that it?
BaguetteOP
I used the authOptions in the dashboard but the authOptions was a NextAuth object instead of a real NextAuthOptions object
Answer
BaguetteOP
thanks for your help ❤️
Egyptian Mau
Ah okay so what I said 😄
No problem glad I can help
feel free to set Answered status on the question.
Right click, apps , mark solution I think