How to Set Up GitHub Login in Next.js with NextAuth.js

To set up GitHub login in Next.js, use the NextAuth.js library by installing it and configuring a GitHub provider with your client ID and secret. Then, add API routes for authentication and use the useSession hook to manage login state in your components.

Syntax

Here is the basic syntax to configure GitHub login in Next.js using NextAuth.js:

• NextAuth: Main function to handle authentication.
• GitHubProvider: GitHub OAuth provider with clientId and clientSecret.
• pages/api/auth/[...nextauth].js: API route file for NextAuth.
• useSession: React hook to get current user session.

javascript

import NextAuth from 'next-auth'
import GitHubProvider from 'next-auth/providers/github'

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
})

Example

This example shows a complete setup of GitHub login in Next.js using NextAuth.js. It includes the API route and a simple page that shows login status and buttons.

javascript

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import GitHubProvider from 'next-auth/providers/github'

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
})

// pages/index.js
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('github')}>Sign in with GitHub</button>
    </div>
  )
}

Output

When running, the page shows a 'Sign in with GitHub' button if not logged in. After login, it shows 'Signed in as [e-mail]' and a 'Sign out' button.

Common Pitfalls

• Not setting GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET in environment variables causes authentication failure.
• Forgetting to restart the Next.js server after adding environment variables.
• Not creating the GitHub OAuth app correctly with the right callback URL (http://localhost:3000/api/auth/callback/github for local development).
• Using class components or older Next.js API routes instead of the recommended API route file pages/api/auth/[...nextauth].js.

javascript

/* Wrong: Missing environment variables */
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: '', // empty string
      clientSecret: '',
    }),
  ],
})

/* Right: Use environment variables and restart server */
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
})

Quick Reference

Remember these key steps:

• Install NextAuth.js: npm install next-auth
• Create GitHub OAuth app and get clientId and clientSecret
• Set environment variables in .env.local
• Add API route pages/api/auth/[...nextauth].js with GitHub provider
• Use useSession hook in components to check login state

Key Takeaways

Use NextAuth.js with GitHub provider for easy GitHub login in Next.js.

Set GitHub OAuth app credentials as environment variables and restart your server.

Create the API route at pages/api/auth/[...nextauth].js to handle authentication.

Use the useSession hook to access user login state in your components.

Ensure your GitHub OAuth app callback URL matches your Next.js API route.