Login with Facebook
To enable Facebook Auth for your project, you need to set up a Facebook OAuth application and add the application credentials to your Supabase Dashboard.
Overview
Setting up Facebook logins for your application consists of 3 parts:
- Create and configure a Facebook Application on the Facebook Developers Site
- Add your Facebook keys to your Supabase Project
- Add the login code to your Supabase JS Client App
Steps
Access your Facebook Developer account
- Go to developers.facebook.com.
- Click on
Log In
at the top right to log in.
Create a Facebook App
- Click on
My Apps
at the top right. - Click
Create App
near the top right. - Select your app type and click
Continue
. - Fill in your app information, then click
Create App
. - This should bring you to the screen:
Add Products to Your App
. (Alternatively you can click onAdd Product
in the left sidebar to get to this screen.)
Find your callback URI
The next step requires a callback URI, which looks like this:
https://<project-ref>.supabase.co/auth/v1/callback
- Go to your Supabase Project Dashboard.
- Click on the
Settings
icon at the bottom of the left sidebar. - Click on
API
in the list. - Under Config / URL you'll find your API URL, you can click
Copy
to copy it to the clipboard. - Now just add
/auth/v1/callback
to the end of that to get your fullOAuth Redirect URI
.
Set up FaceBook Login for your Facebook App
From the Add Products to your App
screen:
- Click
Setup
underFacebook Login
- Skip the Quickstart screen, instead, in the left sidebar, click
Settings
underFacebook Login
- Enter your callback URI under
Valid OAuth Redirect URIs
on theFacebook Login Settings
page - Enter this in the
Valid OAuth Redirect URIs
box - Click
Save Changes
at the bottom right
Be aware that you have to set the right access levels on your Facebook App to enable 3rd party applications to read the email address.
From the App Review -> Permissions and Features
screen:
- Click the button
Request Advanced Access
on the right side ofpublic_profile
andemail
You can read more about access levels here
Copy your Facebook App ID and Secret
- Click
Settings / Basic
in the left sidebar - Copy your App ID from the top of the
Basic Settings
page - Under
App Secret
clickShow
then copy your secret - Make sure all required fields are completed on this screen.
Enter your Facebook App ID and Secret into your Supabase Project
- Go to your Supabase Project Dashboard
- In the left sidebar, click the
Authentication
icon (near the top) - Click
Settings
from the list to go to theAuthentication Settings
page - Enter the final (hosted) URL of your app under
Site URL
(this is important) - Under
External OAuth Providers
turnFacebook Enabled
to ON - Enter your
Facebook client ID
andFacebook secret
saved in the previous step - Click
Save
Add login code to your client app
The JavaScript client code is documented here: Supabase OAuth Client Code
const { user, session, error } = await supabase.auth.signIn({
provider: 'facebook',
})
Add this function which you can call from a button, link, or UI element.
async function signInWithFacebook() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'facebook',
})
}
To log out:
async function signout() {
const { error } = await supabase.auth.signOut()
}