Sign In with Device
Our JavaScript SDK offers the easiest way to add "Sign in with device" into your website. You can simply call a function and it does most of the heavy lifting and authentication for you.
Concepts: Learn about how Sign in with Device works.
There are major updates planned for this feature. Contact us in Slack so we can help you prepare for it.
Overview
Authenticating users using Trusted Devices with Cotter's JavaScript SDK consists of the following steps:
Embed Cotter in your website
Receive a Callback with user's authentication event and a
token
from CotterValidate the token and proceed with logins or transactions.
Keep in mind that this works if you have a companion app that allows users to register their device as a Trusted Device.
What you're building
There are 2 ways to present Cotter's authentication prompt from your website:
In the Login form: after entering their email/phone number, if there's a trusted device, it will automatically prompt the user to approve the login from their device.
As a popup: When a user triggers an action that requires authentication, like doing a transaction or opening sensitive information, you can open a popup that will ask the user to approve the transaction from their device.
In both cases, you will receive an Event Response (the same event response that you'll receive in mobile app) that you can pass in your backend server during the login/transaction function and check if the user has authenticated and approved the event.
Required Steps
Step 1: Setting Authentication Methods
You need to set allowed methods for authenticating your users. To allow TRUSTED DEVICES
(and OTP
if you want to allow it as a fallback method), go to https://dev.cotter.app/rules
Remember to set the correct Project in the dropdown list
Step 2: Show the Login Form or Popup Prompt
We will cover the Login Form here, and the Pop Up in the next guide.
Steps for Login Form
Setup Cotter with your
API_KEY_ID
and some configReceive a Callback in your
OnSuccess
function the authentication event and asignature
from Cotter in your backend server
Step 1: Setup Cotter
Include Javascript SDK
To use our Javascript SDK, include the script below in your HTML page.
Initialize Cotter
Initialize Cotter in your HTML page, below the script you imported above. For React apps, initialize this in index.html
. You can use it later in any of your pages.
Configuration
Here's a basic configuration example:
Advanced Customization
Check out how you can customize the form and change the configuration.
Step 2: Show Cotter Form
To show the cotter form,
1. Add the <div>
container.
Put a <div>
with the id
you specified above as ContainerID
inside your page. For example, if your "ContainerID": "cotter-container-login"
, put this in your html:
2. Show the form
What we have so far
Step 3: Receive the Response in your OnSuccess function
We will send a JSON Object describing the Authentication Event to your OnSuccess
function. The JSON Object will have the following format:
You should verify the signature in the event response to ensure this is valid and it comes from Cotter's server.
Validate Cotter's Event Response
Learn how to validate Cotter's event response here:
Validating Cotter's Event Response🎉 You're done!
Next Steps
Steps for Pop Up Authentication PromptAdvanced Customization for Login FormLast updated