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:
  1. 1.
    Embed Cotter in your website
  2. 2.
    Receive a Callback with user's authentication event and a token from Cotter
  3. 3.
    Validate 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

Cotter's Authentication Request Modal
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​
Allow Trusted Devices (and OTP)
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

Cotter's Login Form using Trusted Device
  1. 1.
    ​Setup Cotter with your API_KEY_ID and some config
  2. 2.
    ​Show Cotter form​
  3. 3.
    ​Receive a Callback in your OnSuccess function the authentication event and a signature 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.
1
<script src="https://js.cotter.app/lib/cotter.js" type="text/javascript"></script>
Copied!

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.
1
<script>
2
var cotter = new CotterLogin(config);
3
</script>
Copied!

Configuration

Here's a basic configuration example:
1
var config = {
2
ApiKeyID: "<your-API-KEY-ID>",
3
4
// Type of identity your want to collect: EMAIL or PHONE
5
Type: "PHONE",
6
7
// div id of the container for Cotter Form
8
ContainerID: "cotter-container-login",
9
SkipRedirectURL: true,
10
11
// the JSON key for the phone number or email to be posted to RedirectURL
12
// Read more on RedirectURL JSON Object below
13
IdentifierField: "phone",
14
15
// OnBegin here is MANDATORY
16
// You need to return the Cotter User ID. (If you used client_user_id,
17
// use that instead).
18
OnBegin: async payload => {
19
var { userID, err } = await getUserIDFromIdentifier(
20
payload.identifier
21
);
22
return {
23
userID: userID,
24
err: err
25
};
26
},
27
28
// After the user successfully logged-in, the SDK will return a payload
29
// about the login request into this OnSuccess function.
30
OnSuccess: payload => {
31
console.log(payload)
32
},
33
34
// (optional) Allow login using OTP sent to email or phone number
35
// if user doesn't have Trusted Device set up
36
// or if user choose to use OTP instead of trusted device
37
// (To enable this, you have to set OTP true in the dashboard)
38
AllowOTPFallback: true,
39
};
40
​
41
// Getting the User ID usnig Cotter's API
42
const getUserIDFromIdentifier = async (identifier) => {
43
try {
44
const resp = await fetch(
45
`https://www.cotter.app/api/v0/user?identifier=${encodeURIComponent(
46
identifier
47
)}`,
48
{ headers: { API_KEY_ID: apiKey } }
49
);
50
const respJSON = await resp.json();
51
const nullUUID = "00000000-0000-0000-0000-000000000000";
52
return {
53
userID: respJSON.ID === nullUUID ? null : respJSON.client_user_id,
54
err: respJSON.ID === nullUUID ? "User not found" : null
55
};
56
} catch (e) {
57
return {
58
userID: null,
59
err: e.message
60
};
61
}
62
};
Copied!
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:
1
<div
2
id="cotter-container-login"
3
style="width: 300px; height: 300px;"
4
></div>
Copied!
2. Show the form
1
<script>
2
cotter.showForm();
3
</script>
Copied!

What we have so far

index.html
1
<script
2
src="https://js.cotter.app/lib/cotter.js"
3
type="text/javascript"
4
></script>
5
​
6
<div id="cotter-container-login" style="width: 300px; height: 300px;"></div>
7
​
8
<script>
9
var config = {
10
ApiKeyID: "API_KEY_ID",
11
SkipRedirectURL: true,
12
Type: "PHONE", // EMAIL or PHONE
13
ContainerID: "cotter-container-login",
14
IdentifierField: "phone",
15
OnSuccess: payload => {
16
console.log(payload)
17
},
18
AllowOTPFallback: true,
19
OnBegin: async payload => {
20
var { userID, err } = await getUserIDFromIdentifier(
21
payload.identifier
22
);
23
return {
24
userID: userID,
25
err: err
26
};
27
},
28
};
29
var cotter = new CotterLogin(config);
30
cotter.showForm();
31
32
33
// Getting the User ID usnig Cotter's API
34
const getUserIDFromIdentifier = async (identifier) => {
35
try {
36
const resp = await fetch(
37
`https://www.cotter.app/api/v0/user?identifier=${encodeURIComponent(
38
identifier
39
)}`,
40
{ headers: { API_KEY_ID: apiKey } }
41
);
42
const respJSON = await resp.json();
43
const nullUUID = "00000000-0000-0000-0000-000000000000";
44
return {
45
userID: respJSON.ID === nullUUID ? null : respJSON.client_user_id,
46
err: respJSON.ID === nullUUID ? "User not found" : null
47
};
48
} catch (e) {
49
return {
50
userID: null,
51
err: e.message
52
};
53
}
54
};
55
</script>
Copied!

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:
1
{
2
"ID": 2397,
3
"CreatedAt": "2020-04-01T05:28:12.540127Z",
4
"UpdatedAt": "2020-04-01T05:28:16.599833Z",
5
"DeletedAt": null,
6
"client_user_id": "<YOUR USER ID>",
7
"issuer": "<YOUR API KEY ID>",
8
"event": "LOGIN_WEB",
9
"ip": "123.347.26.236",
10
"location": "San Mateo",
11
"timestamp": "1585718892",
12
"method": "TRUSTED_DEVICE",
13
"new": false,
14
"approved": true,
15
"signature": "reBafVsmpxO7km5jpRQ3xA..."
16
}
Copied!
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:

πŸŽ‰ You're done!

Next Steps

Last modified 11mo ago