Add Facebook login


# Add Facebook login

You can add Facebook login to your applications using Asgardeo and enable users to log in with their Facebook accounts.

Follow this guide for instructions.

# Register Asgardeo on Facebook

You need to register Asgardeo as an app on Facebook.

You can follow the Facebook Documentation (opens new window) for detailed instructions.

To register an app on Facebook:

  1. Go to the My Apps (opens new window) page in Meta for developers.

  2. Click Create App.

    Facebook developer portal
  3. Select the use case as Authenticate and request data from users with Facebook Login and click Next.

    Create Facebook consumer app
  4. Select the login type out of the options and click Next.

    Create Facebook consumer app
  5. Provide Display Name and click Create App to create an application.

    Provide information to Facebook app
  6. While in the created application, select Use cases from the left navigation.

  7. Under Use cases > Authentication and account creation, click Customize.

  8. Under Facebook Login > Quickstart, click Go to quickstart.

  9. Select Web as the platform for this app and provide the following Site URL with your organization name and click Save.

    https://api.asgardeo.io/t/<organization_name>
    
    1
    Add Facebook app url
  10. Return to the Use cases > Customize section and under Facebook login > Settings, click Go to settings.

  11. Add the following as the Valid OAuth Redirect URIs and click Save changes.

    https://api.asgardeo.io/t/<organization_name>/commonauth
    
    1
  12. Enable Client OAuth Login and Web OAuth Login (these are enabled by default) and save the changes.

    Add Facebook settings
  13. On the left navigation panel, go to App settings > Basic and take note of the App ID and App Secret.

    Get AppID and Secret from Facebook

# Register the Facebook IdP

Now, let's register the Facebook IdP in Asgardeo.

  1. On the Asgardeo Console, go to Connections.

  2. Click Create Connection and select Facebook.

  3. Enter the following details of the Facebook identity provider and click Finish:

    Add Facebook IDP in Asgardeo
    Parameter Description
    Name A unique name for this Facebook identity provider.
    App ID App ID obtained from Facebook.
    App Secret The app secret obtained from Facebook.
Claim syncing for JIT-provisioned users

JIT user provisioning is enabled by default for your external identity provider. If required, you can disable JIT user provisioning.

When a user with a local Asgardeo account uses the same email address to log in through an external identity provider, Asgardeo syncs the claims from the JIT-provisioned user account and the local account.

According to the default behavior of Asgardeo, when JIT user provisioning is enabled, the user claims of the local user account are overridden by the user claims received from the external identity provider.

You can use Asgardeo's identity provider APIs to configure claim syncing between the external identity provider and the local user accounts. This gives you the flexibility to customize the claim syncing behavior according to your specific requirements.

After the Facebook identity provider is created, go to the Settings tab and see the list of permissions granted by Facebook to Asgardeo.

  • email: Grants read access to a user's primary email address.
  • public_profile: Grants read access to a user's default public profile details.

Asgardeo needs these permissions to get user information. Asgardeo checks the attribute configurations of the application and sends the relevant attributes received from Facebook to the app. You can read the Facebook documentation (opens new window) to learn more.

# Enable Facebook login

Before you begin

You need to register an application with Asgardeo You can register your own application or use one of the sample applications provided.

  1. On the Asgardeo Console, go to Applications.

  2. Select your application, go to the Login Flow tab and add Facebook login as follows:

    Using the Classic Editor

    To add Facebook login using the Classic Editor:

    1. If you haven't already defined a sign-in flow, click Start with Default configuration to get started.

    2. Click Add Authentication on the step, select your Facebook identity provider, and click Add.

      Add Facebook login in Asgardeo
    Using the Visual Editor

    To add Facebook login using the Visual Editor:

    1. Switch to the Visual Editor tab, by default the Username & Password login flow will be added onto the Visual Editor's workspace.

    2. Click on + Add Sign In Option to add a new authenticator to the same step and select your Facebook connection.

      Add Facebook login in Asgardeo using the Visual Editor
  3. Click Update to save your changes.

# Try it out

Follow the steps given below.

  1. Access the application URL.

  2. Click Login to open the Asgardeo login page.

  3. On the Asgardeo login page, click Sign in with Facebook.

    Login with Facebook
  4. Log in to Facebook with an existing user account.

  5. The user is now redirected to the application and logged in.

When a user successfully logs in with Facebook for the first time, a user account is created in the Asgardeo Console with the Facebook username. This new user account will be managed by Facebook.

# Delete a connection

Before you begin

If your connection has applications associated with it, you will not be able to delete the connection.


Before deleting such connections:
  1. Check the associated applications from the Connected Apps tab of the connection.
  2. Click on an application that uses the connection and you will be redirected to the Sign-in Method tab of the respective application.
  3. Remove the connection from the sign-in flow of the associated applications.
  4. Repeat steps 2 and 3 for all listed applications.
  5. Proceed to delete the connection.

To delete a connection that does not have any applications using it:

  1. On the Asgardeo Console, go to Connections.

  2. Click Set up and navigate to the General tab.

  3. At the bottom of the page, click the button in the Delete connection.

    You cannot delete connections that are available by default.

  4. Select the checkbox and confirm your action.

    Delete connection