Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/MomenSherif/react-oauth/llms.txt

Use this file to discover all available pages before exploring further.

Before you can use @react-oauth/github, you need a GitHub OAuth App to obtain a Client ID. This guide walks you through registration and configuration.
1

Go to GitHub Developer Settings

Sign in to GitHub, then navigate to:Settings → Developer settings → OAuth AppsOr go directly to github.com/settings/developers and click the OAuth Apps tab.
2

Create a new OAuth App

Click New OAuth App (or Register a new application if this is your first app).
3

Fill in the application details

Complete the registration form:
FieldDescriptionExample
Application nameThe name users see on the GitHub authorization screenMy App
Homepage URLYour app’s public-facing URLhttps://myapp.com
Application descriptionOptional description shown to users during authorizationSign in to My App
Authorization callback URLThe URL GitHub redirects to after authorizationhttp://localhost:3000/callback
The Authorization callback URL must exactly match the redirectUri you pass to useGitHubLogin. GitHub rejects requests whose redirect URI does not match this value.
4

Register the application

Click Register application. GitHub creates your OAuth App and takes you to its settings page.
5

Copy your Client ID

On the app settings page, copy the Client ID. This is the value you pass as clientId to useGitHubLogin.To generate a Client Secret, click Generate a new client secret. Store it securely — you will need it on your backend to exchange authorization codes for access tokens.
Your Client Secret is shown only once. Copy it immediately and store it in a secrets manager or environment variable. Never commit it to source control or include it in your frontend code.

​
Local development setup

During development, set your Authorization callback URL to your local dev server’s callback route, for example: 
http://localhost:3000/callback
Then pass the same URL as redirectUri in the hook: 
const { initiateGitHubLogin } = useGitHubLogin({
  clientId: process.env.REACT_APP_GITHUB_CLIENT_ID,
  redirectUri: 'http://localhost:3000/callback',
  onSuccess: response => { /* ... */ },
  onError: error => { /* ... */ },
});
Use environment variables for your Client ID so you can swap values between development and production without changing code. In Create React App use REACT_APP_GITHUB_CLIENT_ID; in Vite use VITE_GITHUB_CLIENT_ID.

​
Multiple environments

GitHub OAuth Apps support only a single Authorization callback URL. To work across multiple environments (development, staging, production), create a separate OAuth App for each environment, each with its own callback URL and Client ID.
EnvironmentCallback URLClient ID
Developmenthttp://localhost:3000/callbackfrom dev app
Staginghttps://staging.myapp.com/callbackfrom staging app
Productionhttps://myapp.com/callbackfrom production app
Store each Client ID in the appropriate environment variable and keep Client Secrets in a secrets manager.

​
Important notes

  • The callback URL must match exactly. Including or omitting a trailing slash, changing http to https, or using a different port will cause GitHub to reject the request.
  • The Client Secret stays on the server. Only the Client ID is used in the frontend. The Client Secret is required only for the server-side code exchange.
  • You can update the callback URL in the OAuth App settings at any time, but the change takes effect immediately — update your app’s redirectUri at the same time to avoid broken logins.
For more detail on GitHub’s OAuth App settings, see the GitHub OAuth Apps documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us