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.
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
Let's start by verifying the user's email before we jump to sending SMS or WhatsApp messages.
Cotter is already added to the CodeSandbox above. To add Cotter to your local project, you can use yarn
or npm
.
yarn add cotter
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>
src/app/app.component.ts
and show the formimport { 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.
Enter your email address and sign in.
Check the response for an access token.
Check out the complete project here.
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 email and phone number again as long as it's accessed from the same browser.
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 Formvar 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.
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.
Now that you can verify your users' emails and phone numbers, you can start registering and logging users in.
Follow this guide on how to Setup Passwordless Login.
If you have any questions or feedback, feel free to join Cotter's Slack Channel and chat us there.
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.