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.
There are major updates planned for this feature. 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 Cotter
Validate the token and proceed with logins or transactions.
Keep in mind that this works if you have a companion app that
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
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
Step 1: Setup Cotter
Include Javascript SDK
To use our Javascript SDK, include the script below in your HTML page.
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.
<script>
var cotter = new CotterLogin(config);
</script>
Configuration
Here's a basic configuration example:
var config = {
ApiKeyID: "<your-API-KEY-ID>",
// Type of identity your want to collect: EMAIL or PHONE
Type: "PHONE",
// div id of the container for Cotter Form
ContainerID: "cotter-container-login",
SkipRedirectURL: true,
// the JSON key for the phone number or email to be posted to RedirectURL
// Read more on RedirectURL JSON Object below
IdentifierField: "phone",
// OnBegin here is MANDATORY
// You need to return the Cotter User ID. (If you used client_user_id,
// use that instead).
OnBegin: async payload => {
var { userID, err } = await getUserIDFromIdentifier(
payload.identifier
);
return {
userID: userID,
err: err
};
},
// After the user successfully logged-in, the SDK will return a payload
// about the login request into this OnSuccess function.
OnSuccess: payload => {
console.log(payload)
},
// (optional) Allow login using OTP sent to email or phone number
// if user doesn't have Trusted Device set up
// or if user choose to use OTP instead of trusted device
// (To enable this, you have to set OTP true in the dashboard)
AllowOTPFallback: true,
};
// Getting the User ID usnig Cotter's API
const getUserIDFromIdentifier = async (identifier) => {
try {
const resp = await fetch(
`https://www.cotter.app/api/v0/user?identifier=${encodeURIComponent(
identifier
)}`,
{ headers: { API_KEY_ID: apiKey } }
);
const respJSON = await resp.json();
const nullUUID = "00000000-0000-0000-0000-000000000000";
return {
userID: respJSON.ID === nullUUID ? null : respJSON.client_user_id,
err: respJSON.ID === nullUUID ? "User not found" : null
};
} catch (e) {
return {
userID: null,
err: e.message
};
}
};
Advanced Customization
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:
