Creating a GitHub OAuth App

Step-by-step guide to registering a GitHub OAuth App and configuring redirect URIs for local and production environments.

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 Apps

   Or 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:

   Field	Description	Example
   Application name	The name users see on the GitHub authorization screen	My App
   Homepage URL	Your app’s public-facing URL	https://myapp.com
   Application description	Optional description shown to users during authorization	Sign in to My App
   Authorization callback URL	The URL GitHub redirects to after authorization	http://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.

Environment	Callback URL	Client ID
Development	http://localhost:3000/callback	from dev app
Staging	https://staging.myapp.com/callback	from staging app
Production	https://myapp.com/callback	from 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.