Login with Facebook

Suggest Edits

Halliday's SDK supports social login with Facebook, and is fully compliant with Facebook's Terms of Service. This page provides a walkthrough for integrating Log In with Facebook and Halliday's Social Login Client with your application.

📘

Checklist for setting up Halliday Social Login Client with Facebook

Registering a Facebook Developer App

In order to enable Log in with Facebook, you will need to obtain a Facebook App ID, which can be obtained through registering a developer app with Facebook:

  1. Navigate to the Facebook Developers Website, click "Log In", and log in with your Facebook account. If you are already logged in, click on "My Apps" on the top right of the navigation bar.
  2. Click "Create App" button to start a new Developer App.
  3. Select "Authenticate and Request data from users with Facebook Login" as the use case. Then, you can fill out your details as required to finish creating the app.
  4. In the panel on the left, click on "Use Cases". Under "Authentication and Account Creation", click "customize", and enable "email" and "public_profile" under permissions.
  1. Click on "Settings" under Facebook Login. Here, be sure to enable Client OAuth Login and Web OAuth Login. You can also add allowed redirect domains on this page. Click "Save Changes" when you are done configuring your Facebook Login.
  1. Navigate to "App Settings" on the bottom left, click "Basic". Here, you will be able to see and configure the DisplayName of your app. This is the name that will show up to users when they log in to Facebook via your Application, such as "<Your_App_Name> is requesting access to your Facebook profile". You should also see your App ID and App Secret here, in addition to the top of the page. Save your changes once you are done.
  2. You will need to input your Facebook App ID into our Halliday Dashboard. With that, you now have set up your OAuth credentials for your Facebook Application that can be used with Halliday.

Add Test Users to your Developer App

By default, only your Facebook account will be able to authenticate with Facebook when testing your app before your application is published. In order to add more developers to test your app before publishing, click on "App Roles" on the bottom left, and select "Roles". Here, you can now add more developers (based on their Facebook ID) who will be allowed to authenticate and test your application. Note that the developer must also have a Facebook Developer account set up in order for them to test your application.

After you add them, they will receive a notification in their Facebook Developer Dashboard to accept your project. Once they accept, they will be able to test Log In with Facebook for your app.

Going Live with your Facebook Developer App

In order for your general users to authenticate via Facebook Sign In, you will need to go live with your Facebook Developer Application. Follow the Review and Publish steps in the navigation menu to the left to go live with your Facebook app so your users can perform social login with Facebook.

Initialize the Halliday SDK SocialLoginClient with Facebook

🚧

Be sure to register your Facebook client_id with the Halliday Dashboard so your users can perform social login with Facebook!

Display the LoginWithFacebookButton

The following code example demonstrates a React integration for our LoginWithTwitterButton component, which handles launching Facebook Auth, retrieving the Facebook OIDC token, and instantiating the SocialLoginClient after a successful user authentication.

🚧

Different Social Login Methods should have different inGamePlayerId's

When a user logs in with a different social login provider (ex. Google vs Facebook), they will receive a different signer and Halliday Smart Account. To prevent confusion, it is important that you provide us a unique inGamePlayerId for each type of social login provider, even for the same user.

import { useState } from "react";
import { LoginWithFacebookButton, BlockchainType, SocialLoginClient, SocialLoginClientParams } from "halliday-sdk";

export default function LoginComponent() {
  const [client, setClient] = useState<SocialLoginClient>();
  
  useEffect(() => {
    // Check if there is an active session
    const hallidayClient = await SocialLoginClient.getCurrentSocialLoginClient(
      hallidaySocialLoginParams
    );
    setClient(hallidayClient); // setClient can be null.
  }, []);
  
	
  if (client == null) {
    return (
       <LoginWithFacebookButton 
          hallidayPublicApiKey={"YOUR_HALLIDAY_API_KEY"}
          sandbox={false}
          inGamePlayerId={"user's in_game_player_id for Facebook"}
          blockchainType={BlockchainType.MUMBAI}
          setClient={setClient}
        />
    );
  }
  
}

Once the client is initialized, you will be able to send transactions with your Halliday Smart Account, and have access to all of our other amazing Halliday Smart Account features (including session keys and more)!

Log Out of SocialLoginClient

Before your user logs out of your application, it is important to log them out of the SocialLoginClient as well to clear any session data. You can log out of the client by calling the client.logout() function.

Updated about 1 month ago