Question 73332 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Next-Auth: how to return the response from the server to the client – Reactjs

I am working on a mini project with Next-Auth (with credentials), I have the following scenario:

const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      id: 'credentials',
      name: 'credentials',
      credentials: {},
      async authorize(credentials) {
        const { email, password } = credentials as { email: string; password: string }
        const uuid = uuidv4()
        const res = await fetch("https://myapi.blabla/api/v9/accounts/sign-in/", {
          headers: {
            Authorization: `uuid ${uuid}`,
            "Client-Id": "vrfyrvKmSIRs8s1BZuHcmHNaZuTR2nIF0ZgFt39",
            "Content-Type": "application/json"
          },
          method: "POST",
          body: JSON.stringify({
            email,
            password
          })
        })

        const user = await res.json()

        if (!res.ok) {
          throw new Error(user.message)
        }

        // If no error and we have user data, return it
        if (res.ok && user) {
          return user
        }

        // Return null if user data could not be retrieved
        return null
      }
    })
  ],
  pages: {
    signIn: '/login'
  },
  callbacks: {
    jwt: async ({ token }) => {
      return token
    },
    session({ session, user }) {
      return { ...session, ...user }
    },
  }
}

If I console.log const user = await res.json() the response is:

{
   "advertising_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   "api_key": "xxxxxxxxxxxxxxxxxxxxx",
   "username": "xxxxxxx",
   "session": "xxxxxxxxxxxxxxxxxxxxx"
}

The problem is, when I use const session = useSession() in the front, I only get:

{
  session: {
    user: {
      name: undefined,
      email: '[email protected]',
      image: undefined,
    },
    expires: '2023-04-09T14:53:56.395Z'
  }
}

And I need the response should be something like:

{
  session: {
    user: {
      name: undefined,
      email: '[email protected]',
      image: undefined,
      session: 'xxxxxxx-xxxxxxxxxxxx',
      advertising_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      etc...
    },
    expires: '2023-04-09T14:53:56.395Z'
  }
}

Am I doing something wrong? Am I missing something? Or do I need a different mechanism to be able to send the session information to the client?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you very much, that works perfect! My previous approach also worked for me:

        async jwt({ token, user }) {
      if (user?.session) {
        token.session = user.session
      }

      if (user?.username) {
        token.username = user.username
      }
      
      return token
    },
    session: async ({ session, token }) => {
      session.user.session = token.session
      session.user.username = token.username

      return session
    }

  2. 0

    I see a few missing things:

    • When creating CredentialsProvider you should have passed

      session: {
   strategy: "jwt",
},

secret: process.env.JWT_SECRET,

    • If inside authorize, you are returning user, that user will be passed to jwt callback

      jwt: async ({ token, user }) => {
  user && (token.user = user);
  return Promise.resolve(token);
},

    • then this token will be passed to the session callback

      session: async ({ session, token }) => {  
    session.user = token.user;
    return Promise.resolve(session);
},

    You can see an example setup

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search