How to Add Authentication to Next.js: Simple Guide

To add authentication in Next.js, use the NextAuth.js library which integrates easily with Next.js API routes and React components. Configure providers like Google or GitHub, then protect pages using hooks like useSession to check user login status.

Syntax

Authentication in Next.js with NextAuth.js involves setting up an API route for auth, configuring providers, and using React hooks to manage session state.

• pages/api/auth/[...nextauth].js: API route for NextAuth.js configuration.
• NextAuth({ providers: [...] }): Initializes auth providers.
• useSession(): React hook to get current user session.
• signIn() and signOut(): Functions to handle login and logout.

javascript

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    })
  ],
  secret: process.env.NEXTAUTH_SECRET
})

Example

This example shows a simple Next.js app using NextAuth.js with Google provider. It displays login status and buttons to sign in or out.

javascript

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

export default function Home() {
  const { data: session } = useSession()

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

Output

When signed out: Shows 'Not signed in' and a 'Sign in' button.
When signed in: Shows 'Signed in as [e-mail]' and a 'Sign out' button.

Common Pitfalls

Common mistakes when adding auth to Next.js include:

• Not setting environment variables like GOOGLE_CLIENT_ID and NEXTAUTH_SECRET.
• Forgetting to wrap your app with SessionProvider in _app.js to provide session context.
• Using useSession without checking if session is loading, causing flicker.
• Not protecting pages properly, allowing unauthorized access.

javascript

/* Wrong: Missing SessionProvider in _app.js */
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

/* Right: Wrap with SessionProvider */
import { SessionProvider } from 'next-auth/react'

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Quick Reference

Function/Component	Purpose
NextAuth()	Setup authentication providers and options
useSession()	Access current user session in React components
signIn()	Trigger sign-in flow
signOut()	Trigger sign-out flow
SessionProvider	Wrap app to provide session context

Key Takeaways

Use NextAuth.js for easy authentication integration in Next.js.

Always wrap your app with SessionProvider to manage session state.

Protect pages by checking session with useSession hook.

Set required environment variables for providers and secrets.

Handle loading states to avoid UI flicker during auth checks.