Angular: Send Email, SMS, and WhatsApp Verification Code to New Users Worldwide
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.
If you want to make a new Angular app locally, first install the cli
then create a new Angular app:
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 cotterStep 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:
Step 2: Import Cotter in src/app/app.component.ts and show the form
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 their email and phone number again as long as it’s accessed from the same browser.
Verify 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 > Brandingto show buttons for SMS and WhatsApp.
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 users in.
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.
Originally published at https://blog.cotter.app on May 19, 2020.
