Next.js Discord

Discord Forum

Getting AuthJS (Next Auth V5) to work with my spring backend

Unanswered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
So I have setup my spring backend as the single and central source of AuthN and AuthZ and I'm trying to get AuthJS on my nextjs frontend to work with my spring backend. Here is my auth.js file

import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        email: {},
        password: {},
      },

      authorize: async (credentials) => {
        const res = await fetch("http://localhost:8091/api/auth/login", {
          headers: { "Content-Type": "application/json" },
          method: "POST",
          body: JSON.stringify(credentials),
        });
        const user = await res.json();

        if (user.ok) {
          return user.user;
        }
        return null;
      },
    }),
  ],

  callbacks: {
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
        token.email = user.email;
        token.name = user.name;
      }

      return token;
    },

    async session(session, token) {
      session.user.id = token.id;
      session.user.email = token.email;
      session.user.name = token.name;

      return session;
    },
  },

  session: {
    strategy: "jwt",
  },

  secret: process.env.AUTH_SECRET,
});


And here is the response sent back by the login endpoint from the backend

{
    "sessionId": "4b3f3a06-7af2-4f01-bf71-e1ea0b095368",
    "ok": true,
    "user": {
        "name": "test@test.com",
        "email": "test@test.com"
    }
}

3 Replies

Siamese CrocodileOP
I have a test signin page like so

import React from "react";
import { auth, signIn } from "./auth";

const page = async () => {
  const session = await auth();
  console.log(session);
  return (
    <form
      action={async () => {
        "use server";
        await signIn("credentials", {
          email: "test@test.com",
          password: "password",
        });
      }}
    >
      <button>Sign In</button>
    </form>
  );
};

export default page;
and when I hit sign in, I can properly see the response sent back by the backend and stored in my session and token objects. but, when I try to access them using auth(), I get this error:

[auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror
[auth][cause]: TypeError: Cannot read properties of undefined (reading 'id')
    at Object.session (webpack-internal:///(rsc)/./app/auth.js:45:37)
    at Object.session (webpack-internal:///(rsc)/./node_modules/next-auth/lib/index.js:31:51)
    at Module.session (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/session.js:41:52)
    at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:47:24)
    at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:126:34)
    at async page (webpack-internal:///(rsc)/./app/page.jsx:20:21)
[auth][details]: {}
any help, please?
Siamese CrocodileOP
Guys any help please?