How to Fix Token-Based Redirection Issues in TypeScript

If you're encountering issues with token-based redirection using cookies in your Next.js application with TypeScript, you're not alone. Many developers run into snags when implementing middleware, especially when console logs don’t appear as expected. Let's take a closer look at why this might happen and how to fix it. Understanding the Middleware Behavior Middleware in Next.js is designed to execute before a request reaches a page or API route. This gives you a chance to inspect the request, perform actions like authentication, and even redirect users based on their token status. However, there are common pitfalls that can prevent middleware from functioning as intended. In your case, if you notice that the console log does not show up in the terminal, there could be several factors at play. Common Reasons for Middleware Not Executing Matcher Configuration: The config.matcher defines which routes your middleware will act upon. If your route structure does not align with the matcher pattern, the middleware might not trigger. Server Environment: If you're running your Next.js application in a server environment (like Vercel or a different cloud provider), the logs might not appear in your terminal. Instead, check your hosting platform’s logging tools. Browser Caching: Sometimes the browser may cache responses, which prevents middleware from executing on subsequent requests. Node.js Version Compatibility: Ensure that you're using a compatible version of Node.js that supports the Next.js features you are implementing. Step-by-Step Solution to Implement Middleware Let’s walk through a revised version of your middleware.ts file to ensure it works effectively. Step 1: Modify the Middleware Code Here's a suggested update to the middleware.ts file that includes improved logging and makes use of cookies to check for user authentication. // middleware.ts import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; export function middleware(request: NextRequest) { console.log('Middleware is running'); // This should appear in the terminal const token = request.cookies.get('token'); // Retrieve the token from cookies // Check if token exists to determine if user is authenticated if (!token) { return NextResponse.redirect(new URL('/signin', request.url)); } // If token is found, log it and allow the request to proceed console.log('Token found:', token); return NextResponse.next(); // Continue to the requested route } export const config = { matcher: ['/', '/(.*)'], // Run on all routes }; Step 2: Testing Your Middleware Run your application: Use npm run dev (or the relevant command) to start your Next.js server locally. Open your Developer Console: Make sure your browser’s developer tools are open to observe the network requests. Access Different Routes: Navigate through various routes in your application to see if the console logs are appearing and if redirection happens as expected. Step 3: Check Your Cookie Settings If you're using cookies to manage your tokens, ensure you've set the cookies correctly in your application. Use the following setup to set a cookie in the response: // Example in an API route or client-side code import { NextResponse } from 'next/server'; export function setTokenCookie(response: NextResponse, token: string) { response.cookies.set('token', token, { path: '/', httpOnly: true }); return response; } Frequently Asked Questions Why is my middleware not logging to the console? If your middleware isn't logging output to the terminal, ensure that your Next.js application is running in a compatible Node.js environment and that your routes match the specified config matcher. How do I confirm that cookies are being set correctly? You can check your browser's 'Application' tab in Developer Tools to view cookies associated with your domain. Ensure the 'token' cookie is present and has the correct value. What should I do if the middleware is still not executing? If the middleware still does not execute, verify your Next.js version and check the deployment logs on your server environment. Additionally, ensure that your route paths in the matcher config are correctly specified.

// middleware.ts 
import { NextResponse } from 'next/server'; 
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
    console.log('Middleware is running'); // This should appear in the terminal

    const token = request.cookies.get('token'); // Retrieve the token from cookies

    // Check if token exists to determine if user is authenticated
    if (!token) {
        return NextResponse.redirect(new URL('/signin', request.url));
    }
    
    // If token is found, log it and allow the request to proceed
    console.log('Token found:', token);
    return NextResponse.next(); // Continue to the requested route
}

export const config = {
    matcher: ['/', '/(.*)'], // Run on all routes
};

// Example in an API route or client-side code
import { NextResponse } from 'next/server';

export function setTokenCookie(response: NextResponse, token: string) {
    response.cookies.set('token', token, { path: '/', httpOnly: true });
    return response;
}

Related Posts

Day 07/90: Adding Two Numbers Represented by Linked Lis...

Apr 29, 2025  0

AWS SageMaker

Apr 30, 2025  0

Manual Testing, its future with AI

May 1, 2025  0