Facebook Authentication¶

MongoDB Logo
ServerDriversCloudToolsGuides
Get MongoDB
Close ×
MongoDB Stitch

Introduction
Tutorials
Users & Authentication
    Overview
    User Management
        Stitch Users
        Configure Custom User Data
        Finding a User
        Viewing User Data
        Managing User Accounts
        Linking User Accounts
        Working with Multiple User Accounts
    Authentication Providers
        Overview
        Anonymous
        Email/Password
        API Key
        Apple ID
        Facebook OAuth 2.0
        Google OAuth 2.0
        Custom Function
        Custom JWT
MongoDB Atlas
GraphQL
MongoDB Mobile
Functions
Triggers
External Services
Values & Secrets
Application Deployment
Hosting
Troubleshooting
Stitch Administration
Application Logs
Client SDKs
Release Notes

Stitch > Users & Authentication > Authentication Providers 

Facebook Authentication

On this page

Overview
Configuration
Usage
    Set Up a Facebook App
    Authenticate a User

Overview

The Facebook authentication provider allows users to log in with their existing Facebook account through a companion Facebook application. When a user logs in, Facebook provides Stitch with an OAuth 2.0 access token for the user. Stitch uses the token to identify the user and access approved data from the Facebook API on their behalf. For more information on Facebook Login, see Facebook Login for Apps.
Configuration

Stitch UI Import/Export 

You can enable and configure the Facebook authentication provider from the Stitch UI by selecting Facebook from the Users > Providers page.

The Facebook authentication provider has the following configuration options:
Field Description

Client ID

Required. The App ID of the Facebook app.

See Set Up a Facebook App for information about setting up your Facebook app and finding the App ID.

Client Secret

Required. The name of a Secret that stores the App Secret of the Facebook app.

See Set Up a Facebook App for information about setting up your Facebook app and finding the App Secret.

Metadata Fields

Optional. A list of fields describing the authenticated user that your application will request from the Facebook Graph API.

All metadata fields are omitted by default and can be required on a field-by-field basis. Users must explicitly grant your app permission to access each required field. If a metadata field is required and exists for a particular user, it will be included in their user object.

Redirect URIs

Required for web applications. A list of allowed redirect URIs.

Once a user completes the authentication process on Facebook, Stitch redirects them back to either a specified redirect URI or, if no redirect URI is specified, the URL that they initiated the authentication request from. Stitch will only redirect a user to a URI that exactly matches an entry in this list, including the protocol and any trailing slashes.

Domain Restrictions

Optional. A list of approved domains for user accounts.

If specified, the provider checks the domain of a user’s primary email address on Facebook and only allows them to authenticate if the domain matches an entry in this list.

For example, if example1.com and example2.com are listed, a Facebook user with a primary email of [e-mail] would be allowed to log in, while a user with a primary email of [e-mail] would not be allowed to log in.

Note

If you’ve specified any domain restrictions, you must also require the email address field in the Metadata Fields setting.
Usage
Set Up a Facebook App

The Facebook authentication provider requires a Facebook app to manage authentication and user permissions. The following steps walk through creating the app, setting up Facebook Login, and configuring the provider to connect with the app.
1
Create a Facebook App

Follow Facebook’s official guide to create a new Facebook app.
2
Enable Facebook Login

From the app’s Dasboard view, find the Facebook Login card and click Set Up. You should see a list of quickstart guides for each platform. Follow the guide for your platform to enable Facebook Login.

Note

Stitch web applications do not require you to install the Facebook SDK to use the Facebook authentication provider. If you are incorporating Facebook Login into a web application you can skip any steps in the quickstart related to setting up the Facebook SDK for Javascript.
3
Add Stitch as a Valid OAuth Redirect URI

When a user completes the login flow for your Facebook app they need to be redirected back to Stitch. Facebook Login will only allow users to redirect to a pre-approved list of URIs.

From the Facebook Login > Settings page, add a Stitch authentication callback URL that corresponds to the deployment region of your application to the list of Valid OAuth Redirect URIs. The following table lists the callback URL for each region:
Region Stitch Authentication Callback URL
Global

https://stitch.mongodb.com/api/client/v2.0/auth/callback

Virginia
(us-east-1)

https://us-east-1.aws.stitch.mongodb.com/api/client/v2.0/auth/callback

Oregon
(us-west-2)

https://us-west-2.aws.stitch.mongodb.com/api/client/v2.0/auth/callback

Ireland
(eu-west-1)

https://eu-west-1.aws.stitch.mongodb.com/api/client/v2.0/auth/callback

Sydney
(ap-southeast-2)

https://ap-southeast-2.aws.stitch.mongodb.com/api/client/v2.0/auth/callback

4
Configure the Facebook Authentication Provider

To connect your Facebook app to Stitch, find your Facebook app’s App ID and App Secret values on the Settings > Basic page and add them to your authentication provider configuration.
Authenticate a User

JavaScript SDK Android SDK iOS SDK 

To begin authenticating a user with the Facebook authentication provider, call StitchAuth.loginWithRedirect() with an instance of FacebookRedirectCredential:

if (!client.auth.isLoggedIn) {
const credential = new FacebookRedirectCredential();
Stitch.defaultAppClient.auth.loginWithRedirect(credential);
}

In web apps, Facebook authentication redirects users to a page hosted on a Facebook domain. Once a user enters their credentials on this page, Facebook will confirm or deny their identity and, if successfully authenticated, ask them for permission to share their data with the application. Facebook will then redirect to Stitch, where the user’s access token is saved and the user is redirected back to the redirect URI. The redirect URI must appear in the list of Redirect URIs specified in the provider configuration, otherwise the login process will not complete successfully.

When control is returned to your application, you must handle the Facebook redirect by calling handleRedirectResult(), as follows:

if (client.auth.hasRedirectResult()) {
client.auth.handleRedirectResult().then(user => {
console.log(user);
});
}

Specify a Redirect (Optional)

By default, Stitch redirects users to the URL of the page from which they initiated the login request. To specify a redirect URI, include it as a parameter to the FacebookRedirectCredential constructor:

const credential = new FacebookRedirectCredential("");
Stitch.defaultAppClient.auth.loginWithRedirect(credential);

Note

The redirect URI is automatically stripped of any fragment identifiers.

For example, if the initial redirect URL is https://example.com/dashboard/#login, the user will be redirected to https://example.com/dashboard/.
← Apple ID Authentication Google Authentication →

© MongoDB, Inc 2008-present. MongoDB, Mongo, and the leaf logo are registered trademarks of MongoDB, Inc.
Was this page helpful?
Yes
No