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.
