Facebook Social Login with Web3Auth

info

Using Facebook with Web3Auth Guide

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 verifier

• Go to the Web3Auth dashboard and select your project. Click on the Custom Authentication tab, then click on the Create Verifier button to create a new verifier.

  

1. Create a verifier for your Facebook application by selecting Facebook as the Login provider from this modal.
2. Paste the App ID and App Secret from the Facebook App(above) to the Client ID and Client Secret fields respectively and click on Create.

Example

Modal SDK

import { AuthAdapter } from "@web3auth/auth-adapter";

// Create AuthAdapter instance once you have created Web3Auth instance
const authAdapter = new AuthAdapter({
  adapterSettings: {
    loginConfig: {
      facebook: {
        verifier: "w3a-facebook-demo", // Pass the Verifier name here
        typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
        clientId: "215892741216994", // Pass on the Facebook `Client ID` here
      },
    },
  },
});

web3AuthInstance.configureAdapter(authAdapter);

// Initialize Modal
await web3AuthInstance.initModal();

// Login with Facebook
await web3AuthInstance.connect();

No Modal SDK

import { AuthAdapter } from "@web3auth/auth-adapter";

// Create AuthAdapter instance once you have created Web3AuthNoModal instance
const authAdapter = new AuthAdapter({
  adapterSettings: {
    loginConfig: {
      facebook: {
        verifier: "w3a-facebook-demo", // Pass the Verifier name here
        typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
        clientId: "215892741216994", // Pass on the Facebook `Client ID` here
      },
    },
  },
});

web3AuthNoModalInstance.configureAdapter(authAdapter);

// Initialize
await web3AuthNoModalInstance.init();

// Login with Facebook
await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "facebook",
});