Client-Side vs. Server-Side Session Management in Next.js with next-auth

Introduction

Determining a user's authentication state is a fundamental aspect of modern web development, crucial for building secure and scalable applications. This article explores robust session management in Next.js using the next-auth library. We will cover methods for verifying user sessions on both the client and the server, providing a complete approach to application security. A comprehensive authentication strategy in Next.js involves managing sessions on both the client for dynamic UI and the server for secure data access.

Checking the Session on the Client-Side

Verifying a session on the client-side is essential for controlling what a user interacts with in their browser. The next-auth library provides the useSession hook for this purpose. This hook returns a session object containing user data and a status property, which indicates whether the session is loading, authenticated, or unauthenticated. This stateful information is ideal for conditionally rendering UI components, such as a loading indicator or user-specific content.

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

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "loading") {
    return <p>Loading...</p>
  }

  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

The useSession hook is the primary mechanism for dynamically rendering UI components based on the user's current authentication status.

Checking the Session on the Server-Side

For protected routes, such as a user dashboard, a server-side session check is required to prevent unauthenticated content from being rendered to the client. Client-side checks alone are insufficient for this scenario. The next-auth library offers the getSession function, which can be used within getServerSideProps to validate the user's session before the page is rendered. If the session is invalid, the user can be redirected to a sign-in page, ensuring the protected content is never exposed.

import { getSession } from "next-auth/react"

export async function getServerSideProps(context) {
  const session = await getSession(context)

  if (!session) {
    return {
      redirect: {
        destination: '/api/auth/signin',
        permanent: false,
      },
    }
  }

  return {
    props: { session },
  }
}

Using getSession within getServerSideProps is the standard method for securing pages and preventing data from being sent to unauthenticated users.

Conclusion

The next-auth library provides a versatile solution for session management in Next.js applications. By leveraging useSession on the client, developers can create responsive user interfaces that adapt to authentication state. In parallel, using getSession on the server ensures that sensitive pages and data are properly protected before they are sent to the client. By combining client-side and server-side checks, next-auth provides a complete and secure framework for managing user authentication throughout your Next.js application, a key step in building a professional online presence.