Login with GitHub
To enable GitHub Auth for your project, you need to set up a GitHub OAuth application and add the application credentials to your Supabase Dashboard.
Overview#
Setting up GitHub logins for your application consists of 3 parts:
- Create and configure a GitHub OAuth App on GitHub
- Add your GitHub OAuth keys to your Supabase Project
- Add the login code to your Supabase JS Client App
Access your GitHub account#
- Go to github.com.
- Click on
Sign In
at the top right to log in.
Create a GitHub Oauth App#
Go to the GitHub Developer Settings page:
- Click on your profile photo at the top right
- Click Settings near the bottom of the menu
- In the left sidebar, click
Developer settings
(near the bottom) - In the left sidebar, click
OAuth Apps
Find your callback URL#
The next step requires a callback URL, which looks like this:
https://<project-ref>.supabase.co/auth/v1/callback
- Go to your Supabase Project Dashboard
- Click on the
Authentication
icon in the left sidebar - Click on
Providers
under the Configuration section - Click on GitHub from the accordion list to expand and you'll find your Redirect URL, you can click
Copy
to copy it to the clipboard
Register a new OAuth application on Github.#
- Navigate to
Settings
/Developer settings
/OAuth Apps
- Click
Register a new application
. If you've created an app before, clickNew OAuth App
here. - In
Application name
, type the name of your app. - In
Homepage URL
, type the full URL to your app's website. - In
Authorization callback URL
, type the callback URL of your app. - Enter the URL in the
Valid OAuth Redirect URIs
box. - Click
Save Changes
at the bottom right. - Click
Register Application
.
Copy your new OAuth credentials
- Copy and save your
Client ID
. - Click
Generate a new client secret
. - Copy and save your
Client secret
.
Enter your GitHub credentials into your Supabase Project#
- Go to your Supabase Project Dashboard
- In the left sidebar, click the
Authentication
icon (near the top) - Click on
Providers
under the Configuration section - Click on GitHub from the accordion list to expand and turn GitHub Enabled to ON
- Enter your GitHub Client ID and GitHub Client Secret saved in the previous step
- Click
Save
Add login code to your client app#
When your user signs in, call signInWithOAuth() with github
as the provider
:
async function signInWithGitHub() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'github',
})
}
When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:
async function signout() {
const { error } = await supabase.auth.signOut()
}