Sign-in with Facebook (deprecated)

How to sign-in users using their Facebook Account.

Setting-up a Facebook Account integration

Sign in to your Prepr account
Go to https://signin.prepr.io and sign in with your Prepr account. Then navigate to the Environment you want to create the Sign-In for.

Set-up integration Go to Settings -> Integrations and click Activate below the Facebook App integration.

Enter a name, your App Id, Secret key and click save.

Copy the Sign-in Url you need this later.

Flow diagram

Flow diagram

Redirect the customer to the Facebook Sign-In page

After a customer has clicked on the "Sign-In" link on your front-end, the customer is redirected to the Facebook Sign-In page. After a sign-in, the Prepr API will redirect the customer back to your front-end.

Example URL:

https://customers.prepr.io/sign_in/facebook/CEczfXDneBtOOwpL3ZwxqYGc1qII4u0OHQy?redirect_url=https://example.com/facebook_login_handler&access_token=<YOUR-ACCESS-TOKEN>

The sign-in url contains an access_token (with the scope persons_sign_in) and a redirect_url to redirect back to your frontend/app.

Implement Sign-In handler

If the customer clicks on the sign-in link, the API will redirect the customer back to your site. The API will add a query param access_token to the URL.

https://example.com/facebook_login_handler?access_token=<YOUR-ACCESS-TOKEN>

This token is a temporary sign-in token. To use this for the following requests we need to convert it to a Personal Access Token.

This is pretty simple, just create a POST request to https://customers.prepr.io/customers/sign_in_with_magic?ttl=0 with the received token as the Authentication Bearer header.

This will result in a new Personal Access Token for the customer:

{
  "id": "9eddc469-c56a-42f3-b77a-8fc36276faf6",
  "last_seen": "2021-03-01T15:35:58+00:00",
  "first_name": "Ryan",
  "last_name": "Vaughan",
  "access_token": {
    "access_token": "<YOUR-ACCESS-TOKEN>",
    "token_type": "Bearer",
    "expires_in": null
  }
}

Done! 🥳 You've completed the sign-in. The new token can now be used to create events or personalized API requests.