Provider configuration (OAuth, credentials) in NextJS - Mini Project: Build & Apply

Provider configuration (OAuth, credentials) in Next.js

📖 Scenario: You are building a Next.js app that needs user login using OAuth providers like GitHub and Google. You will configure these providers step-by-step to enable authentication.

🎯 Goal: Set up OAuth providers in Next.js using the next-auth library by configuring GitHub and Google providers with client IDs and secrets.

📋 What You'll Learn

Create a Next.js API route for authentication

Add GitHub provider configuration with client ID and secret

Add Google provider configuration with client ID and secret

Export the NextAuth handler with the providers configured

💡 Why This Matters

🌍 Real World

OAuth provider configuration is essential for apps that want to let users log in using popular services like GitHub and Google without managing passwords.

💼 Career

Understanding how to configure OAuth providers in Next.js is a common task for frontend and full-stack developers working on modern web applications.

1

Create NextAuth API route file

Create a file named pages/api/auth/[...nextauth].js and import NextAuth from next-auth. Then export a default function calling NextAuth with an empty providers array.

NextJS

import NextAuth from "next-auth"

export default NextAuth({
  providers: []
})

// Your code here

Need a hint?

Use import NextAuth from "next-auth" and export default NextAuth with providers as an empty array.

2

Add GitHub provider configuration

Import GitHubProvider from next-auth/providers/github. Add a GitHub provider to the providers array with clientId set to process.env.GITHUB_CLIENT_ID and clientSecret set to process.env.GITHUB_CLIENT_SECRET.

NextJS

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

export default NextAuth({
  providers: [
    // Add GitHubProvider here
  ]
})

Need a hint?

Import GitHubProvider and add it inside providers with the correct environment variables.

3

Add Google provider configuration

Import GoogleProvider from next-auth/providers/google. Add a Google provider to the providers array alongside GitHub with clientId set to process.env.GOOGLE_CLIENT_ID and clientSecret set to process.env.GOOGLE_CLIENT_SECRET.

NextJS

import NextAuth from "next-auth"
import GitHubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"

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

Need a hint?

Import GoogleProvider and add it to the providers array with the correct environment variables.

4

Export NextAuth handler with providers

Ensure the default export calls NextAuth with the providers array containing both GitHubProvider and GoogleProvider configured with their client IDs and secrets.

NextJS

import NextAuth from "next-auth"
import GitHubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"

// Export NextAuth handler with providers
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    })
  ]
})

Need a hint?

Make sure the export default calls NextAuth with both providers inside the providers array.