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.
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
- Go to developers.facebook.com.
- Click on
Log Inat the top right to log in.
- Click on
My Appsat the top right.
Create Appnear the top right.
- Select your app type and click
- Fill in your app information, then click
- This should bring you to the screen:
Add Products to Your App. (Alternatively you can click on
Add Productin the left sidebar to get to this screen.)
The next step requires a callback URI, which looks like this:
- Go to your Supabase Project Dashboard.
- Click on the
Settingsicon at the bottom of the left sidebar.
- Click on
APIin the list.
- Under Config / URL you'll find your API URL, you can click
Copyto copy it to the clipboard.
- Now just add
/auth/v1/callbackto the end of that to get your full
OAuth Redirect URI.
Add Products to your App screen:
- Skip the Quickstart screen, instead, in the left sidebar, click
- Enter your callback URI under
Valid OAuth Redirect URIson the
Facebook Login Settingspage
- Enter this in the
Valid OAuth Redirect URIsbox
Save Changesat 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.
App Review -> Permissions and Features screen:
- Click the button
Request Advanced Accesson the right side of
You can read more about access levels here
Settings / Basicin the left sidebar
- Copy your App ID from the top of the
Showthen copy your secret
- Make sure all required fields are completed on this screen.
- Go to your Supabase Project Dashboard
- In the left sidebar, click the
Authenticationicon (near the top)
Settingsfrom the list to go to the
- Enter the final (hosted) URL of your app under
Site URL(this is important)
External OAuth Providersturn
Facebook Enabledto ON
- Enter your
Facebook client IDand
Facebook secretsaved in the previous step
Add this function which you can call from a button, link, or UI element.
To log out: