Skip to main content

Add Facebook as a social sign-in provider in Ory

note

To add Facebook as a social sign-in provider, you need a Facebook Developer account. Go to Facebook Developers to create one.

Configuration in Ory Console​

Follow these steps to add Facebook as a social sign-in provider for your for your project using the Ory Console.

  1. Sign in to Ory Console and select Social Sign-in.
  2. Click the switch next to the Facebook logo to start the configuration.
  3. Copy the Redirect URI and save it for later use.
  4. In your Facebook Developers account, go to My Apps → Create App.
  5. Select Consumer and click Next.
  6. Enter you app's name and preferred contact email. Click Create App.
  7. In the "Facebook Login" card, click Set Up. Ignore the quickstart and select Settings → Basic from the sidebar.
  8. Copy the Client ID and Client secret from Facebook and paste them into the corresponding fields in the Ory Console.
  9. On Facebook Developers, click Save Changes.
  10. From the left navigation bar, select Facebook Login → Settings.
  11. Paste the redirect URI copied from Ory into the Valid OAuth redirect URIs and click Save Changes.
  12. In the Ory Console, click Save Configuration to enable Facebook as a social sign-in provider.
note

These steps cover the basic configuration of a social sign-in provider integration. At this point, the user experience is incomplete. To complete the configuration and ensure a smooth and secure user experience, configure the scopes and data mapping as described in the next section.

Additional configuration​

When adding a social sign-in provider, you can customize the integration by defining the OAuth scopes Ory requests from the provider and by setting up custom data mappings.

Scopes​

The Scopes section allows you to define the OAuth scopes Ory requests from the sign-in provider. Defining scopes allows you to interact with the provider's APIs on behalf of the user, or to access additional user data, which is exposed as claims for data mapping.

For Facebook, add the email scope for a basic setup.

To learn more about the scopes available for Facebook, read the related documentation.

Data mapping​

The Data mapping section allows you to map the data returned by the sign-in provider to traits as defined in the identity schema.

To define the mapping, create a Jsonnet code snippet. Read this document to learn more about Jsonnet data mapping.

In this sample Jsonnet snippet, the user's email, is mapped to email in the identity schema.

local claims = std.extVar('claims');
{
  identity: {
    traits: {
      // The email might be empty if the user hasn't granted permissions for the email scope.
      [if 'email' in claims then 'email' else null]: claims.email,
    },
  },
}
info

Facebook only returns access_token and doesn't return id_token. Ory sends requests to Facebook's graph.facebook.com/me API and adds the user info to std.extVar('claims').

danger

Don't save secrets such as API keys, credentials, or personal data directly in Jsonnet code snippets. Jsonnet code snippets used for data mapping aren't stored in an encrypted format in The Ory Network.

Configuration using the Ory CLI​

Follow these steps to add Facebook as a social sign-in provider to your project using the Ory CLI:

  1. Create a Facebook app.

  2. Create a Jsonnet code snippet to map the desired claims to the Ory Identity schema.

  3. Encode the Jsonnet snippet with Base64 or host it under an URL accessible to The Ory Network.

  4. Download the Ory Identities config from your project and save it to a file:

    ## List all available projects
    ory list projects

    ## Get config
    ory get identity-config <project-id> --format yaml > identity-config.yaml

  5. Add the social sign-in provider configuration to the downloaded config. Add the Jsonnet snippet with mappings as a Base64 string or provide an URL to the file.

    selfservice:
    methods:
      oidc:
        config:
          providers:
            - id: facebook # this is `<provider-id>` in the Authorization callback URL. DO NOT CHANGE IT ONCE SET!
              provider: facebook
              client_id: .... # Replace this with the OAuth2 Client ID provided by Facebook app
              client_secret: .... # Replace this with the OAuth2 Client Secret provided by Facebook app
              mapper_url: "base64://<YOUR_BASE64_ENCODED_JSONNET_HERE>"
              # Alternatively, use an URL:
              # mapper_url: https://storage.googleapis.com/abc-cde-prd/9cac9717f007808bf17f22ce7f4295c739604b183f05ac4afb4
              scope:
                - email
              # required for email and email_verified claims in the near future
              # other supported scopes: user_gender, user_birthday
        enabled: true

  6. Update the Ory Identities (Ory Kratos) configuration using the file you worked with:

    ory update identity-config <project-id> --file updated_config.yaml

Configuration for self-hosted instances​

Follow these steps to add Google as a social sign-in provider to your when self-hosting Ory Kratos:

  1. Create a Facebook app.

  2. Set the redirect URI to URL that follows this pattern:

    https://<domain-of-ory-kratos>:<public-port>/self-service/methods/oidc/callback/<social-signin-provider-id>
    note

    Facebook requires HTTPS redirect URIs.

  3. Create a Jsonnet code snippet to map the desired claims to the Ory Identity schema.

  4. Encode the Jsonnet snippet with Base64 or store it in a location available to your Ory Kratos instance.

  5. Add the social sign-in provider configuration to the Ory Kratos configuration. Add the Jsonnet snippet with mappings as a Base64 string or provide a path or an URL of the file.

tip

When running a self-hosted instance, you can pass the social sign-in provider configuration in the SELFSERVICE_METHODS_OIDC_CONFIG_PROVIDERS environment variable. For example:

SELFSERVICE_METHODS_OIDC_CONFIG_PROVIDERS='[{"id":"google","provider":"google","mapper_url":"<file_location>","client_id":"<client_id>","client_secret":"<client_secret>","scope":["openid","email","profile"],"auth_url":"https://accounts.google.com/o/oauth2/v2/auth","token_url":"https://www.googleapis.com/oauth2/v4/token","issuer_url":"https://accounts.google.com"}]'

Prevent having to log in after sign-up​

When adding social sign-in providers manually, remember to add the session hook to after/oidc/hooks. If you don't add this hook, users will have to log in again after signing up to get a session.

selfservice:
  flows:
    registration:
      after:
        oidc:
          hooks:
            - hook: session