How to Protect Private Routes in NextJS15 App router

In this article, I will walk you through how you can protect private routes user dashboards using HOC and JWT Token for authentication with the NextJS15 app router, and let's get in touch with the tutorial.

Creating a Next App

First of all, create a Nextjs app by issuing this command,

Creating a Wrapper

After creating the next app, create a Components folder outside the app directory. Inside the Components folder, now create withAuth.js,

This component checks whether a user is authenticated or not authenticated. If it does not have authentication, we will use a next/navigation function to redirect unauthenticated users,

Let me write a code for how you can check whether the user has a JWT Tokens authentication.

import { redirect } from 'next/navigation';
import { useEffect } from 'react'


export default function withAuth() {

  
   
    return function withAuth() {
       
        useEffect(() => {
            const token = localStorage.getItem('token');
            if (!token) {
                redirect("/");
            }
        }, []);

     
    
    };

}

In this code, we will get a Token from local storage when the user logs in, and to set the token, now we will create a login form.

Creating a login page,

Now, let's create a login folder, then create page.js inside the login folder. For URL, I'm using the Django rest framework. You can add error handling to improve this code because it's a basic login form.

We have tokenised the JSON response. After that, we will set the token onto a local storage.

'use client'
import React from 'react'
import styles from './LoginForm.module.css';
import { redirect } from 'next/navigation';
import Link from 'next/link';
import { useState } from 'react';

export default function Page() {

  const [token, setToken] = useState('')
  const [sucessMsg, setSucessMsg] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');


  async function handleForm(formData) {
    const fd = {
      email: formData.get('email'),
      password: formData.get('password'),
    }

    const res = await fetch('http://127.0.0.1:8000/api/user/login/',
       {

      'method': 'POST',
      'body': JSON.stringify(fd),
      'headers': {
        'Content-Type': 'application/json',  
      }
      
    });


    if (res.ok) {

      const resData = await res.json();
      const token = resData.token;
      
      if(typeof window!=='undefined' && token){
        localStorage.setItem('token', setToken);
        redirect("/account");
      }else{
        console.error('Login Failed')
      }
      setSucessMsg(true)

      setErrorMsg('');

    } else {
     
      setErrorMsg(errorStr);
      setSucessMsg(false);

    }

  }

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Login</h1>
      <form className={styles.form} action={handleForm} >
        <div className={styles.inputGroup}>
          <label htmlFor="email">Email</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div className={styles.inputGroup}>
          <label htmlFor="password">Password</label>
          <input type="password" id="password" name="password" />
        </div>
        <div className={styles.forgotPassword}>
          <Link href="/forgotpassword">Forgot your password?</Link>
        </div>
        <button type="submit" className={styles.submitButton}>Login</button>
      </form>
    </div>
  )
}

This code says that if res.ok is a success and if a type of window! === undefined && token. We will set the token onto a local storage, and we will redirect a user to the user dashboard other than signup will be required to log in.

Creating a profile page

First, create a (shop) folder, then create an account folder for the user.

The folder will look like this app>(shop)>acount>page.js,

import withAuth from '@/components/withAuth'
import React from 'react'

const Dashboard = () => {
  return (
    <div>page</div>
  )
}

export default withAuth(Dashboard);

And this is how you can protect your private routes. Just wrap the account page like this one,

There we go. Now, your private route is protected.