Next.js Discord

Discord Forum

next auth callback function not working

Unanswered
Goldstripe sardinella posted this in #help-forum
Open in Discord
Goldstripe sardinellaOP
so i setup a user login page that properly stores the login info in the database as well as the property of profienceyScore. For some reason, the session isnt including the data of the proficencylevel.

119 Replies

aardani
How did you test it out
Goldstripe sardinellaOP
i just signed in
@aardani
like normally
and then checked in the inspect element network settings
import NextAuth from "next-auth";
import { Account, User as AuthUser } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import User from "@/models/User";
import connect from "@/utils/db";
import { Session } from "next-auth";




export const authOptions: any = {
  providers: [
    CredentialsProvider({
      id: "credentials",
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any) {
        await connect();
        try {
          const user = await User.findOne({ email: credentials.email });
          if (user) {
            const isPasswordCorrect = await bcrypt.compare(
              credentials.password,
              user.password
            );
            if (isPasswordCorrect) {
              return user;
            }
          }
        } catch (err: any) {
          throw new Error(err);
        }
      },
    }),
  ],
  callbacks: {
    async signIn({ user, account }: { user: AuthUser; account: Account }) {
      const existingUser = await User.findOne({ email: user.email });
      console.log(existingUser.proficiencyScore);
      console.log('hey');

      return existingUser.proficiencyScore;
    },
  },
};

export const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
thats the whole code
aardani
did you try console logging getServerSession()
Goldstripe sardinellaOP
no
lemme try that
aardani
...
Goldstripe sardinellaOP
where should I write that?
aardani
in server component
or Route API
or Server Action (?)
Goldstripe sardinellaOP
in the callback?
aardani
export function Page(){
  const session = getServerSession()
  console.log(session)

}
Goldstripe sardinellaOP
Nothings coming up in console
but its letting me sign in properly
import NextAuth from "next-auth";
import { Account, User as AuthUser } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import User from "@/models/User";
import connect from "@/utils/db";
import { Session } from "next-auth";
import { getServerSession } from "next-auth";



export const authOptions: any = {
  providers: [
    CredentialsProvider({
      id: "credentials",
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any) {
        await connect();
        try {
          const user = await User.findOne({ email: credentials.email });
          if (user) {
            const isPasswordCorrect = await bcrypt.compare(
              credentials.password,
              user.password
            );
            if (isPasswordCorrect) {
              return user;
            }
          }
        } catch (err: any) {
          throw new Error(err);
        }
      },
    }),
  ],
  callbacks: {
    async signIn({ user, account }: { user: AuthUser; account: Account }) {
      const existingUser = await User.findOne({ email: user.email });
      console.log(existingUser.proficiencyScore);
      return existingUser.proficiencyScore;
    },
  },
};

export function Page(){
  const session = getServerSession()
  console.log(session)

}


export const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
did i do it right?
aardani
no you did not
you need to put it in a page.tsx
Goldstripe sardinellaOP
thats in my auth route
and access the route
Goldstripe sardinellaOP
yeah nothing
import { getServerSession } from "next-auth";
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Home Page</h1>

    </main>
    
  );
}
export function Page(){
  const session = getServerSession();
  console.log(session)

}
thats my page.tsx file
aardani
...
export default function Home() {
  const session = getServerSession();
  console.log(session)
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Home Page</h1>
    </main>
  );
}
put it like that
Goldstripe sardinellaOP
Yeah nothing is being logged
aardani
my bad, it should be getServerSession(authOption)
Goldstripe sardinellaOP
where do I get (authOption)?
Goldstripe sardinellaOP
wait
this is my homepage
like before you login
once you login it redirects you back to the homepage
aardani
I know
Goldstripe sardinellaOP
aardani
im just checking if you had set up your session correctly. you can remove that later
Goldstripe sardinellaOP
cuz the email address i signed in with comes up
Goldstripe sardinellaOP
i signed up myself
thats not a valid email lol
im not that og haha
aardani
how did you get the email data
Goldstripe sardinellaOP
oh
aardani
i didnt ask that
Goldstripe sardinellaOP
from when the user logged in
aardani
how
Goldstripe sardinellaOP
in my navbar component
"use client";
import React from "react";
import Link from "next/link";
import { signOut, useSession } from "next-auth/react";
import { Session } from 'next-auth'


