Sign-in with a magic link (deprecated)

How to Build Magic Link sign-in in 5 Minutes.

Setting-up the email template

Creating a HTML template
You can create your own email template to be sent to your customers.

First, create an HTML template using your preferred code editor. Then follow the steps below to add it Prepr.

Signing 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.

Save the email template
Go to Settings > Email templates and click Add template.

Enter a name, and a reply email address like this Prepr <no-reply@mail.prepr.io>.

Paste the HTML you created into the body field and click save.

Copy the Id (on the left side of the page), you need this later.

After a customer has clicked on the "Sign-In" link on your front-end, make a request to the Customer API to sent the Magic Link.

{
  "email" : "ryan.vaughan@example.prepr.io",
  "email_template" : {
    "id" : "a8d0cd02-c339-46fa-8602-6a5cbf991487"
  },
  "redirect_url" : "https://example.com/sign_in"
}

Replace the email template Id with the Id from the template you created in step 1.

POST https://customers.prepr.io/customers/request_sign_in

If the request is successful the customer receives a magic link in their mailbox.

Implementing 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/sign_in?access_token=<YOUR-ACCESS-TOKEN>

This token is a temporary sign-in token. To use this for following requests we need to convert it to an 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": "a22287ff-7277-4583-8adb-0ca3e55e21b8",
  "last_seen": "2021-03-01T15:35:58+00:00",
  "first_name": "Ryan",
  "last_name": "Vaughan",
  "access_token": {
    "access_token": "Gniw9Mt90cLj7136M5ao0B7mGHHMHXXw68NlKMyuiinmVU426Dw",
    "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.