Steps for Pop Up Authentication Prompt
Show a popup to prompt users to authenticate using a Trusted Device before proceeding with a transaction or opening sensitive information
Last updated
Show a popup to prompt users to authenticate using a Trusted Device before proceeding with a transaction or opening sensitive information
Last updated
In this guide, we'll go over how to show a Pop Up that prompts the user to authenticate with their trusted device before moving forward with an action.
Setup Cotter with your API_KEY_ID
and some config
To use our Javascript SDK, include the script below in your HTML page.
<script
src="https://js.cotter.app/lib/cotter.js"
type="text/javascript"
></script>
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 cotterAuthReq = new CotterAuthRequest(config);
</script>
Here's a basic configuration example:
var config = {
ApiKeyID: "<your-API-KEY-ID>",
// (optional) The email/phone number of your user
// (used to send OTP as fallback method)
Identifier: "putrikarunian@gmail.com",
IdentifierType: "EMAIL", // type of Identifier above (EMAIL or PHONE)
// The Cotter User ID of this user
UserID: "<your-user-id>",
// Allow login using OTP sent to email or phone number
// if use 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,
// OnSuccess here will receive the JSON Event Response as a result
// of the user Authenticating from their trusted device
// You should send this JSON Event Response to your backend
OnSuccess: async payload => {
// For example, send this payload and the transaction data to submit
// a transaction, and validate the payload in your backend
console.log(payload);
// NOTE: The popup will immediately close, so set a Loading in your
// frontend while submitting data to your backend
}
};
Advanced Customization
Check out how you can customize the form and change the configuration.
To show the the popup
<script>
cotterAuthReq.show();
</script>
<script
src="https://js.cotter.app/lib/cotter.js"
type="text/javascript"
></script>
<script>
var config = {
ApiKeyID: "<your-API-KEY-ID>",
// (optional) The email/phone number of your user
// (used to send OTP as fallback method)
Identifier: "<your-user-phone-number>",
IdentifierType: "PHONE", // type of Identifier above (EMAIL or PHONE)
// The UserID you registered to Cotter in the Required Steps
UserID: "<your-user-id>",
// Allow login using OTP sent to email or phone number
// if use 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,
// OnSuccess here will receive the JSON Event Response as a result
// of the user Authenticating from their trusted device
// You should send this JSON Event Response to your backend
OnSuccess: async payload => {
// For example, send this payload and the transaction data to submit
// a transaction, and validate the payload in your backend
console.log(payload);
// NOTE: The popup will immediately close, so set a Loading in your
// frontend while submitting data to your backend
}
};
var cotterAuthReq = new CotterAuthRequest(config);
function openAuthRequest() {
cotterAuthReq.show();
}
</script>
<div onClick="openAuthRequest()" style="background-color:#f0f0f0; padding: 20px">
Open Auth Request Popup
</div>
We will pass a JSON Object describing the Authentication Event to your OnSuccess
function. The JSON Object will have the following format:
{
"ID": 2397,
"CreatedAt": "2020-04-01T05:28:12.540127Z",
"UpdatedAt": "2020-04-01T05:28:16.599833Z",
"DeletedAt": null,
"client_user_id": "<YOUR USER ID>",
"issuer": "<YOUR API KEY ID>",
"event": "LOGIN_WEB",
"ip": "123.347.26.236",
"location": "San Mateo",
"timestamp": "1585718892",
"method": "TRUSTED_DEVICE",
"new": false,
"approved": true,
"signature": "reBafVsmpxO7km5jpRQ3xA..."
}
On this step, you should pass this payload to your backend together with any data you need to submit a transaction, or any other api calls to your server.
Learn how to validate Cotter's event response here:
Customize your Pop Up prompt