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
  • Customize the Form from the Dashboard
  • Advanced Configuration Reference
  • Description
  • RedirectURL
  • Skip RedirectURL
  • Additional Fields
  • OnBegin
  • OnSuccess
  • CountryCode
  1. SDK Reference
  2. Web
  3. Sign In with Email/Phone Number
  4. Older SDK

Customize the Form

PreviousOlder SDKNextSign in with Social Login

Last updated 4 years ago

Customize the Form from the Dashboard

You can now customize the form from > Branding.

Customizable Features that are not available in the Dashboard:

Advanced Configuration Reference

You can use our advanced config to have more functionality:

Usage:

var cotter = new Cotter(config); // 👈 Put the config in here

  cotter
    .signInWithLink()
    .showEmailForm()
    .then(payload => {})
    .catch(err => {});

Config:

Here's an example of a complete configuration:

var config = {
  // Required Basic Configuration
  ApiKeyID: "<your-API-KEY-ID>",
  Type: "PHONE", // EMAIL or PHONE
  ContainerID: "cotter-container-signup",
  RedirectURL: "https://yourwebsite.com/account/create",
  SkipRedirectURL: false,
  IdentifierField: "phone",
  OnSuccess: payload => {
    // SET Token Cookie/localstorage here
    window.localStorage.setItem("access_token", payload.access_token);
    window.localStorage.setItem("refresh_token", payload.refresh_token);
    window.location.href = "/signin";
  },

  // Change Country Code
  CountryCode: ["+62"], // IT HAS TO BE AN ARRAY

  // Styling
  ButtonBackgroundColor: "#000000",
  ButtonTextColor: "#ffffff",
  ButtonText: "Sign Up Now",
  ButtonBorderColor: "#D2D3FF", // don't specify for no border

  // Adding fields
  AdditionalFields: [
    {
      label: "Full Name",
      name: "name",
      placeholder: "Enter your full name"
    }
  ],

  // Intercepting before authentication is processed
  OnBegin: payload => {
    if (payload.identifier != "+12345678910") {
      return "Phone Number is not allowed";
    }
    return null;
  }
  
  // Add WhatsApp option to send verification code
  // (only for type = PHONE)
  // ################################################
  // # 👈Please read the section about WhatsApp 👈 #
  // #       to comply with WhatsApp's Policy       # 
  // ################################################
  PhoneChannels: ["SMS", "WHATSAPP"], // default = ["SMS"]
  
  // WhatsApp Button Styling
  ButtonWAText: "Continue with",
  ButtonWATextSubtitle:
    "Tell your customer that you'll be sending the verification code via WhatsApp",
  ButtonWABackgroundColor: "#128C7E",
  ButtonWABorderColor: "#075E54",
  ButtonWATextColor: "#ffffff",
  ButtonWALogoColor: "white",
};

Description

Field Name

Description

Required

ApiKeyID

your API_KEY_ID

Y

Y

Type

"EMAIL" or "PHONE"

Y

ContainerID

id of the <div> where you want to serve Cotter Form.

Y

ButtonBackgroundColor

