How to redirect to login page if unauthenticated in Next.js [easy guide]

Redirect client to login page if unauthenticated

Redirect to login page is necessary if the client is attempting to access a restricted resource

In this tutorial, we are going to explain in easy steps how to redirect client to login page if he/she trying to access unauthorized resource

The steps are:

• Define the list of unauthorized resources
• Customize the _app.js so that every access and route change to the app is controlled

let's see how we can implement those changes in an easy way

Define the unauthorized resources

We first need to define the list of either the authorized or unauthorized resources that a client has access to

Create lib/constants.js and add the list of authorized resources

export const authorizedRoutes = [
  "/signup",
  "/",
  '/login'
];

For example, we define these resources as authorized, you can add as many as you want

Customize _app.js

Next, let's customize our next.js app file so that every page fetch or route change, we check if the user is authorized to display the resource, otherwise we redirect him/her to the login page

Here is how it is done

/pages/_app.js

import Wrapper from "../components/wrapper";

export default function MyApp({ Component, pageProps }) {
  return  <Wrapper Component={Component} pageProps={pageProps} />
}

We define our wrapper so that every page request, the wrapper checks whether the client can fetch the page or not

Define the Wrapper

Next, let's see how we are going to implement our wrapper

To check whether the user can access the page or not, we can either use react useContext to store user details, or use firebase for example, or any other user management tool that you are familiar with

In this example, we are using firebase to check the user info. A quick article to integrate firebase auth with Next.js can be found in this this link

components/wrapper.js

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useRouter } from "next/router";
import {  useEffect } from "react";
import { authorizedRoutes } from "../lib/constants";



export default function Wrapper({ Component, pageProps }) {

  const auth = getAuth();
  const router = useRouter();


  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log('user is logged in')
      } else {
        if (!router.isReady) return;
        if (authorizedRoutes.includes(router.asPath)) return;
        else router.push("/");
      }
    });
  }, [router.asPath]);

  return <Component {...pageProps} />;
}

The wrapper above checks for the user using firebase, if the user is logged in, it let you navigate to the desired page

If you are not logged in, and you have asked for an authorized route defined in the constants.js, it let you navigate to it as well.

Otherwise it will redirect you to the Home page

Test share state between pages

Let's Create test for example and test whether a user is logged in or not

export default function Test() {

     return (<div>User is connected</div>)
}

If the user is logged in , we are going to show user is connected, otherwise our wrapper will redirect us to the home page

Now, Hit localhost:3000/test

The page look like

Now when the user is not connected, you will be redirected to the home page

As you can see, we succeed to redirect client depending on his user state.

You can also test for authorized routes for non-logged in user, and check whether you can access those pages

Conclusion

We have seen how to redirect to login page if user is unauthenticated through defining the authorized routes, build the wrapper component and customize the app file so that every request will be processed depending on whether the user is logged in or not

I recommend checking how to manage user through the useContext react hook in this link to implement it in the wrapper component