Implementing Secure Route Middleware with Cookies in Next.js and React.js

nextreact

04 November 2024

In any web application, ensuring secure access to certain pages is essential. With Next.js, middleware provides a powerful way to handle authentication and route protection, especially when combined with cookies for token-based authentication. In this guide, we’ll explore a simple middleware setup to secure routes based on user login status, allowing for protected paths and managing redirections effectively.

Understanding the Middleware Logic in Neaxt.js

This code snippet defines a Next.js middleware that: Redirects logged-in users who try to access the /login page to /dashboard. Redirects unauthenticated users attempting to access /dashboard back to the home page (/). This setup helps create a smooth and secure user experience, ensuring that authenticated users don’t see the login page and that only logged-in users can access the dashboard.

Code

import { NextResponse, NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
    const path = request.nextUrl.pathname;
    const isPublicPath = path === '/login';

    const token = request.cookies.get('token')?.value || '';
    console.log(isPublicPath);

    // Redirect logged-in users away from the login page
    if (isPublicPath && token) {
        return NextResponse.redirect(new URL('/dashboard', request.nextUrl));
    }

    // Redirect unauthenticated users trying to access the dashboard
    if (!isPublicPath && !token) {
        return NextResponse.redirect(new URL('/', request.nextUrl));
    }
}

export const config = {
  matcher: [
    '/dashboard',  // Protected route
    '/login',      // Public route
  ],
};

Managing User Authentication in React.js with Redux Toolkit and Cookies

In modern web applications, user authentication is a critical component. Using Redux Toolkit along with cookies for token storage allows us to create a robust authentication system in our React.js applications. In this blog, we will explore how to set up a Redux slice to manage authentication state, along with methods to check authentication status and log users out securely.

1. Creating the Redux Slice

Create a new file called authSlice.js in the src/features directory. This file will contain our authentication logic using Redux Toolkit.

Code

// src/features/authSlice.js
import { createSlice } from '@reduxjs/toolkit';
import Cookies from 'js-cookie';

const initialState = {
  isAuth: false,
  authToken: null,
};

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAuth: (state, action) => {
      state.isAuth = action.payload;
    },
    checkAuthStatus(state) {
      const cookie = Cookies.get('authToken');
      const token = JSON.parse(!!cookie);
      state.isAuth = !!token?.jwt; 
      state.authToken = token?.jwt || null;
    },
    logout(state) {
      state.isAuth = false;
      state.authToken = null;
      Cookies.remove('authToken');
    },
  },
});

export const { setAuth, checkAuthStatus, logout } = authSlice.actions;

export default authSlice.reducer;

2. Configuring the Redux Store

Next, set up the Redux store to include the authentication slice. Create a file named store.js in the src directory:

Code

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './features/authSlice';

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export default store;

3. Integrating Redux with the React Application

Now, wrap your application with the Redux Provider to make the store available throughout your component tree. Modify src/index.js:

Code

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. Implementing Authentication Logic in Components

Now let’s create a simple login component that uses the Redux actions to manage authentication. Create a Login.js component in the src/components directory:

Code

// src/components/Login.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setAuth } from '../features/authSlice';
import Cookies from 'js-cookie';

const Login = () => {
  const dispatch = useDispatch();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();

    // Simulate API call
    if (email === 'user@example.com' && password === 'password') {
      const token = JSON.stringify({ jwt: 'secureTokenExample' });
      Cookies.set('authToken', token, { path: '/' }); // Store token in cookie
      dispatch(setAuth(true)); // Update Redux state
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default Login;

5. Creating a Dashboard Component

Next, create a protected Dashboard.js component that only authenticated users can access:

Code

// src/components/Dashboard.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { logout } from '../features/authSlice';

const Dashboard = () => {
  const dispatch = useDispatch();
  const isAuthenticated = useSelector((state) => state.auth.isAuth);

  const handleLogout = () => {
    dispatch(logout()); // Logout action
  };

  return (
    <div>
      <h1>Welcome to the Dashboard!</h1>
      {isAuthenticated && (
        <button onClick={handleLogout}>Logout</button>
      )}
    </div>
  );
};

export default Dashboard;

6. Update Your App.js Component

Now, you need to integrate the ProtectedRoute component in your existing App.js. Your implementation is almost complete; you just need to ensure the routes are set up correctly. Here's the updated App.js:

Code

import Header from '../components/header/Header'
import Footer from '../components/footer/Footer'
import HomePage from './homePage/HomePage'
import CategoryName from './categoryName/CategoryName'
import ProductDetail from './productDetail/ProductDetail'
import CartPage from './cartPage/CartPage'
import { Route, Routes, BrowserRouter } from 'react-router-dom'
import ProtectedRoute from '../components/ProtectedRoute'
function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path='/' element={<HomePage />} />
        <Route path='/:categoryName' element={<CategoryName /> } />
        <Route path='/:product/:id' element={<ProductDetail /> } />
        <Route
         path="/cart"
         element={<ProtectedRoute element={<CartPage />} />}
         />
      </Routes>
      <Footer />
    </BrowserRouter>
  )
}

export default App

7. Create the ProtectedRoute Component

Create a new file named ProtectedRoute.js in the components directory. This component will handle the authentication check.

Code

import React from 'react';
import { Navigate, useLocation } from "react-router-dom";
import { useSelector } from 'react-redux';

const ProtectedRoute = ({ element }) => {
  const isAuth = useSelector((state) => state.auth.isAuth);
  let location = useLocation();

  return isAuth ? element : <Navigate to="/" state={{ from: location }} replace />;
};

export default ProtectedRoute;