Next JS: AuthApiError: Invalid Refresh Token: Already Used

[e-Naeim]

I'm trying to implement Supabase Auth in a Next JS project

Now I'm encounter the following error which keeps repeating when I npm run dev:

[AuthApiError: Invalid Refresh Token: Already Used]{
 __isAuthError: true,
name: 'AuthApiError',
status: 400
}

this is my middleware.ts

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { Database } from "./types";

const locales = ["en", "ar"];
const defaultLocale = "en";
const PUBLIC_FILE = /\.(.*)$/;

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient<Database>({ req, res });
  const user = await supabase.auth.getSession();

  if (
    req.nextUrl.pathname.startsWith("/_next") ||
    req.nextUrl.pathname.includes("/api/") ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return;
  }

  const pathname = req.nextUrl.pathname;

  // Manage route protection
  const isAuthenticated = user?.data?.session?.user.role === "authenticated";

  const isLoginPage =
    pathname.startsWith("/login") || pathname.startsWith("/ar/login");

  const sensitiveRoutes = ["/", "/ar"];
  const isAccessingSensitiveRoute = sensitiveRoutes.some((route) =>
    pathname.startsWith(route),
  );

  if (isLoginPage) {
    if (isAuthenticated) {
      return NextResponse.redirect(
        new URL(`${pathname.startsWith("/ar") ? "/ar" : "/en"}/`, req.url),
      );
    }

    if (
      pathname.startsWith(`/${defaultLocale}/`) ||
      pathname === `/${defaultLocale}`
    ) {
      return NextResponse.redirect(
        new URL(
          pathname.replace(
            `/${defaultLocale}`,
            pathname === `/${defaultLocale}` ? "/" : "",
          ),
          req.url,
        ),
      );
    }
  }

  if (!isAuthenticated && isAccessingSensitiveRoute && !isLoginPage) {
    return NextResponse.redirect(
      new URL(`${pathname.startsWith("/ar") ? "/ar" : ""}/login`, req.url),
    );
  }

  // Check if the default locale is in the pathname
  if (
    pathname.startsWith(`/${defaultLocale}/`) ||
    pathname === `/${defaultLocale}`
  ) {
    // e.g. incoming request is /en/products
    // The new URL is now /products
    return NextResponse.redirect(
      new URL(
        pathname.replace(
          `/${defaultLocale}`,
          pathname === `/${defaultLocale}` ? "/" : "",
        ),
        req.url,
      ),
    );
  }

  const pathnameIsMissingLocale = locales.every(
    (locale) =>
      !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`,
  );

  if (pathnameIsMissingLocale) {
    // We are on the default locale
    // Rewrite so Next.js understands

    // e.g. incoming request is /products
    // Tell Next.js it should pretend it's /en/products
    return NextResponse.rewrite(
      new URL(`/${defaultLocale}${pathname}`, req.url),
    );
  }
}

export const config = {
  matchter: [
    "/",
    "/login",
    "/((?!api|_next/static|_next/image|assets|favicon.ico).*)",
  ],
}

sometimes it's solved automatically (keeps repeating several times then stop) redirecting me to login page, and sometimes it keeps looping in this error without stopping.

[thenbe]

I was experiencing the same issue. Looks like it's a rate limit issue due to potential abuse. The error message is misleading by design. https://github.com/supabase/auth/blob/2c13a7fe82ebc917f83dc7edc3f6fdb525c805dc/internal/api/token_refresh.go#L193