How to Set Up Authentication with Firebase in a Next.js

Introduction

Authentication is a important component that provides secure user access and data protection. Firebase, a complete app development platform provided by Google, offers a robust authentication solution that can be easily integrated into your Next.js applications. In this tutorial, we’ll walk through the steps to set up Firebase Authentication in a Next.js application, allowing you to provide a secure and seamless authentication experience for your users.

Step By Step Guide For Set up Authentication in Next.js using Firebase

Before getting started with this Step by Step guide, make sure you have:

1. A Firebase account: If you don’t have one already, Go to the Firebase website (https://firebase.google.com/) and create a new account.
2. Basic familiarity with Firebase: You should have a basic understanding of Firebase and its services, particularly the Authentication service. If you’re new to Firebase, you can check out their official documentation (https://firebase.google.com/docs) to get started.

Step 1: Create a Firebase Project

Go to the Firebase console (https://console.firebase.google.com/) and sign in with your Google account.

Click on “Create a new project” and provide a name for your project.

Enable the “Authentication” feature from the Firebase console by navigating to the “Build” section and clicking on “Authentication”.

Step 2: Set Up Firebase in Your Next.js Application

Install the required Firebase packages by running the following command in your Next.js project directory:

npm install firebase

Create a new file called firebase.js in your project’s root directory, and initialize the Firebase app with your project’s configuration details:

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  // Your Firebase configuration details
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export default firebase;

Replace // Your Firebase configuration details with the actual configuration object that you can find in your Firebase project’s settings.

Step 3: Implement Firebase Authentication

Create a new folder called auth in your project’s root directory.

Inside the auth folder, create a file called firebase.js and add the following code to handle user authentication with Firebase:

import firebase from '../firebase';

export const authUser = async (email, password, signUp = false) => {
  try {
    if (signUp) {
      await firebase.auth().createUserWithEmailAndPassword(email, password);
    } else {
      await firebase.auth().signInWithEmailAndPassword(email, password);
    }
  } catch (error) {
    throw error;
  }
};

export const logoutUser = async () => {
  try {
    await firebase.auth().signOut();
  } catch (error) {
    throw error;
  }
};

This file exports two functions: authUser for signing up or signing in users with email and password, and logoutUser for signing out the current user.

Step 4: Integrate Firebase Authentication into Your Next.js Application

In your Next.js pages or components, import the authUser and logoutUser functions from the auth/firebase.js file.

Use these functions to handle user authentication in your application. For example, you can create a login form and call the authUser function with the user’s email and password when they submit the form:

import { useState } from 'react';
import { authUser } from '../auth/firebase';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await authUser(email, password);
      // Redirect or show a success message
    } catch (error) {
      console.error('Login error:', error);
      // Show an error message
    }
  };

  return (
    <form onSubmit={handleLogin}>
      {/* Email and password input fields */}
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginPage;

Similarly, you can implement sign-up and logout functionality using the authUser and logoutUser functions.

Step 5: Enable Authentication Methods in Firebase

In the Firebase console, go to the “Authentication” section and enable the authentication methods you want to support in your application, such as email/password, social login (Google, Facebook, etc.), or phone authentication.

Step 6: Secure Routes and Protect Content

Once you’ve set up Firebase Authentication, you can use Next.js’s routing and middleware abilities to secure routes and protect content based on the user’s authentication state. For example, you can create a custom middleware function to check if the user is authenticated before rendering a particular page:

import firebase from '../firebase';

export const authenticate = (ctx) => {
  const { req, res } = ctx;

  if (req && !req.headers.cookie) {
    // If no cookie is present, redirect to the login page
    res.writeHead(302, { Location: '/login' });
    res.end();
    return { props: {} };
  }

  const sessionCookie = req.headers.cookie
    .split(';')
    .find((c) => c.trim().startsWith('__session='));

  if (!sessionCookie) {
    // If no session cookie is present, redirect to the login page
    res.writeHead(302, { Location: '/login' });
    res.end();
    return { props: {} };
  }

  // Decode the session cookie and check if the user is authenticated
  const expiresIn = 60 * 60 * 24 * 7; // 1 week
  const decodedCookie = firebase.auth().verifySessionCookieToken(sessionCookie, expiresIn);

  if (!decodedCookie) {
    // If the session cookie is invalid, redirect to the login page
    res.writeHead(302, { Location: '/login' });
    res.end();
    return { props: {} };
  }

  // If the user is authenticated, render the protected page
  return { props: { user: decodedCookie } };
};

You can then use this middleware function in your secure pages to check if the user is authenticated before rendering the content.

Conclusion

By following this step-by-step guide, you’ve successfully integrated Firebase Authentication into your Next.js application. You can now provide a secure authentication experience for your users, allowing them to sign up, sign in, and log out of your application with ease. Remember to follow best practices for handling sensitive data and secure your application against potential vulnerabilities.

FAQs