Facebook Login
Learn how to interact with Facebook Login
To enable Facebook Auth for your project, you need to set up a Facebook OAuth application and add the application credentials to your Openfort 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 Openfort Project.
- Add the login code to your Openfort JS Client App.
Configuration#
- 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.)
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 (
https://api.openfort.xyz/iam/v1/oauth/callback/facebook
) underValid 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 use case permissions to enable Third party applications to read the email address. To do so:
Under Build Your App
, click on Use Cases
screen. From there, do the following steps:
- Click the Edit button in
Authentication and Account Creation
on the right side. This action will lead to the other page. public_profile
is set by default, so make sure it andemail
have status of Ready for testing in the redirected page.- If not, click the Add button in email on right side.
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
Signing users in#
To initiate sign in, you can use the initOAuth()
method from the Openfort JavaScript library and provide a redirectTo
URL which points to a callback route.
- Implicit flow: that's all you need to do. The user will be taken to Google's consent screen, and finally redirected to your app with an access and refresh token pair representing their session.
- Pooling flow: for example in Server-Side Auth, you need to redirect the user back to your website.
_10const response = await openfort.initOAuth(_10 {_10 provider: OAuthProvider.FACEBOOK,_10 redirectTo: 'https://your-website.com',_10 }_10);
Now you can redirect the user to the initOAuth.url and when the process is done, you will be redirected to the redirectTo url with tokens https://your-website.com?access_token=...&refresh_token=... You can then use those parameters to authenticate the user:
_10openfort.storeCredentials({_10 player: 'undefined',_10 accessToken: access_token,_10 refreshToken: refresh_token,_10 });
Uppon successful authentication, the SDK will return a token that can be used to authenticate the user in your application.