Implementing a Secure Login System with Next.js

Tech Adapter 2024-06-12

Next.js is a React-based framework that supports server-side rendering and offers effective ways to manage user authentication in web applications. This guide explains how to build a login authentication system using Next.js, with practical examples utilizing the `next-auth` library.

1. Installing Required Libraries

First, install the necessary libraries for your Next.js project. `axios` manages HTTP communication with the server, and `next-auth` simplifies integrating an authentication system.

npm install next-auth axios

2. Setting Up Next-Auth

`next-auth` simplifies the authentication process and supports integration with various authentication providers. Set up the login mechanism in the `/pages/api/auth/[…nextauth].js` file. Here, we use a local login method with credentials as an example.

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

export default NextAuth({
  providers: [
    Providers.Credentials({
      authorize: async (credentials) => {
        const user = { id: 1, name: "J Smith", email: "jsmith@example.com" }
        if (credentials.username === "jsmith" && credentials.password === "password") {
          return Promise.resolve(user)
        } else {
          return Promise.resolve(null)
        }
      }
    })
  ],
  session: {
    jwt: true,
  },
  jwt: {
    secret: "secret",
  },
  pages: {
    signIn: '/auth/signin',
  }
})

3. Implementing the Login Page

The login page provides a user interface and sends user input to the server. This page is implemented in `/pages/auth/signin.js`, processing login requests using the `signIn` function.

import { signIn } from 'next-auth/client';

const SignIn = () => {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      signIn('credentials', { username: 'jsmith', password: 'password' });
    }}>
      <input name="username" type="text" required />
      <input name="password" type="password" required />
      <button type="submit">Sign In</button>
    </form>
  );
};

export default SignIn;

4. Controlling Access to Protected Pages

Use the `getServerSideProps` function to check the user’s login status server-side and redirect unauthenticated users to the login page. This enhances security by handling it directly on the server.

import { getSession } from 'next-auth/client';

export const getServerSideProps = async (context) => {
  const session = await getSession({ req: context.req });
  if (!session) {
    return {
      redirect: {
        destination: '/auth/signin',
        permanent: false,
      },
    };
  }
  return {
    props: { session },
  };
};

function ProtectedPage({ session }) {
  return <div>Welcome {session.user.name}!</div>;
}

export default ProtectedPage;

5. Implementing Logout Functionality

Just as important as logging in, handling logout securely is crucial. `next-auth` supports straightforward logout functionality, ensuring sessions are terminated safely and related cookies are cleared when the user logs out.

import { signOut } from 'next-auth/client';

const LogoutButton = () => {
  return (
    <button onClick={() => signOut()}>
      Sign Out
    </button>
  );
};

export default LogoutButton;

6. Managing Client-Side State

To manage the user’s login state client-side in a Next.js application, use the `useSession` hook. This hook allows easy retrieval and use of the current logged-in user’s session information within components.

import { useSession } from 'next-auth/client';

function UserProfile() {
  const [session, loading] = useSession();

  if (loading) {
    return <p>Loading...</p>;
  }

  return session ? <p>Welcome, {session.user.name}!</p> : <p>You are not logged in.</p>;
}

7. Performance Optimization and Security

In addition to the default security features provided by Next.js, developers should use HTTPS to encrypt data in transit and set appropriate CORS policies to enhance application security. Server-side rendering and static generation can also improve page load times and SEO performance.

Conclusion

Implementing a login authentication system with Next.js provides developers with flexibility, and utilizing libraries like `next-auth` makes integrating various authentication methods easy. These features enhance user convenience and application security, making Next.js a suitable choice for developers aiming to build secure and efficient web applications.