Incorporating middleware in Next.js to remove route protection

Question

Incorporating middleware in Next.js to remove route protection

Looking to remove the protection for the login page, and here is how my folder structure looks:

https://i.stack.imgur.com/klPYV.png

This is the middleware I am using:

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

export async function middleware(req, ev) {
  if (req.pathname === "login") {
    return NextResponse.next();
  }
  const token = req.cookies.token;

  if (!token) {
    return NextResponse.redirect("/login");
  }
  return NextResponse.next();
}

Querying on how to exclude login.js from the middleware.

Edit: now getting

[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies

The code for this project can be found here

javascript node.js reactjs next.js middleware

Answer 1

Answer №1

After some troubleshooting, I identified the issue - I wasn't retrieving the pathname from req.nextUrl. Here's the updated and corrected code:

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

export async function middleware(req, ev) {
  const { pathname } = req.nextUrl;
  const token = req.cookies.token;

  if (pathname == "/login" && !token) {
    return NextResponse.next();
  }

  if (!token) {
    return NextResponse.redirect("/login");
  }

  return NextResponse.next();
}

Answer 2

After some troubleshooting, I identified the issue - I wasn't retrieving the pathname from req.nextUrl. Here's the updated and corrected code:

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

export async function middleware(req, ev) {
  const { pathname } = req.nextUrl;
  const token = req.cookies.token;

  if (pathname == "/login" && !token) {
    return NextResponse.next();
  }

  if (!token) {
    return NextResponse.redirect("/login");
  }

  return NextResponse.next();
}

Answer 3

Answer №2

To ensure that the request is for the "/login" page itself, you can quickly exit the process.

Explore all the available properties on NextRequest.

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

export async function middleware(req, ev) {
  if( req.pathname === 'login'){
      return NextResponse.next();
  }
  const token = req.cookies.token;

  if (!token) {
    return NextResponse.redirect("/login");
  }
  return NextResponse.next();
}

Answer 4

To ensure that the request is for the "/login" page itself, you can quickly exit the process.

Explore all the available properties on NextRequest.

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

export async function middleware(req, ev) {
  if( req.pathname === 'login'){
      return NextResponse.next();
  }
  const token = req.cookies.token;

  if (!token) {
    return NextResponse.redirect("/login");
  }
  return NextResponse.next();
}

Answer 5

Answer №3

The solution provided in the accepted answer was incredibly helpful to me. I decided to share my modified version of the solution that worked for my specific case.

In my implementation, I utilized a file named [...nextauth].js with callbacks for jwt and session. However, I encountered an issue where I kept receiving a cycle of ERR_TOO_MANY_REQUESTS errors when using the original solution from the accepted answer. To resolve this, I made adjustments by including a few additional URLs:

import { NextResponse } from "next/server";
import { getToken } from 'next-auth/jwt';

export default async function middleware(req, ev) {
  const { pathname } = req.nextUrl;
  const token = await getToken({ req, secret: process.env.JWT_SECRET });

  if ((pathname == "/api/auth/signin" || pathname == "/favicon.ico" || pathname == "/api/auth/callback/credentials") && !token) {
    return NextResponse.next();
  }

  if (!token) {
    return NextResponse.rewrite(new URL('/api/auth/signin', req.url));
  }

  return NextResponse.next();
}

Answer 6

The solution provided in the accepted answer was incredibly helpful to me. I decided to share my modified version of the solution that worked for my specific case.

In my implementation, I utilized a file named [...nextauth].js with callbacks for jwt and session. However, I encountered an issue where I kept receiving a cycle of ERR_TOO_MANY_REQUESTS errors when using the original solution from the accepted answer. To resolve this, I made adjustments by including a few additional URLs:

import { NextResponse } from "next/server";
import { getToken } from 'next-auth/jwt';

export default async function middleware(req, ev) {
  const { pathname } = req.nextUrl;
  const token = await getToken({ req, secret: process.env.JWT_SECRET });

  if ((pathname == "/api/auth/signin" || pathname == "/favicon.ico" || pathname == "/api/auth/callback/credentials") && !token) {
    return NextResponse.next();
  }

  if (!token) {
    return NextResponse.rewrite(new URL('/api/auth/signin', req.url));
  }

  return NextResponse.next();
}

Incorporating middleware in Next.js to remove route protection

Answer №1

Answer №2

Answer №3

Similar questions

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

Show the components only if the final digit in their identification number is less than i

How should I proceed if both fields are encrypted by Mongoose Encryption?

New replacement for routerState.parent feature that has been deprecated in angular2

"Need help passing an API key in the header of a Vue.js project? I recently encountered this issue while using a

You cannot make a hook call within the body of a function component, unless you are using useNavigate and useEffect in conjunction with axios interceptors

After the installation of Windows 10 and the latest version of NodeJS, Gatsby seems to be

Discovering the correct element and typing for an HTML attribute through JavaScript

Azure deployment for Angular app was unsuccessful due to npm startup failure

I am seeking to showcase an image in a window, and upon the image being clicked, execute the code in a separate window

Retrieve the content of the specified element within the webpage

The AWS Beanstalk CLI continues to deploy React and npm development builds

Stop or abort any pending API requests in Restangular

The paths specified in Node.js and Express are having difficulty finding the resource files for CSS and JavaScript

Node application running in Docker cannot establish connection with the Postgres database also running in Docker

Unable to eliminate hover underline on link

Reasons for Axios converting HTTP requests to HTTPS in ReactJS

Eliminate Dates from the Past - Jquery Datepicker

Make dark mode the default setting in your Next JS application

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied