Refresh token rotation (Credentials provider, custom API)

[MrBond2104]

I am using the Credentials Provider with my own API to authenticate on Next 13. Unfortunately, I'm encountering several issues with my Next Auth authentication…
 

1. The access token returned by my API has a validity of 15 minutes. The refresh token rotation that I implemented from the docs works basically, but unfortunately only after manually reloading the page. If the user enters the site, the session callback runs once and I can log the session. But if the user stays on this site, the access token gets invalid after 15 minutes. So for example a submit button with a protected route can’t run. To trigger the refresh token rotation I have to manually refresh the site? Then the rotation runs…
2. My refresh token and the session stored in the API is valid for 7 days. So I tried to set a maxAge of the session in NextAuth to 7 days as well. Unfortunately in vain, because strangely enough, when I log the session callback, the expires time is shifted by 2 minutes with each refresh... Is it wanted like that?
3. As you can see, I've now tried to integrate the sequelize adapter to check for new users. Unfortunately, also without success. The tables are created, the sign-in is successful, but then nearly nothing happens.... only a SELECT is executed. The tables remain empty and I remain on the login page without a session in the cookies.
    
   Oddly enough, I've had the problem several times... For example after the sign-in, I always pushed the user to the next page with the nextjs router. Was possible because the session was updated in the browser immediately after signing in. But that didn't work anymore: After signing in, the user was logged in, but I had to manually reload the page so that the session was really active... I don’t know what I am doing wrong…

[...nextauth.js]

import SequelizeAdapter from "@next-auth/sequelize-adapter";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { Sequelize } from "sequelize";

// const sequelize = new Sequelize(process.env.DB_DATABASE, process.env.DB_USERNAME, process.env.DB_PASSWORD, {
//   host: process.env.DB_HOST,
//   dialect: "mariadb",
//   // logging: false,
//   timezone: "+01:00",
// });

async function refreshAccessToken(token) {
  console.log("Refreshing access token");
  try {
    const url = "https://api.playin.gg/auth/refresh";

    const response = await fetch(url, {
      headers: {
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({
        refreshToken: token.refreshToken,
      }),
    });

    const refreshedTokens = await response.json();

    if (!response.ok) {
      throw refreshedTokens;
    }

    console.log("Refreshed access token");
    console.log(refreshedTokens);

    return {
      ...token,
      accessToken: refreshedTokens.data.access_token,
      accessTokenExpires: Date.now() + refreshedTokens.data.expires,
      refreshToken: refreshedTokens.data.refresh_token ?? token.refreshToken, // Fall back to old refresh token
    };
  } catch (error) {
    console.log(error);

    return {
      ...token,
      error: "RefreshAccessTokenError",
    };
  }
}

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "email", placeholder: "Enter your email" },
        password: { label: "Password", type: "password", placeholder: "Enter your password" },
      },
      async authorize(credentials) {
        const payload = {
          email: credentials.email,
          password: credentials.password,
        };

        const res = await fetch("https://api.playin.gg/auth/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });

        const user = await res.json();

        if (!res.ok) {
          throw new Error("Wrong username or password!");
        }

        if (res.ok && user) {
          return user;
        }

        return null;
      },
    }),
  ],
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  callbacks: {
    jwt: async ({ token, user, account }) => {
      if (account && user) {
        return {
          ...token,
          accessToken: user.data.access_token,
          refreshToken: user.data.refresh_token,
          accessTokenExpires: Date.now() + user.data.expires,
        };
      }

      if (Date.now() < token.accessTokenExpires) {
        return token;
      }

      console.log("Access token has expired, trying to refresh it");
      // Access token has expired, try to update it
      return refreshAccessToken(token);
    },
    session: async ({ session, token }) => {
      session.accessToken = token.accessToken;
      session.refreshToken = token.refreshToken;
      session.accessTokenExpires = token.accessTokenExpires;

      const fetchUser = await fetch("https://api.playin.gg/users/me", {
        method: "GET",
        headers: {
          Authorization: `Bearer ${token.accessToken}`,
          "Content-Type": "application/json",
        },
      });
      const fetchedUser = await fetchUser.json();

      session.user.id = fetchedUser.id;
      session.user.username = fetchedUser.username;
      session.user.email = fetchedUser.email;
      session.user.avatar = fetchedUser.avatar ?? "1dbb04c5-5771-469b-9014-39c9efd79f7c";
      session.user.banner = fetchedUser.banner ?? "2c30d6de-4257-456b-9064-45fd1169cd9a";

      delete session.user.name;
      delete session.user.image;

      return session;
    },
  },
  pages: {
    newUser: "/auth/welcome",
    signIn: "/auth/login",
  },
  events: {
    signOut: async (message) => {
      const { refreshToken } = message.token;
      const url = "https://api.playin.gg/auth/logout";

      try {
        await fetch(url, {
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
          body: JSON.stringify({
            refreshToken,
          }),
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
  // adapter: SequelizeAdapter(sequelize),
  logger: {
    error(code, metadata) {
      log.error(code, metadata);
    },
    warn(code) {
      log.warn(code);
    },
    debug(code, metadata) {
      log.debug(code, metadata);
    },
  },
};

export default NextAuth(authOptions);

_app.jsx

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

Can someone please help me with this? Unfortunately I can't get any further...

[ducbinhbld]

Have you solved this problem yet? I am also facing the same problem.

[denvradiy]

Hey guys!

Did you solve this ?

[fitimbytyqi]

Any updates on this discussion ?

I feel like there should be a better documentation for app router & custom backend in next auth's documentation that shows best practices on handling Refresh Token.

I can confirm that the first point amongst others is legit.

[beysemi]

Hey!

Did you solve this problem ?

[sdbzdg]

Solved by providing a refetchInterval for the <SessionProvider/> inside _app.ts:

// 24 * 60 * 60 since my access token expires in 1 day
<SessionProvider session={pageProps.session} refetchInterval={24 * 60 * 60}>
  <Layout>
    <Component {...pageProps} />
  </Layout>
</SessionProvider>