Add Facebook Login

​

Prerequisites

1. You need a Hanko Cloud account and a project. Learn more on how to set them up here.
2. You need a Facebook developer account. To create an account visit the Facebook developer portal and select Login.

​

Get your provider redirect URL

When creating a Facebook application, you need to provide a redirect URL that determines where the third party provider redirects after a successful login. This redirect URL consists of the base URL of the Hanko API and the /thirdparty/callback endpoint. You can always view your redirect URL in the Hanko Cloud Console:

1. Sign in to cloud.hanko.io.
2. Select your Organization.
3. Select your Project.
4. In the left sidebar, click Settings, then select Social connections.
5. Find your redirect URL in the Redirect URL input.

You need the redirect URL for creating a new Facebook application in the next step.

​

Create a new Facebook application

1. Navigate to and log in to the Facebook developer portal.
2. In the top navigation, select Apps.
3. Click Create app in the center view container or on the top right.

4. Provide your App details and click Next.

5. On the Use cases view, select Authenticate and request data from users with Facebook Login.
6. Click Next.

7. On the Business view, select I don't want to connect a business portfolio yet. If you do have a business portfolio and want to connect it, select it.
8. Click Next.

9. On the Create app view, click Go to dashboard.

10. On the app dashboard, click Customize adding a Facebook Login button in the Add and customize use cases accordion.

11. In the Customize use case view, select Permissions in the left sidebar.
12. Click the add button for the email permission in the Permissions table.

13. In the Customize use case view, select Settings in the left sidebar.
14. Under Valid OAuth Redirect URIs add the redirect URL you previously retrieved from the Hanko Console.

​

Get your client ID and secret

1. Navigate to the App settings > Basic for your app.
2. Copy the App ID.
3. Show and copy the App Secret.

​

Configure credentials with Hanko

1. In the Hanko Cloud Console, navigate to your project Settings and select URLs.

2. Configure a Default Redirect URL. This is the URL target in your frontend the Hanko API redirects to if an error occurs during third party sign-in. If your frontend uses the hanko-elements web components, this URL should be the URL of the page that embeds the web component such that errors can be processed properly by the web component.

3. Configure your Allowed Redirect URLs. These are the URL targets in your frontend the Hanko API is allowed to redirect to after third party authentication was successful. If your frontend uses the hanko-elements web components, this URL should bethe URL of the page that embeds the web component.

   The allowed redirect URL supports wildcard matching through globbing:

   • https://*.example.com matches https://foo.example.com and https://bar.example.com.
   • https://foo.example.com/* matches URLs like https://foo.example.com/page1 and https://foo.example.com/page2.
   • Use ** to act as a super-wildcard/match-all.

4. Navigate to your project Settings and select Social connections.
5. Under Connections find the Facebook accordion and expand it.
6. Enable the provider.
7. Enter the App ID from the previous step as the Client ID.
8. Enter the App secret from the previous step as the Client secret.
9. Click Save.

​

Frontend integration

To enable a login with Facebook in your frontend application we recommend using either our pre-built UI as provided by the @teamhanko/hanko-elements package or building a custom UI using the @teamhanko/hanko-frontend-sdk.

​

Publish your app

If you closely followed this guide, then your app will probably still have an Unpublished status. You must go through Facebook’s App review process to publish your app.