What is Cotter and how to use it?
Tags: angular, cotter, passwordlesslogin
Published: 2020-03-31 18:55:37

`Cotter` is a utility that allows you to make `One-Click Secure Phone Number Login` 

![Cotter](https://gblobscdn.gitbook.com/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M0QOU_rL9r08lVNyw5Y%2F-M0QTE8Pzis5XWQdXHFq%2Fimage.png?alt=media&token=b20a9e64-ec68-4ec5-800d-36c0277450e3)

You can use it in:

1- Passwordless Login from Trusted Devices.
2- In-app QR Code for new devices.
3- In-app Time-based OTP for new devices.
4- Fallback Method using OTP via SMS, WhatsApp, Telegram and email.

**Step #1**
[Setup Cotter ](https://dev.cotter.app/) with your `API_KEY_ID` and some config to initial `cotter`
```javascript
<script
  src="https://js.cotter.app/lib/cotter.js"
  type="text/javascript">
</script>
```
put this code in your js file
```javascript
<script>
var config = {
  ApiKeyID: "***************",
  
  // Type of identity your want to collect: EMAIL or PHONE
  Type: "PHONE",
  
  // div id of the container for Cotter Form
  ContainerID: "cotter-container-signup",
  
  // We will send a POST request to your RedirectURL when authentication succeeds
  RedirectURL: "https://yourwebsite.com/account/create",
  
  // the JSON key for the phone number or email to be posted to RedirectURL
  // Read more on RedirectURL JSON Object below
  IdentifierField: "phone",
  
  // After calling your RedirectURL, we will pass whatever JSON response
  // your server returned, into your OnSuccess function as the payload parameter
  // This is a good place to set your sessions and redirect to a dashboard.
  OnSuccess: payload => {

  }
};
 var cotter = new Cotter(config);
</script>
```

**Step #2**

Add the `<div>` container to your html.
```html
<div id="cotter-container-signup"></div>
```
`id` the of div shoud equal the `ContainerId` in config.

and now `run`😁

```javascript
 cotter.showForm();
```
the payload of onSuccess function will be like this:
```json
{
  "session": "lqjl2k3a3cm809q8g2nqp2tjcl",
  [IdentifierField in config]: "+ your phone number",
  "id": "fk3j20gh-cd0d-a23j-1kf3-39f128mq2l43"
}
```

if you're using angular js

```javascript
$scope.$on('$viewContentLoaded', function () {
  var config = {
  ApiKeyID: "***************",
  
  // Type of identity your want to collect: EMAIL or PHONE
  Type: "PHONE",
  
  // div id of the container for Cotter Form
  ContainerID: "cotter-container-signup",
  
  // We will send a POST request to your RedirectURL when authentication succeeds
  RedirectURL: "https://yourwebsite.com/account/create",
  
  // the JSON key for the phone number or email to be posted to RedirectURL
  // Read more on RedirectURL JSON Object below
  IdentifierField: "phone",
  
  // After calling your RedirectURL, we will pass whatever JSON response
  // your server returned, into your OnSuccess function as the payload parameter
  // This is a good place to set your sessions and redirect to a dashboard.
  OnSuccess: payload => {
    // you can SET your own cookie/session here
    window.localStorage.setItem("session", payload.session);
    // you can also redirect users to your dashboard
    window.location.href = "/dashboard";
  }
  CountryCode:["+961","+963","+971","+970"],
};
 var cotter = new Cotter(config);
 cotter.showForm();
});
```

this is a full example
{% codepen https://codepen.io/mohammedaktaa/pen/BaNbRbj %}

also you can test it with email instead of phone
{% codepen https://codepen.io/mohammedaktaa/pen/zYvKqar %}