Cotter
  • 🚀Getting Started
  • Features & Concepts
    • 💬Sign In with Email/Phone Number
    • 🔐Sign In with Device
      • How it works
    • 🧬Sign In with WebAuthn
  • 📌Quickstart Guides
    • All Guides & Tutorials
    • HTML – Sign in with Email/Phone
    • React – Sign in with Email/Phone
    • React – WebAuthn
    • ▲ Next.js
    • Angular
    • Webflow
    • Bubble.io
    • Python SDK for a CLI
    • React Native – Sign in with Device
    • iOS – Sign in with Device
    • Flutter – Sign in with Device
  • 📘SDK Reference
    • Web
      • Sign In with Email/Phone Number
        • Customize the Form
        • Checking the email or phone before sending a verification code
        • Sending Code or Link via WhatsApp
        • Styling
        • Older SDK
          • Customize the Form
      • Sign in with Social Login
        • Getting Access Tokens from Social Login Providers
        • Github Instructions
        • Google Instructions
      • Sign In with WebAuthn
        • Register WebAuthn for a logged-in user
      • Sign In with Device
        • Steps for Pop Up Authentication Prompt
        • Advanced Customization for Login Form
        • Advanced Customization for Pop Up Authentication Prompt
      • Getting Access Token and Logged-In User Info
      • Sending Successful Form Submission
      • FAQ & Troubleshooting
    • React Native
      • Installation
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
        • Add a new Trusted Device
        • Remove Trusted Device
      • Sign In with Email/Phone Number
      • Getting Stored OAuth Tokens and User Information
      • FAQ
      • Older SDK Versions
        • Sign in with Email/Phone
        • Sending Code via WhatsApp
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
          • Add a new Trusted Device
          • Customization
    • Flutter
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
      • Sign in with Email/Phone Number
      • Getting the Logged-in User
      • Getting OAuth Tokens
      • Signing a User Out
    • iOS
      • Sign In with Email/Phone Number
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Push Notification
        • Check if Trusted Device is Enrolled
        • Add a New Trusted Device
        • Remove Trusted Device
      • Older Versions
        • Biometric/Pin
    • Android
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Check if Trusted Device is Enrolled
        • Add a new Trusted Device
        • Remove Trusted Device
        • Customization
      • Sign In with Email/Phone Number
      • Biometric/Pin
        • Advanced Methods
        • Customization
        • Setting Strings
        • Styling
      • Older SDK Version
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
    • Python (for CLI)
    • API for Other Mobile Apps or CLI
      • Verify Email/Phone Number
        • Handling URL Scheme
    • Backend: Handling Response
  • 🛡️ Protecting Your Account
    • Only Allow Your Website/App to Use Your API Key
    • Rate Limit
    • Enable reCAPTCHA to Protect Against Automated Abuse
  • 🗝️ Getting Access Token
    • Cotter's OAuth 2.0 Tokens Specification
    • Getting the Tokens
      • Get Tokens during Authentication
      • Using the Refresh Token
    • Storing and Removing Tokens
    • Renewing Expired Tokens
    • Verifying JWT Tokens
    • Requesting Custom Fields on your JWT Token
    • Older API
      • Using HTTP Requests
      • Getting the Tokens
        • During Authentication
          • During Email/Phone Verification
        • During enrolling Trusted Devices
  • 🔌API Reference
    • User API
      • User Object
    • OAuth Tokens API
      • Verify JWT Token using API (serverless)
      • Requesting Custom Claims on your Access Token
      • Older API
    • OAuth Tokens from Social Login
    • Event Object
    • Reset PIN API
  • Older API
    • Validating Cotter's Identity Token
    • Validating Cotter's Event Response
Powered by GitBook
On this page
  • What you're building
  • Steps
  • Step 1: Setup Cotter
  • Step 2: Show Cotter Auth Request Pop Up
  • What we have so far
  • Step 3: Receive Event Response Callback
  • Validate Cotter's Event Response
  • You're done!
  • Next Steps
  1. SDK Reference
  2. Web
  3. Sign In with Device

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

PreviousSign In with DeviceNextAdvanced Customization for Login Form

Last updated 4 years ago

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.

What you're building

Steps

Step 1: Setup Cotter

Include Javascript SDK

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

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>

Configuration

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

Step 2: Show Cotter Auth Request Pop Up

To show the the popup

<script>
  cotterAuthReq.show();
</script>

What we have so far

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

Step 3: Receive Event Response Callback

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.

Validate Cotter's Event Response

Learn how to validate Cotter's event response here:

Next Steps

Customize your Pop Up prompt

Make sure you have done the before you proceed.

with your API_KEY_ID and some config

.

You should in the event response to ensure this is valid and it comes from Cotter's server.

You're done!

📘
🎉
Check out how you can customize the form and change the configuration
Validating Cotter's Event Response
Advanced Customization for Pop Up Authentication Prompt
Setup Cotter
Show Cotter form
Receive a Event Response in OnSuccess
verify the signature
Cotter's Authentication Request Modal
Required Steps