Next.js Authenticating Server-Rendered Pages

Next.js is a React framework that allows developers to build server-side rendered React applications with ease. One of the challenges that developers face when building server-rendered applications is how to authenticate users on the server side. This is important because server-rendered pages can expose sensitive data that should only be visible to authenticated users. In this article, we will discuss how to authenticate server-rendered pages in Next.js.

Prerequisites: To follow along with this tutorial, you should have a basic understanding of Next.js and how it works. You should also have some experience with authentication and authorization in web applications.

Syntax: Next.js provides an API called getServerSideProps that allows developers to fetch data on the server before rendering the page. This API can be used to authenticate the user before rendering the page. The syntax for using getServerSideProps to authenticate the user is as follows:

export async function getServerSideProps(context) {

      // Authenticate user here
      const user = await authenticateUser(context.req);
 
      if (!user) {
        return {
              redirect: {
                destination: '/login',
                permanent: false,
              },
        };
      }

      return {
        props: {
              user,
        },
      };
}

Steps to Install and Run Next.js Application:

Step 1: First, you need to make sure that Node.js is installed on your computer. You can check if Node.js is already installed by running the following command in your terminal:

node -v

If Node.js is not installed, you can download and install it from the official website:

Step 2: Once you have installed Node.js, you can install Next.js by running the following command in your terminal:

npm install -g next

This will install Next.js globally on your computer, so you can use it from any directory.

Step 3: Create a new directory for your Next.js application.

Step 4: Open a terminal and navigate to the directory and run the following command to create a new Next.js application:

npx create-next-app my-app

Step 5: Navigate to the new directory by running:

cd my-app

Step 6: Start the development server by running:

npm run dev

 Step 7: Open your browser and go to http://localhost:3000 to see your Next.js application running.

NextJs Authenticating Server-Rendered Pages

Example 1: Authentication with JWT

In this example, we are using JSON Web Tokens (JWT) to authenticate the user. We are extracting the JWT from the cookie and verifying it using the JWT_SECRET environment variable. If the JWT is valid, we return the user object as a prop. If the JWT is invalid, we redirect the user to the login page.

• Make sure that you have a Next.js application set up and running on your computer. If you don’t have one yet, you can follow the steps mentioned above to create a new Next.js project.
• Copy the code for authentication with JWT and paste it into a new file called auth.js in the pages directory of your Next.js project.
• Next, you need to set the JWT_SECRET environment variable to a secret value that you choose. You can set this variable by creating a new file called .env.local in the root directory of your Next.js project and adding the following line to it:- 

JWT_SECRET=your-secret-value-here

Replace your-secret-value-here with the secret value that you choose.

Finally, you can run the Next.js development server by running the following command in your terminal:   

npm run dev

This will start the development server and make your Next.js application accessible at http://localhost:3000.

Once the development server is running, you can test the authentication functionality by navigating to a protected route in your application. For example, you can create a new page called dashboard.js in the pages directory and add the following code to it:

Javascript

import jwt from 'jsonwebtoken';
import cookie from 'cookie';

export async function getServerSideProps(context) {
    const { token } = cookie
        .parse(context.req.headers.cookie || '');

    try {
        const decoded = jwt.verify(
            token, process.env.JWT_SECRET);

        return {
            props: {
                user: decoded,
            },
        };
    } catch (error) {
        return {
            redirect: {
                destination: '/login',
                permanent: false,
            },
        };
    }
}

Example 2: Authentication with Firebase

In this example, we are using Firebase to authenticate the user. We are using the onAuthStateChanged function to listen for changes in the user’s authentication state. If the user is authenticated, we return the user object as a prop. If the user is not authenticated, we redirect the user to the login page.

To execute the Authentication with the Firebase code, you will need to follow these steps:

• Create a Firebase account: To use Firebase Authentication, you need to create a Firebase account and set up a new project.
• Install Firebase SDK: You can install the Firebase SDK using npm or yarn. Use the following command in your terminal:

npm install firebase

• Initialize Firebase: To initialize Firebase, you need to import the firebase/app and firebase/auth modules, and call the initializeApp function with your Firebase project configuration.
• Create a Firebase app: You can create a new Firebase app using the getAuth() method, which returns the Auth object for the default Firebase app.
• Listen for changes in the user’s authentication state: You can use the onAuthStateChanged function to listen for changes in the user’s authentication state.
• Return the user object as a prop: If the user is authenticated, resolve the promise with the user object as a prop.
• Redirect the user to the login page: If the user is not authenticated, resolve the promise with the redirect destination to the login page.
• Export the getServerSideProps function: Finally, you can export the getServerSideProps function so that Next.js can pre-render the page with the authenticated user object or redirect the user to the login page.

Javascript

import { getAuth, onAuthStateChanged } from 'firebase/auth';

export async function getServerSideProps(context) {
    const auth = getAuth();

    return new Promise((resolve) => {
        onAuthStateChanged(auth, (user) => {
            if (user) {
                resolve({
                    props: {
                        user,
                    },
                });
            } else {
                resolve({
                    redirect: {
                        destination: '/login',
                        permanent: false,
                    },
                });
            }
        });
    });
}

In this article, we have explored how to authenticate server-rendered pages in Next.js. We have seen how to use the getServerSideProps API to authenticate the user before rendering the page. We have also seen two examples of how to authenticate the user using JSON Web Tokens (JWT) and Firebase.

Authentication is an important aspect of any web application, and Next.js provides built-in support for authentication. By authenticating the user before rendering the page, we can ensure that the user has the necessary permissions to access the page. This can help to improve the security of our application.

In conclusion, Next.js provides a powerful framework for building server-side rendered web applications. By using the getServerSideProps API to authenticate the user, we can ensure that our application is secure and that the user has the necessary permissions to access the pages.