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
- Enter your email address and sign in.
- 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.
Top comments (0)