In this tutorial, we'll add a simple email and phone number verification to an Angular app with an option to send the verification 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 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 

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

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

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

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

import { Component, OnInit } from '@angular/core';
import Cotter from 'cotter'; // 2️⃣ Import Cotter

export class AppComponent implements OnInit {
  title = 'My Cotter App';

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

  constructor() {}

  ngOnInit() {
     // ⭐ Show Email Form
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
    cotter
      .signInWithLink()
      .showEmailForm()
      .then((payload: object) => {
        this.success = true;
        this.payload = payload;
        this.payloadString = JSON.stringify(payload, null, 4);
      })
      .catch((err: any) => console.log(err));
  }
}

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.

Give it a try

1. Enter your email address and sign in.
2. Check the response for an access token.

Check out the complete project here.

Not Prompted to Click a Link?

That's the magic! Cotter's email verification works across apps. If the user's email/phone number is already verified, apps that are integrated with Cotter don't need to re-verify the user's 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 to showPhoneForm().
• Customize the form in the Dashboard > Branding to show buttons for SMS and WhatsApp.

// ⭐ Show Phone Form
var cotter = new Cotter(API_KEY_ID);
cotter
  .signInWithLink()
  .showPhoneForm() // 👈 Update type to PHONE
  .then((payload: object) => {
    this.success = true;
    this.payload = payload;
    this.payloadString = JSON.stringify(payload, null, 4);
  })
  .catch((err: any) => console.log(err));

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 users' emails and phone numbers, you can start registering and logging in users.

Follow this guide on how to Setup Passwordless Login.

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.