GitHub OAuth

This page details how to add and configure GitHub OAuth for Authverse projects.

Install the GitHub Provider

Execute the following command to add the GitHub provider to your project:

npx authverse@latest add github

Configure Authorized Redirect URIs

In your GitHub Settings (Developer settings → OAuth Apps → [Your App]), configure the Authorization callback URL:

• Local development:
  • http://localhost:3000/api/auth/callback/github
• Production:
  • https://example.com/api/auth/callback/github

[!NOTE] If you modify your auth base path (default: /api/auth), ensure these redirect URIs are updated to match.

Environment Setup

Add the following variables to your project's .env file:

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

Replace the values with the Client ID and Client Secret from your GitHub OAuth App.

[!TIP] Adjust this configuration to use your preferred method for securely storing secrets in CI/CD pipelines.

Import and Use the GitHub Provider Component

Import the prebuilt provider component and integrate it into your UI:

import GithubProviders from "@/components/authverse/GithubProviders";

<GithubProviders />;

This component renders the GitHub sign-in option at its location.

Notes & Troubleshooting

• Configuration: Ensure your OAuth App is correctly configured in GitHub and that the callback URL is exact.
• Production Domain: For production environments, replace https://example.com with your authenticated domain.
• Proxies: If changing the auth callback path or deploying behind proxies, verify that the redirect URI and host settings in your GitHub OAuth App match your deployment configuration.