How to create a custom 401 unauthorized page in Next.js

To create a custom 401 unauthorized page in a Next.js application, you can follow these steps:

1. Create a Custom Error Page Component: First, create a custom error page component to handle the 401 error. You can create a new file in your Next.js project, for example, pages/401.js.

jsxCopy code
// pages/401.js

const Unauthorized = () => {
  return (
    <div>
      <h1>401 Unauthorized</h1>
      <p>Sorry, you are not authorized to access this page.</p>
    </div>
  );
};

export default Unauthorized;

2. Customize Error Handling: Next.js provides a way to customize error handling using the getInitialProps method in your custom error page components. You can use this method to check the error status and handle it accordingly.

jsxCopy code
// pages/_error.js

import React from 'react';

const ErrorPage = ({ statusCode }) => {
  if (statusCode === 401) {
    return <Unauthorized />;
  }

  return (
    <div>
      <h1>Error {statusCode}</h1>
      <p>Sorry, something went wrong.</p>
    </div>
  );
};

ErrorPage.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default ErrorPage;

3. Handle 401 Errors: Whenever you need to return a 401 unauthorized status in your application, you can do so by checking the user's authentication status. For example, in an API route:

jsxCopy code
// pages/api/some-api-route.js

export default function handler(req, res) {
  if (!req.user) { // Example: check if user is authenticated
    res.statusCode = 401;
    res.end();
    return;
  }

  // Handle the authenticated user's request
  res.statusCode = 200;
  res.json({ data: 'Some data' });
}

With these steps, you have created a custom 401 unauthorized page in your Next.js application. Whenever a 401 error occurs, Next.js will automatically render the custom error page you've created. Additionally, you have the flexibility to handle 401 errors in your API routes or other parts of your application as needed.