# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cotter.app/sdk-reference/web/web-sdk-passwordless-login/steps-for-pop-up-authentication-prompt.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.