# Steps for Pop Up Authentication Prompt

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

![Cotter's Authentication Request Modal](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M3o-qnIbqCWhFZ3ufvc%2F-M3o22jdQ1gCzqvmCvSx%2Fimage.png?alt=media\&token=02459a1d-d0ac-44c5-99d7-9b3e059621bf)

{% hint style="info" %}
Make sure you have done the [Required Steps](https://docs.cotter.app/sdk-reference/web/web-sdk-passwordless-login/..#required-steps) before you proceed.
{% endhint %}

## Steps

1. [Setup Cotter](#step-1-setup-cotter) with your `API_KEY_ID` and some config
2. [Show Cotter form](#2-show-cotter-form)
3. [Receive a Event Response in `OnSuccess`](#step-3-receive-event-response-callback)

### Step 1: Setup Cotter

#### Include Javascript SDK <a href="#include-javascript-sdk" id="include-javascript-sdk"></a>

To use our Javascript SDK, include the script below in your HTML page.

```markup
<script
  src="https://js.cotter.app/lib/cotter.js"
  type="text/javascript"
></script>
```

#### Initialize Cotter <a href="#initialize-cotter" id="initialize-cotter"></a>

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.

```markup
<script>
  var cotterAuthReq = new CotterAuthRequest(config);
</script>
```

#### Configuration <a href="#configuration" id="configuration"></a>

Here's a basic configuration example:

```javascript
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](https://docs.cotter.app/sdk-reference/web/web-sdk-passwordless-login/advanced-customization-for-pop-up-authentication-prompt).

### Step 2: Show Cotter Auth Request Pop Up <a href="#id-2-show-cotter-form" id="id-2-show-cotter-form"></a>

To show the the popup

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

### What we have so far

```markup
<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:

```javascript
{
  "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..."
}
```

{% hint style="info" %}
You should [verify the signature](#validate-cotters-event-response) in the event response to ensure this is valid and it comes from Cotter's server.
{% endhint %}

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:

{% content-ref url="../../../older-api/validating-cotters-event-response" %}
[validating-cotters-event-response](https://docs.cotter.app/older-api/validating-cotters-event-response)
{% endcontent-ref %}

## :tada: You're done!

## Next Steps

Customize your Pop Up prompt

{% content-ref url="advanced-customization-for-pop-up-authentication-prompt" %}
[advanced-customization-for-pop-up-authentication-prompt](https://docs.cotter.app/sdk-reference/web/web-sdk-passwordless-login/advanced-customization-for-pop-up-authentication-prompt)
{% endcontent-ref %}