Facebook Social Login with Web3Auth

Facebook Login enables users to sign in using their Facebook credentials. Web3Auth supports Facebook as a social login provider, allowing developers to offer a familiar and quick authentication method for users with Facebook accounts.

To integrate Facebook with Web3Auth, developers must first create a Facebook App via the Meta for Developers Console.

Create a Facebook app

1. Follow Facebook's instructions to create a new app.

2. When creating an app, make sure to select Consumer from this screen to use Facebook Login.

3. On the next screen, you'll be presented with different products you can integrate into your Facebook app. Click "Set Up" in the card representing the Facebook Login capability.

   

4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.

   • https://auth.web3auth.io/auth

   

5. Obtain the "App ID" and "App Secret" from the Settings > Basic screen.

   

Create a Facebook Connection

Enable on Dashboard

To use this feature, please enable Facebook from the Social Connections section in the Web3Auth Dashboard.

By default, Web3Auth uses its own pre-configured credentials for Facebook login.

Follow these steps to create a Facebook connection:

1. Visit the Web3Auth Dashboard.
2. Go to the Social Connections section.
3. Click on the Settings icon near the Facebook connection.
4. Enter the Auth Connection ID.
5. Enter the Facebook App ID.
6. Enter the Facebook App Secret.
7. Finally, click on the Add Connection button.

Usage

Since, the Facebook Connection details are available from Dashboard, developers don't need to pass any additional parameters to the Web3AuthProvider.

Follow our Quickstart Guide to setup the basic flow.

Implicit Login with Facebook

web3authContext.tsx

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.FACEBOOK,
  authConnectionId: "w3a-facebook-demo",
});