In this tutorial, we'll create a new Angular website and add a simple email and phone number verification. To verify the user's phone number, we'll give the options to send the code via SMS or WhatsApp.

Get Started

We'll be using this CodeSandbox so you can try it out without any setup. Open it in a new tab to make it easier to edit the code.

If you want to make a new Angular app locally, first install the cli

npm install -g @angular/cli

then create a new Angular app:

ng new my-app
cd my-app
ng serve --open

Verifying user's Email

Let's start by verifying the user's email first before we jump to sending SMS or WhatsApp messages.

Installing Dependencies

Cotter is already added to the CodeSandbox above. To add Cotter to your local project, you can use yarn or npm.

yarn add cotter cotter-token-js

Step 1: Setup a div to contain Cotter's verification form in src/app/app.component.html

Add a div with id="cotter-container-signup" below our title:

<!-- 1️⃣ Setup a div to contain the form -->
<div
  id="cotter-container-signup"
  style="width: 300px; height: 200px;"
></div>

Step 2: Import Cotter in src/app/app.component.ts and show the form

// 2️⃣ Import Cotter
import { CotterVerify } from 'cotter'; // for showing the form
import { CotterIdentity } from 'cotter-token-js'; // for Validating the user response from Cotter
export class AppComponent implements OnInit {
  title = 'My Cotter App';


  // 2️⃣ Initialize and show the form on init
  success = false;
  payload = null;
  payloadString = null;
  tokenValid = false;

  constructor() {}

  ngOnInit() {
    // ⭐ Configuration
    var config = {
      ApiKeyID: API_KEY_ID, // 👈 Specify your API KEY ID here
      Type: 'EMAIL',
      IdentifierField: 'email',
      ContainerID: 'cotter-container-signup',
      OnSuccess: (payload) => {
        this.success = true;
        this.payload = payload;
        this.payloadString = JSON.stringify(payload, null, 4);
      },
    };
    var cotter = new CotterVerify(config);
    cotter.showForm();
  }

}

You need to add your API_KEY_ID here. Create a free account at Cotter, then create a Project and take notes of the API Keys.

Step 3: Validate the user response from Cotter

// 3️⃣ Validate the user response from Cotter
validateToken() {
    var cotterIdentity = new CotterIdentity(this.payload.token);
    this.tokenValid = cotterIdentity.validate();
}

Give it a try

  1. Enter your email address and sign in.
  2. Press "Validate User Info" to check if Cotter's user information is coming and originating from Cotter.

Check out the complete project here.

Not Prompted to Enter a Verification Code?

That's the magic! Cotter's email verification works across apps. If the user's email/phone number is already verified, apps that integrate Cotter don't need to re-verify their email and phone number again as long as it's accessed from the same browser.

Verify the Phone Number via SMS or WhatsApp

It's very easy to update the code above to ask for the user's phone number instead. Update the config above:

  • Change Type to PHONE .
  • Add PhoneChannels: ["SMS", "WHATSAPP"] .
// ⭐ Configuration
var config = {
    ApiKeyID: API_KEY_ID,
    Type: 'PHONE', // 👈 Update type to PHONE
    IdentifierField: 'phone',
    PhoneChannels: ["SMS", "WHATSAPP"], // 👈 Specify the messaging channels

    ContainerID: 'cotter-container-signup',
    OnSuccess: (payload) => {
        this.success = true;
        this.payload = payload;
        this.payloadString = JSON.stringify(payload, null, 4);
    },
};

To send an SMS or a WhatsApp message, you need to add some balance to your account. Go to Billing and add a payment method to start sending phone verification codes.

A Note on Validating User Response

We showed you how to validate Cotter's user response in the frontend part of your project. It's recommended to validate the response in your backend, right before you register the user to your database.

What's Next?

Now that you can verify your user's email and phone numbers, you can start registering and logging in users.

Follow this guide on how to Setup Passwordless Login so you can allow users to sign in with their device instead of using passwords or magic links.


Questions & Feedback

If you have any questions or feedback, feel free to join Cotter's Slack Channel and chat us there.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.