OAuth Login Providers Setup with Auth.js

Auth.js makes it easy to integrate social logins. Let us configure Google and GitHub OAuth authentication providers.

1. Registering App credentials

Before writing code, register your application on the developer portal of your selected provider to obtain a Client ID and Client Secret:

• GitHub: Go to GitHub Developer Settings -> OAuth Apps -> Register new application.
• Google: Go to Google Cloud Console -> APIs and Services -> Credentials -> Create OAuth client ID.

Callback Redirect URL configuration

When asked by providers, enter the Auth.js default callback route path:

https://your-domain.com/api/auth/callback/github
https://your-domain.com/api/auth/callback/google

2. Configuration Setup (auth.ts)

Store the credentials inside your .env file:

AUTH_GITHUB_ID="your-github-client-id"
AUTH_GITHUB_SECRET="your-github-client-secret"

AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"

Configure providers inside auth.ts:

// auth.ts
import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub, // SDK automatically reads AUTH_GITHUB_ID and AUTH_GITHUB_SECRET
    Google, // SDK automatically reads AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET
  ],
});

3. Triggering Social Sign In (Client Component)

In Client Components, trigger social logins by importing signIn from the client library:

"use client";

import React from "react";
import { signIn } from "next-auth/react";

export default function SocialButtons() {
  return (
    <div className="flex gap-4">
      <button 
        onClick={() => signIn("github", { redirectTo: "/dashboard" })}
        className="bg-gray-900 text-white px-4 py-2 rounded-lg"
      >
        Sign in with GitHub
      </button>

      <button 
        onClick={() => signIn("google", { redirectTo: "/dashboard" })}
        className="bg-white border text-gray-950 px-4 py-2 rounded-lg"
      >
        Sign in with Google
      </button>
    </div>
  );
}