Google and GitHub sign-in
Exactly which URLs to enter where when you create the Google and GitHub OAuth apps.
Google and GitHub sign-in are optional. Each provider's button appears on the sign-in page once both its client ID and client secret are set. Neither can be created by API, so setup shows you the steps and asks for the two values.
The URLs depend on where the app runs:
| Origin | Callback URL | |
|---|---|---|
| Local | http://localhost:3000 | http://localhost:3000/api/auth/callback/google (or /github) |
| Production | https://yourdomain.com | https://yourdomain.com/api/auth/callback/google (or /github) |
Use your real production address: your custom domain, or https://<project>.vercel.app if you don't have one. It must match NEXT_PUBLIC_APP_URL exactly, with https, no www unless your site uses it, and no trailing slash.
Create a project and consent screen
- Open console.cloud.google.com and pick or create a project.
- Go to APIs & Services → OAuth consent screen (called Google Auth Platform → Branding in newer consoles).
- Fill in the app name, user support email and developer contact email. Choose External as the audience.
Create the OAuth client
- Go to APIs & Services → Credentials → Create credentials → OAuth client ID.
- Application type: Web application.
- Authorized JavaScript origins → Add URI:
http://localhost:3000https://yourdomain.com(when deploying)
- Authorized redirect URIs → Add URI:
http://localhost:3000/api/auth/callback/googlehttps://yourdomain.com/api/auth/callback/google(when deploying)
- Click Create.
Copy the keys
Copy the Client ID and Client secret into setup. They're saved as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.
Publish the app
While the consent screen is in Testing, only the test users you list can sign in. Before launch, open the consent screen (or Audience) and click Publish app. Apps that only ask for name, email and profile picture don't need Google's verification.
Google allows several origins and redirect URIs on one client, so one client works for both local and production.
GitHub
Create the OAuth app
Open github.com/settings/developers → OAuth Apps → New OAuth App, and fill in:
| Field | Local | Production |
|---|---|---|
| Application name | Your product's name | Your product's name |
| Homepage URL | http://localhost:3000 | https://yourdomain.com |
| Authorization callback URL | http://localhost:3000/api/auth/callback/github | https://yourdomain.com/api/auth/callback/github |
Leave Enable Device Flow off.
Copy the keys
Click Register application, copy the Client ID, then click Generate a new client secret and copy it. Paste both into setup. They're saved as GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET.
One callback URL per GitHub app
A GitHub OAuth app accepts only one callback URL. Create two apps: one for local development (keys in .env.local) and one for production (keys in Vercel's environment variables).
Setup copies your .env.local keys to Vercel when it deploys. If you made the app for production, put the local app's keys in .env.local afterwards; if you made it for local, set the production app's keys in Vercel and redeploy.
Don't know your domain yet?
When you choose to deploy, setup shows https://<your-domain> in the steps, because your address isn't known until the first deploy. Add the local URLs now. At the end, setup prints the exact production URLs to add:
Google sign-in: add https://my-product.vercel.app/api/auth/callback/google as a redirect URI (and https://my-product.vercel.app as an origin).
GitHub sign-in: set the callback URL to https://my-product.vercel.app/api/auth/callback/github.Changing the keys
Setup skips a provider once its client ID is saved. To redo it, remove the provider's two lines from .env.local and run npm run setup again, or edit the values directly. In production, change them in Vercel (Settings → Environment Variables) and redeploy.
Problems
redirect_uri_mismatch, "The redirect_uri is not associated with this application", and other sign-in errors are covered in Sign-in errors.