Angular: Send Email, SMS, and WhatsApp Verification Code to New Users Worldwide
Tags: guides, tutorials
Published: 2020-08-06 19:13:44

---
title: Angular: Send Email, SMS, and WhatsApp Verification Code to New Users Worldwide
published: true
date: 2020-08-06 17:00:00 UTC
tags: Guides,Tutorials
canonical_url: https://blog.cotter.app/angular-send-email-sms-and-whatsapp-verification-code-for-new-users-worldwide/
---

*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.*

 ![Angular: Send Email, SMS, and WhatsApp Verification Code to New Users Worldwide](https://blog.cotter.app/content/images/2020/05/AngularEmailVerification.png)

## 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](https://codesandbox.io/s/angular-example-empty-k83uq?file=/src/app/app.component.html).**

<!--kg-card-begin: html-->
<iframe src="https://codesandbox.io/embed/angular-example-empty-k83uq?autoresize=1&amp;fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2Fapp%2Fapp.component.html&amp;theme=dark" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" title="angular-example-empty" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<!--kg-card-end: html-->

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:

```html
<!-- 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

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

```javascript
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](https://dev.cotter.app/) at Cotter, then create a Project and take notes of the API Keys.

# Give it a try
<!--kg-card-begin: html-->
<iframe src="https://codesandbox.io/embed/angular-example-complete-0sgo9?fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2Fapp%2Fapp.component.ts&amp;theme=dark&amp;view=preview" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" title="angular-example-complete" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<!--kg-card-end: html-->
1. Enter your email address and sign in.
2. Check the response for an access token.

Check out [the complete project here](https://codesandbox.io/s/angular-example-complete-0sgo9?file=/src/app/app.component.ts).

### 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](https://docs.cotter.app/verify-email-and-phone-number/how-it-works) 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.

```javascript
// ⭐ 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](https://dev.cotter.app/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](https://dev.to/putrikarunia/say-goodbye-to-passwords-the-easy-way-to-add-sign-in-with-device-to-your-react-native-app-in-5-minutes-5fcn-temp-slug-3446988).

* * *

### Questions & Feedback

If you have any questions or feedback, feel free to join [Cotter's Slack Channel](https://join.slack.com/t/askcotter/shared_invite/zt-dxzf311g-5Mp3~odZNB2DwYaxIJ1dJA) 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](https://dev.cotter.app/) and [check out our documentation](https://docs.cotter.app/).

<aside><br></aside>