const Navbar = () => {
  const { data: session } = useSession();

  return (
    <div>
      <ul className="flex justify-between m-10 item-center">
        <div>
          <Link href="/">
            <li>Home</li>
          </Link>
        </div>
        <div className="flex gap-10">
          <Link href="/dashboard">
           <li>Dashboard</li>
          </Link>
          {!session ? (
            <>
              <Link href="/login">
                <li>Login</li>
              </Link>
              <Link href="/register">
                <li>Register</li>
              </Link>
            </>
          ) : (
            <>
              <span>{session.user?.email} (Score: {session.user?.proficiencyScore?.toFixed(2)})</span>
              <li>
                <button
                  onClick={() => signOut()}
                  className="p-2 px-5 -mt-1 bg-blue-800 rounded-full"
                >
                  Logout
                </button>
              </li>
            </>
          )}
        </div>
      </ul>
    </div>
  );
};

export default Navbar;
Goldstripe sardinellaOP
it autofilled this import
import { authOptions } from "./api/auth/[...nextauth]/route";
aardani
yeah since you had it there right
why is it not defined
Goldstripe sardinellaOP
im not sure
aardani
try restarting the server
Goldstripe sardinellaOP
i tried
im pretty sure its a problem with my route
because in network im getting session data
its just only the email
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import User from "@/models/User";
import connect from "@/utils/db";

export const authOptions: any = {
  // Configure one or more authentication providers
  providers: [
    CredentialsProvider({
      id: "credentials",
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any) {
        await connect();
        try {
          const user = await User.findOne({ email: credentials.email });
          if (user) {
            const isPasswordCorrect = await bcrypt.compare(
              credentials.password,
              user.password
            );
            if (isPasswordCorrect) {
              return user;
            }
          }
        } catch (err: any) {
          throw new Error(err);
        }
      },
    }),
  ],
  callbacks: {

  },
};

export const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
aardani
authOptions, not authOption
Goldstripe sardinellaOP
no way
thats it
aardani
you can also check whether or not its there by console.log(session) from your useSession()
but usually check server first before the client
because sometimes they omit data in the client
thats why i told you to check getServerSession
Goldstripe sardinellaOP
ok im getting something consoled logged now
when i do console.log session
aardani
does this ever get through? can you console.log() below if(user)?
Goldstripe sardinellaOP
Nah it doesnt
do I need the interface for user?
i already declared in the schema
aardani
typescript should affect anything, focus on the bug right now
@Goldstripe sardinella Nah it doesnt
aardani
so it basically something wrong with your user not getting data then
not session callback setting properties
Goldstripe sardinellaOP
hm
yeah i tink thats it
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import User from "@/models/User";
import connect from "@/utils/db";
import { Session } from "next-auth";

interface IUser {
  email: string;
  password: string;
  proficiencyScore: number;
  // Add any other properties that your User schema includes
}

declare module "next-auth" {
  interface Session {
    user: {
      email: string;
      proficiencyScore: number;
    }
  }
}

export const authOptions: any = {
  // Configure one or more authentication providers
  providers: [
    CredentialsProvider({
      id: "credentials",
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any) {
        await connect();
        try {
          const user = await User.findOne({ email: credentials.email });
          if (user) {
            const isPasswordCorrect = await bcrypt.compare(
              credentials.password,
              user.password
            );
            if (isPasswordCorrect) {
              return user;
            }
          }
        } catch (err: any) {
          throw new Error(err);
        }
      },
    }),
  ],
  callbacks: {
    
    async session({ session, user }: { session: Session, user: IUser }) {
      session.user.proficiencyScore = user.proficiencyScore;
      return session;
    },

  },
};

export const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
i messed with the function a bit
thats my error
its not undefined though in the database it intiailizes all values to 0.5
Goldstripe sardinellaOP
@aardani
aardani
I can't help sorry, its already beyond my scope
I have never used CredentialsProvider
I can only tell that session() is working properly
Goldstripe sardinellaOP
😦
wait thats not my problem
the credentails part is working fine
OH SORYR
i didnt give you my update
so i was debugging
This printed out the profiencyScore
now how can I get that returned
as part of the session data
aardani
like i said bro, i I have never used CredentialsProvider so idk how things work in there
Goldstripe sardinellaOP
sorry i feel really close
aardani
keep going! i believe in you!
keep debugging
Goldstripe sardinellaOP
😭
im at a hackathon rn
and this is rough
been debugging this for 3 hours
aardani
just ditch username password and use oauth :v
next-auth themselves doesnt recommend username password logging
Goldstripe sardinellaOP
what is oauth
@Goldstripe sardinella what is oauth
aardani
sso with google/github
Goldstripe sardinellaOP
tbh im considering it
can i store credentials in mongodb?