Next.js Authenticating Server-Rendered Pages

In Next.js, server-side authentication for pages ensures that user data and access permissions are validated before rendering pages on the server. This approach enhances security and provides a better user experience by ensuring that only authorized users can access specific pages. 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.

Seever-side Authentication in Next.js

Server-side authentication in Next.js involves checking user credentials and permissions during the server-side rendering (SSR) process. This method ensures that sensitive data and protected routes are only accessible to authenticated users before the page is sent to the client.

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 Set up Next.js Project

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

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.

Steps to authenticate with JWT

• 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:

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,
            },
        };
    }
}

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.

Approach:

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.

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,
                    },
                });
            }
        });
    });
}

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.

Conclusion

Using Firebase and JWT for server-side authentication in Next.js with getServerSideProps ensures robust security and a seamless user experience. It validates user credentials on the server, protects sensitive pages, and provides a smooth, secure browsing experience for users.