Welcome to React + TypeScript Discussions!

[swyxio]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[Fenlot]

I've been working on this project using Go and React and I keep on getting infinite reload in the browser anytime I run the code . I've tried everything possible even with A.I but I keep on getting the same result.

middleware.ts

import { NextRequest, NextResponse } from 'next/server';

// Real JWT expiry check — no library needed
function isTokenExpired(token: string): boolean {
try {
const payload = JSON.parse(atob(token.split('.')[1]));
if (!payload.exp) return false;
// Add 10s buffer to avoid edge cases
return Date.now() >= (payload.exp * 1000) - 10_000;
} catch {
return true; // malformed token = treat as expired
}
}

async function verifyJWT(token: string): Promise {
if (!token) return false;
if (isTokenExpired(token)) return false;
return true;
}

const PUBLIC_PATHS = ['/', '/pricing', '/forgot-password'];
const AUTH_PATHS = ['/login', '/register', '/forgot-password', '/reset-password'];

export async function middleware(req: NextRequest) {
const { pathname } = req.nextUrl;

// 3: Skip middleware for auth API, static files, and all api routes
if (
pathname.startsWith('/api/') ||
pathname.startsWith('/_next/') ||
pathname === '/favicon.ico'
) {
return NextResponse.next();
}

const accessToken = req.cookies.get('access_token')?.value;
const refreshToken = req.cookies.get('refresh_token')?.value;

// 1: Actually check token expiry, not just existence
const isAuthenticated = accessToken
? await verifyJWT(accessToken).catch(() => false)
: false;

// 2: Use .startsWith() so /login?callbackUrl=... still matches
const isAuthPage = AUTH_PATHS.some(p => pathname.startsWith(p));
const isPublicPage = PUBLIC_PATHS.some(p => pathname === p);

// Authenticated user hitting login/register → send to dashboard
if (isAuthenticated && isAuthPage) {
return NextResponse.redirect(new URL('/dashboard', req.url));
}

// Unauthenticated user hitting protected route
if (!isAuthenticated && !isPublicPage && !isAuthPage) {
// If refresh token exists, let client-side handle refresh
// Don't redirect immediately — only redirect if no refresh token either
if (!refreshToken) {
const loginUrl = new URL('/login', req.url);
loginUrl.searchParams.set('callbackUrl', pathname);
return NextResponse.redirect(loginUrl);
}
// Has refresh token → allow through, let client refresh silently
return NextResponse.next();
}

// Inject org slug header for server components
const orgSlugMatch = pathname.match(/^/org/([^\/]+)/);
if (orgSlugMatch) {
const res = NextResponse.next();
res.headers.set('x-org-slug', orgSlugMatch[1]);
return res;
}

return NextResponse.next();
}

export const config = {
// Cleaner matcher — excludes all _next and api routes at pattern level
matcher: [
'/((?!_next/static|_next/image|favicon.ico|api/).*)',
],
};

##token-refresh-quue.ts

// Prevents multiple simultaneous refresh calls (race condition protection)
class TokenRefreshQueue {
private refreshing: Promise | null = null;

async refresh(): Promise {
if (this.refreshing) return this.refreshing;

// Best-effort guard: if the browser-visible cookie store doesn't contain
// a refresh token, avoid calling the refresh endpoint (it would fail).
// Note: HttpOnly refresh cookies are not visible to JS, so this is only
// a heuristic to reduce unnecessary requests.
const cookies = typeof document !== 'undefined' ? document.cookie : '';
if (cookies && !cookies.includes('refresh_token')) {
  // No visible refresh token; fail fast.
  throw new Error('no_refresh_token');
}

this.refreshing = fetch('/api/auth/refresh', {
  method: 'POST',
  credentials: 'include',
}).then(async (res) => {
  if (!res.ok) {
    const text = await res.text().catch(() => '');
    const err = new Error('Refresh failed: ' + res.status + ' ' + text);
    throw err;
  }
}).finally(() => {
  this.refreshing = null;
});

return this.refreshing;

}
}

export const tokenRefreshQueue = new TokenRefreshQueue();