How to use accessToken received from backend

[TheZoker]

Hi there,

I'm using nestjs with mikro-orm on my backend.
In the frontend I use next-auth version 5.0.0-beta.19 with next version 14.2.5

This is the code, that returns the access_token in the backend, once the user and password are correctly send:

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { compare } from 'bcrypt';

import { UserService } from '../user/user.service.js';
import { User } from '../user/user.entity.js';

@Injectable()
export class AuthService {
  constructor(
    private readonly usersService: UserService,
    private readonly jwtService: JwtService,
  ) {}

  async validateUser(email: string, pass: string): Promise<User | null> {
    const user = await this.usersService.findByEmail(email);
    const passwordCorrect = await compare(pass, user.password);
    if (user && passwordCorrect) {
      return user;
    }
    return null;
  }

  async login(user: User) {
    const payload = { email: user.email, sub: user.id };
    const options = { secret: process.env.SECRET_TOKEN };
    return {
      access_token: this.jwtService.sign(payload, options),
    };
  }
}

In the frontend I have this code for the auth.ts file:

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { CredentialsSignin } from "@auth/core/errors";
import { API_BASE_URL } from "src/misc/constants";

class CustomError extends CredentialsSignin {
  code = "custom"
}

export const { handlers, signIn, signOut, auth } = NextAuth({
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    CredentialsProvider({
      id: "login",
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'Login',
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      type: 'credentials',
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // You need to provide your own logic here that takes the credentials
        // submitted and returns either a object representing a user or value
        // that is false/null if the credentials are invalid.
        // e.g. return { id: 1, name: 'J Smith', email: 'jsmith@example.com' }
        // You can also use the `req` object to obtain additional parameters
        // (i.e., the request IP address)
        const res = await fetch(`${API_BASE_URL}/auth/login`, {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        });

        const response = await res.json();

        if (res.ok && response.access_token) {
          return response.access_token;
        }
        throw new CustomError(response.message);
      },
    })
  ],
  session: { strategy: "jwt" },
  pages: {
    signIn: '/login'
  }
});

Now my question is, how do I set the accessToken correctly, so it gets used for all the future api calls as bearer token?
And how can I tell nextAuth that the user is correctly signed in with the accessToken?

For example when I request all users from my backend, I use this axios command:

const response = await axios.get(`${API_BASE_URL}/users`);

But for it to be successful, the accessToken must be included in the call.

Another issue I have is, that when the credentials are not correct, I always get a

[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: Error: Invalid credentials
    at Object.authorize (webpack-internal:///(rsc)/./src/auth.ts:63:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

error. I'm not sure how to get rid of this error. It is an error, that should be displayed in the frontend, but not cause a auth error in the logs.

Would really appriciate some help on this! Thanks