Next.js has quickly become one of the most lovable frameworks for React developers, and rightfully so! One of the pivotal features every web application requires is user authentication. In this post, we will walk through methods to implement authentication in your Next.js applications effectively.

What is Authentication?

Before diving into coding, let's clarify what we mean by authentication. Simply put, authentication is the process of verifying who a user is. Typically, this involves checking a username and password against a database. Once verified, the user obtains access to your app or particular features within it.

Why Use Authentication in Next.js?

Building applications without authentication can leave your data exposed and unusable for end-users. Hence, using a solid authentication system:

• Protects sensitive user data.
• Enhances user experience by personalizing content.
• Builds trust and security among your app's users.

Let’s explore how to implement authentication in Next.js applications.

Getting Started with NextAuth.js

One of the simplest and most efficient libraries for handling authentication in Next.js is NextAuth.js. It allows developers to create a secure authentication system with several built-in options, including OAuth, email/password, and more.

Installation

To get started, you need to install NextAuth.js in your Next.js application:

npm install next-auth

Basic Setup

Next, create a new API route for NextAuth. Under your pages/api directory, create a [...nextauth].js file:

// pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Email({
      server: {
        host: 'smtp.example.com',
        port: 587,
        auth: {
          user: process.env.EMAIL_USER,
          pass: process.env.EMAIL_PASS,
        },
      },
      from: 'no-reply@example.com',
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  database: process.env.DATABASE_URL,
});

In this setup, we're enabling email/password and Google as authentication options. Make sure to set your environment variables (EMAIL_USER, EMAIL_PASS, GOOGLE_ID, GOOGLE_SECRET, DATABASE_URL) accordingly.

Handling Authentication Status

To check if a user is authenticated, you can use the useSession hook provided by NextAuth.js. Here’s how you can utilize it within your component:

import { useSession, signIn, signOut } from 'next-auth/react';

const Profile = () => {
  const { data: session } = useSession();

  return (
    <div>
      {session ? (
        <>
          <h2>Welcome, {session.user.name}</h2>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      ) : (
        <>
          <h2>Please Sign In</h2>
          <button onClick={() => signIn()}>Sign in</button>
        </>
      )}
    </div>
  );
};

export default Profile;

Protecting Pages

Not all pages should be accessible to everyone. To protect specific pages, you can create a Higher Order Component (HOC). Here’s how you can implement it:

import { useSession } from 'next-auth/react';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const withAuth = (WrappedComponent) => {
  return (props) => {
    const { data: session, status } = useSession();
    const router = useRouter();

    useEffect(() => {
      if (status === 'loading') return; // Do nothing while loading
      if (!session) router.push('/api/auth/signin'); // Redirect if not authenticated
    }, [session, status]);

    return <WrappedComponent {...props} />;
  };
};

export default withAuth;

Now you can wrap any component with this HOC to ensure only authenticated users can access it.

Session Management

Managing user sessions is vital. With NextAuth.js, sessions are handled automatically, but you might want to customize the session behavior.

To set session expiration or callback during sign-in, you can modify your NextAuth settings:

callbacks: {
  async session(session, user) {
    session.id = user.id; // Include user id in session
    session.expires = new Date(Date.now() + 60 * 60 * 1000); // 1 hour
    return session;
  },
}

This configuration allows you to enhance session handling as needed.

Conclusion

In this journey through Next.js authentication using NextAuth.js, we've covered the essentials—installation, page protection, and session management. By incorporating these strategies into your applications, you prepare them for real-world usage while enhancing security and user satisfaction.

With the right setup, you can focus more on building out your features while leaving the heavy lifting of user authentication to NextAuth.js! Happy coding!