Button background color. Use HEX format (e.g. #000000)

N

ButtonTextColor

Button text color. Use HEX format (e.g. #FFFFFF)

N

ButtonText

Button text. Default is "Sign Up Without Password"

N

N

IdentifierField

Field name for the identifier to include in the JSON obj. For example, if you want to include the phone number in the JSON obj under key "phone", then fill in IdentifierField = "phone"

Y

N

Y

An Array of country code options for the user

N

PhoneChannels

An Array of channels to send verification code to your users. Default value is ["SMS"].Available values are SMS and WHATSAPP. For example, to allow both SMS and WhatsApp, specify ["SMS", "WHATSAPP"]

N

RedirectURL

We will send a JSON Object to this backend URL. The JSON Object will have the following format:

{
  "token": {
    "identifier": "+12345678910",
    "identifier_type": "PHONE",
    "receiver": "<your API_KEY_ID>",
    "expire_at": "1582679175", // Unix timestamp
    "signature": "7en+KvbLpMkA7Z93K5y3a12tDo2x3n..." //Signature
  },
  [IdentifierField]: "+12345678910",

  // Additional Fields
  "field_1": "Value inside field 1",
  "field_2": "Value inside field 2",
  ...
}

Description:

payload.Token

payload.IdentifierField

This field name will be the same as what you specify in the config above. For example, if your IdentifierField = "PHONE", you'll get

{
  ...
  "PHONE": "+12345678910",
}

payload.AdditionalFields

The rest will be filled with any additional fields you specify in the config. For example if you add fields for "name" and "address", you'll get:

{
  ...
  "name": "Hello World",
  "address": "123 Street",
}

Skip RedirectURL

If you want to handle Cotter's token in a function instead of sending it to your backend redirect_url, you can specify

{
  ...
  SkipRedirectURL: true,
}

Additional Fields

The additional fields will be used to generate more <input> fields for your users. The format is as following:

var config = {
  ...
  AdditionalFields: [
          {
            label: "Full Name",
            name: "name",
            placeholder: "Enter your full name"
          },
          {
            label: "Address",
            name: "address",
            placeholder: "Enter your address"
          },
          {
            label: "Prefilled Info",
            name: "prefilled",
            type: "hidden", // type can be "hidden", "text" or "number"
            initial_value: "autofill value"
          }
        ],
}

Available types: hidden, text, number

JSON Object to be sent to RedirectURL:

{
  "token": {...},
  [IdentifierField]: "+12345678910",

  // Additional Fields
  "name": "Hello World",
  "address": "Street Address",
  "prefilled": "autofill value"
  ...
}

OnBegin

This function will be invoked before the Signup/Login process. You will receive the following payload as a parameter to your function

Payload passed into your OnBegin function

var payload = {
  identifier: "+12345678910",
  identifier_type: "PHONE",
  device_type: "BROWSER",
  device_name: "Chrome ..."
};

You can do a check against the identifier here before the form is submitted.

If you include OnBegin key, you have to either return an error string, or return null if you want to continue the authentication process:

A. If you want to continue submission:

return null;

B. If you want to stop submission with an error:

return "Your error message";

Example:

 OnBegin: payload => {
  if (payload.identifier != "+12345678910") {
    return "Phone Number is not allowed";
  }
  // No error, continue submission
  return null;
},

OnSuccess

This function will be called after the call to RedirectURL is successful. Your function will receive the payload returned from RedirectURL.

It is recommended to set your sessions or cookies here, and then redirect to another page in your website. For example:

OnSuccess: payload => {
  // You can set your own sessions for your website
  window.localStorage.setItem("access_token", payload.access_token);
  window.localStorage.setItem("refresh_token", payload.refresh_token);
  window.location.href = "/dashboard";
};

OnSuccess when SkipRedirectURL is true

CountryCode

The default value is CountryCode: ["+1"];

If you specify this, you have to use an array even though you only need 1 country code!

ex. with 1 country code

CountryCode: ["+1"];

ex. with 2 country codes

CountryCode: ["+62", "+91"];

Currently, the only available countries are United States, India and Indonesia. Chat us on Intercom if you need other countries, we just need to switch it on.

The backend URL where we will send a containing form information and a token

true or false . If set to true, then it will skip sending the to the RedirectURL, and instead automatically pass it to .

Additional fields that you want to include in the JSON obj. Check the specs for below

A function that will be called before the signup process begin. Check the specs for below

A function that will be called when the signup process succeed. It's recommended to set your localStorage/cookies here and redirect to your dashboard. Check the specs for below

Contains the email or phone number of the user. You should to ensure that the request comes from Cotter's server.

Read how to specify below.

When this is true, the as specified in RedirectURL section will be passed into your function.

This will be sent to you to the endpoint above as part of the JSON object. For example, with the fields above, you'll get a JSON object like the following.

When you set SkipRedirectURL: true , OnSuccess will instead receive the JSON Payload token that was described in .

📘
Advanced Styling
Add custom fields
JSON payload
OnSuccess
RedirectURL section
SkipRedirectURL
JSON obj
OnSuccess
Cotter's Dashboard
Customizing the Form from Cotter
Authentication Flow if you use RedirectURL
Authentication Flow if you use SkipRedirectURL
verify the signature
Additional Fields Object
RedirectURL
RedirectURL
JSON obj
AdditionalFields
Additional Fields Object
OnBegin
OnBegin
OnSuccess
OnSuccess
CountryCode