Add Google, GitHub, and Social Logins with Auth0 (2026)

Auth0 doesn’t just delegate authentication to social providers; it actively manages the entire user lifecycle, including identity verification and profile enrichment, before even handing the verified user back to your application.

Let’s see how this plays out with GitHub.

Imagine a user clicks "Login with GitHub" on your app.

1. Auth0 Initiates OAuth Flow: Auth0, acting as your application’s client, redirects the user’s browser to GitHub’s authorization server. This redirect includes Auth0’s client ID, a redirect URI (pointing back to Auth0), and the requested scopes (e.g., read:user, user:email).
2. User Authorizes GitHub: The user sees a GitHub-branded page asking them to grant your application (via Auth0) permission to access their profile information.
3. GitHub Redirects Back to Auth0: Upon authorization, GitHub redirects the user’s browser back to the Auth0 redirect URI, this time with an authorization code.
4. Auth0 Exchanges Code for Tokens: Auth0’s backend server receives this code. It then makes a direct, server-to-server request to GitHub’s token endpoint, exchanging the code for an access_token and a id_token. This is crucial: Auth0 is doing this validation, not your app directly.
5. Auth0 Fetches User Profile: Using the access_token, Auth0 makes another server-to-server request to GitHub’s API (e.g., /user) to retrieve the user’s profile details (username, email, name, avatar URL, etc.).
6. Auth0 Creates/Updates User: Auth0 looks up the user in its own database.
   • If the user is new, Auth0 creates a new user profile, linking it to their GitHub identity. It might also apply rules or hooks to enrich the profile (e.g., assign roles, add custom metadata).
   • If the user already exists in Auth0 (perhaps from a previous login via Google or email/password), Auth0 links the new GitHub identity to their existing Auth0 user profile.
7. Auth0 Generates ID and Access Tokens for Your App: Auth0 then generates its own JWT ID token and potentially an access token, signed by Auth0’s keys, containing information about the authenticated user (their Auth0 sub ID, email, name, etc.).
8. Auth0 Redirects User Back to Your App: Auth0 redirects the user’s browser back to your application’s specified callback URL, including the Auth0-generated ID token.
9. Your App Validates Auth0 Token: Your application’s backend or frontend receives this ID token and validates its signature against Auth0’s public keys. It then extracts the user information from the token to establish a session.

This entire process abstracts the complexity of OAuth 2.0 and OpenID Connect. You configure the social connections in Auth0, and Auth0 handles the token exchanges, profile fetching, and user management.

Configuration in Auth0:

Navigate to Authentication > Social in your Auth0 dashboard. You’ll see options for Google, GitHub, and many others.

For each provider, you’ll need to:

1. Create an Application in the Provider’s Console:

   • Google: Go to the Google Cloud Console, create a project, enable the "Google Sign-In" API, and configure OAuth consent screen. Then go to "Credentials," create an OAuth client ID for a "Web application." You’ll get a Client ID and Client Secret.
   • GitHub: Go to GitHub’s Developer settings, register a new OAuth App. You’ll need an "Application name," "Homepage URL" (your app’s URL), and an "Authorization callback URL" which must be https://YOUR_AUTH0_DOMAIN/login/callback. You’ll get a Client ID and Client Secret.

2. Configure in Auth0:

   • Google: In Auth0, click "Google," toggle "Enable." Paste your Google Client ID and Client Secret. Set the "Scope" (e.g., openid email profile).
   • GitHub: In Auth0, click "GitHub," toggle "Enable." Paste your GitHub Client ID and Client Secret. Set the "Scope" (e.g., read:user user:email).

Example auth0-react Usage (Frontend):

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function LoginButton() {
  const { loginWithRedirect } = useAuth0();

  return (
    <div>
      <button onClick={() => loginWithRedirect({ connection: 'google-oauth2' })}>
        Log In with Google
      </button>
      <button onClick={() => loginWithRedirect({ connection: 'github' })}>
        Log In with GitHub
      </button>
      {/* Add more buttons for other connections */}
    </div>
  );
}

export default LoginButton;

The connection parameter in loginWithRedirect tells Auth0 which social provider to use. You can find the exact connection name in your Auth0 dashboard under Authentication > Social.

The most surprising thing about Auth0’s social login is that it never directly exposes the social provider’s tokens to your frontend application. All token exchanges and profile fetching happen server-side within Auth0’s infrastructure, and your application only ever receives Auth0-signed tokens. This means you don’t have to worry about securely storing or managing GitHub’s or Google’s access_token on the client side.

The next step is to handle the user’s profile data once they’ve logged in, perhaps by displaying their name and avatar, or by using their email to look them up in your own application’s user database.