Nextjs Protecting Api Routes And Pages Complete Guide

1. Protecting Pages with Authentication

Example Scenario:

You want to ensure that only authenticated users can access a specific page, say /dashboard. Unauthorized visitors will be redirected to the login page.

Step 1: Set Up Authentication

For simplicity, we’ll use JWT (JSON Web Tokens) and store tokens in local storage. In a real-world scenario, you would likely handle tokens server-side.

Install the jsonwebtoken package:

npm install jsonwebtoken

Add a login handler in an API route (api/login.js):

import jwt from 'jsonwebtoken';

const secretKey = process.env.JWT_SECRET;

export default function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }

  const { username, password } = req.body;
  // Normally, you'd verify these credentials against a database.
  if (username === 'admin' && password === 'password') {
    const token = jwt.sign({ username }, secretKey, { expiresIn: '1h' });

    res.json({
      success: true,
      token,
    });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
}

Step 2: Create a Protected Page Component

Create a Dashboard component that will check if a user is authenticated (pages/dashboard.js).

import { useEffect, useState } from 'react';
import { useSession, signOut } from 'next-auth/react';

import { redirect } from 'next/navigation';

const Dashboard = () => {
  const [user, setUser] = useState(null);

  // Use Next Auth session hook for authentication state
  const { data: session, status } = useSession();

  useEffect(() => {
    if (status === 'unauthenticated') {
      // Redirect to login if not authenticated
      redirect('/login');
    } else if (session) {
      setUser(session.user.name);
    }
  }, [session, status]);

  if (!user) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>Welcome to your Dashboard, {user}</h1>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
};

export default Dashboard;

Step 3: Implement Authentication Using NextAuth

For better security and ease of handling sessions, using NextAuth.js is recommended.

Install NextAuth:

npm install next-auth

Set up [...nextauth].js API route for NextAuth (pages/api/auth/[...nextauth].js):

import NextAuth, { type NextAuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import jwt from 'jsonwebtoken';

const secretKey = process.env.JWT_SECRET;

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        // Normally, you'd connect to your DB to retrieve user info
        const { username, password } = credentials || {};

        if (username === 'admin' && password === 'password') {
          // Create JWT token or use NextAuth's built-in session handling
          return { id: 1, name: username };
        } else {
          throw new Error('Invalid credentials');
        }
      },
    }),
  ],
  callbacks: {
    jwt({ token, user }) {
      // Optionally, you could modify the token here
      return { ...token, ...user };
    },
    session({ session, token, user }) {
      if (token) {
        // Add additional details to the session
        session.user = token as any;
      }
      return session;
    },
  },
  session: {
    strategy: 'jwt',
  },
};

export default NextAuth(authOptions);

Create a login page (pages/login.js):

import { signIn } from 'next-auth/react';
import { useRouter } from 'next/router';

const LoginPage = () => {
  const router = useRouter();

  const [formValues, setFormValues] = useState({
    username: '',
    password: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const result = await signIn('credentials', {
        ...formValues,
        redirect: false,
      });

      if (result?.error) {
        alert(result.error);
      } else {
        // Success, redirect to protected route
        router.push('/dashboard');
      }
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formValues.username}
        onChange={handleChange}
        placeholder="Username"
        required
      />
      <input
        type="password"
        name="password"
        value={formValues.password}
        onChange={handleChange}
        placeholder="Password"
        required
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginPage;

Recap:

• You've created middleware for API routes.
• You've implemented a protected page component using NextAuth.

Now, whenever a user tries to access /dashboard, they must be logged in.

2. Protecting API Routes

API routes that require authentication should be protected by checking the validity of the JWT sent from the request headers.

Protecting an API Route (api/data.js):

import jwt from 'jsonwebtoken';
import { NextApiRequest, NextApiResponse } from 'next';

const secretKey = process.env.JWT_SECRET;

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const authHeader = req.headers.authorization;
  if (!authHeader) {
    return res.status(401).json({ message: 'No token provided' });
  }

  const token = authHeader.split(' ')[1];
  if (!token) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    const decoded = jwt.verify(token, secretKey);
    // You could store the decoded info in `req` object if needed
    req.user = decoded;
  } catch (err) {
    return res.status(401).json({ message: 'Failed to authenticate token' });
  }

  // If the token is valid, you may proceed with your logic
  if (req.method === 'GET') {
    res.status(200).json({ data: 'Sensitive data only accessible to logged-in users' });
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

How to send a token in a request (example with Fetch API):

import { useState } from 'react';

const DataFetchPage = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const token = localStorage.getItem('token');

    if (!token) return console.error('No token found!');

    try {
      const response = await fetch('/api/data', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
        },
      });

      if (!response.ok) throw new Error(response.statusText);

      const jsonData = await response.json();
      setData(jsonData.data);
    } catch (err) {
      console.error('Error fetching data:', err);
      alert('Error fetching data');
    }
  };

  return (
    <div>
      <button onClick={fetchData}>
        Fetch Protected Data
      </button>
      {data ? <p>{data}</p> : null}
    </div>
  );
};

export default DataFetchPage;

Recap:

• You've protected an API route with a JWT verification middleware.
• You've learned how to send an Authorization token when making requests to protected routes.

Conclusion

By following these steps:

1. Pages Protection: Create a higher-order component or use hooks like useSession provided by NextAuth to protect your pages conditionally based on user authentication.
2. API Routes Protection: Implement middleware in your API routes to check for valid JWT authorization tokens before processing requests.