Validating a User Phone Number With SMS on Auth0 Using ZENVIA

In this article, an application will be created using Angular where a simple WEB application will be built using the platform to authenticate, authorize and manage the identity of the user and the platform to integrate with the SMS channel in order to validate the user phone. Auth0 ZENVIA SMS (Short Message Service) is a communication protocol that uses the carriers' infrastructure, with the purpose of sending and receiving text messages with up to 160 characters. Create an account on the ZENVIA platform is a platform that empowers companies to create unique communication experiences for their customers through SMS, WhatsApp, Voice, Facebook Messenger, WEB Chat, and RCS channels. ZENVIA Let's create the account. We will access the site and click on the link . 1. https://app.zenvia.com Create your account Now we will fill in the fields , , , click on the option and click on the button . 2. Name E-mail Password I'm not a robot Create account After create the account, we will check the registered email. 3. Now we will click on the button in the email sent. 4. YES IT'S ME! CONFIRM IT :) After confirm the email, we will fill in the field and click on the button . 5. E-mail Next Now we will fill in the field and click on the button . 6. Password Sign in Next, we will fill in the field and click on the button to validate your phone number. 7. Enter your phone number Continue Now we will fill in the field with code you received on your mobile phone and click on the button . 8. Enter the 6-digit code Continue Ready! Your account was created. 9. Create the sandbox on the ZENVIA platform is a very popular concept among developers, where it is possible to test some functionality of a platform without hiring the service. Therefore, it needs to be intuitive and without bureaucracy. Sandbox Let's create the Sandbox in the SMS channel. We will click on the menu and . 1. Solutions Sandbox Now we will click on the button . 2. Create New Next, we will select the option and click on the button . 3. SMS Next After select the option , we will scan the QR Code or send the keyword to the number using your SMS message application. 4. SMS north-broom 28577 Notes: This registration is required for the ZENVIA platform to register the number(s) you would like to test, making it impossible to send the message to any mobile phone. It is possible to register other numbers using the same procedure. You will receive a message on your mobile phone confirming the registration of your number. 5. The number(s) registered will be displayed on the screen, as well as the limit of 200 messages in a 24-hour period. Now we will click on the button . 6. Next Note: When the 24-hour period is reached, register the number(s) again to start a new cycle of 200 messages in the 24-hour period. If you use the 200 messages, you will have to wait a period of 24 hours. After registering the number(s), we will test sending a text message. Select the number you want to send in the field , fill in the message in the field and click on the button . Copy the token in the parameter and, in my case, the token was generated because this token will be configured on the Auth0 platform. Click on the button . 7. To Message Send message X-API-TOKEN UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI Next Notes: In the field , as it is a Sandbox, a random word is created that corresponds to the integration identifier when the service is contracted. From In the field , an example of a request using the tool is displayed. You can simulate this same request using other tools like or . Request curl Postman Insomnia In the field displays the request-response in JSON format. Response Next, the text message is sent to the selected number. 8. In this article, we don't need to create a subscription for the webhook. We will click on the button . 9. Finish Ready! Sandbox created for the SMS channel and number configured. API documentation is available at . 10. https://zenvia.github.io/zenvia-openapi-spec/ Create an account on the Auth0 platform is an adaptable and easy-to-implement authentication and authorization platform. Auth0 Let's create the account. We will access the site and click on the button . 1. https://auth0.com/ Sign up Now we will fill in the field and click on the button . 2. Email Continue Next, we will fill in the field and click on the button . 3. Password Continue Then, we will click on the option and click on the button . 4. Personal NEXT After creating the account, we will check the registered email. 5. Ready! Your account was created. 6. Configure the Auth0 platform Let's configure the Auth0 platform. We will click on the menu and click on the menu . 1. Applications Applications Now we will click on the link with the application name. 2. Next, we will copy the domain that has been generated, in my case, the domain was copied, copy the that has been generated, in my case, the was copied, select the option in the field , fill in the fields , , and click on the button . 3. dev-5tf99p7c.us.auth0.com Client ID Client ID GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG Single Page Application Application Type Allowed Callback URLs Allowed Logout URLs Allowed Web Origins, Save Changes After creating the application, we will click on the menu and click on the menu . 4. Actions Flows Now we will click on the box . 5. Send Phone Message After selecting the flow, we will click on the menu . 6. Custom Now we will click on the link . 7. Create Action Next, we will fill in the field , select the option in the field , select the option in the field and click on the button . 8. Name Send Phone Message Trigger Node 16 (recommended) Runtime Create After creating the flow, we will click on the key icon. 9. Now we will click on the link . 10. Add Secret Next, we will fill in the field with the value and with the value created in the Sandbox of the ZENVIA platform and click on the button . 11. Key ZENVIA_TOKEN Value UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI Create Then, we will fill in the field with the value and with the value created in the Sandbox of the ZENVIA platform and click on the button . 12. Key ZENVIA_FROM Value north-broom Create After creating the keys, we will click on the dependency icon. 13. Now we will click on the link . 14. Add Dependency Next, we will fill in the field with the value and click on the button . 15. Name @zenvia/sdk Create Then, we will fill in the editor with the JavaScript code below and click on the button . 16. Deploy const { Client, TextContent } = require('@zenvia/sdk'); /** * Handler that will be called during the execution of a SendPhoneMessage flow. * * @param {Event} event - Details about the user and the context in which they are logging in. */ exports.onExecuteSendPhoneMessage = async (event) => { const text = event.message_options.text; const recipient = event.message_options.recipient; const client = new Client(event.secrets.ZENVIA_TOKEN); const sms = client.getChannel('sms'); return sms.sendMessage(event.secrets.ZENVIA_FROM, recipient, new TextContent(text)) }; After configuring the script, we will click on the link . 17. Back to flow Now we will click on the tab . 18. Custom Next, we will drag the action between the actions and . 19. ZENVIA SMS Start Complete After add the action, we will click on the menu and click on the menu . 20. Security Flows Now we will click on the box . 21. Phone Message Next, we will click on the button to enable the message by phone, click on the boxes and and click on the button . 22. Custom SMS Save After enabling the message by phone, we will click on the box and click on the button . 23. Always Save Ready! Application, SMS message sending action, and multi-factor authentication (MFA) configured. Auth0 documentation is available at . 24. https://auth0.com/docs Create the Angular application is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project. Angular Let's create the application with the Angular base structure using the Angular CLI tool with the route file and the SCSS style format. 1. ng new angular-auth0-zenvia-sms --routing true --style scss CREATE angular-auth0-zenvia-sms/README.md (1075 bytes) CREATE angular-auth0-zenvia-sms/.editorconfig (274 bytes) CREATE angular-auth0-zenvia-sms/.gitignore (548 bytes) CREATE angular-auth0-zenvia-sms/angular.json (3315 bytes) CREATE angular-auth0-zenvia-sms/package.json (1087 bytes) CREATE angular-auth0-zenvia-sms/tsconfig.json (863 bytes) CREATE angular-auth0-zenvia-sms/.browserslistrc (600 bytes) CREATE angular-auth0-zenvia-sms/karma.conf.js (1441 bytes) CREATE angular-auth0-zenvia-sms/tsconfig.app.json (287 bytes) CREATE angular-auth0-zenvia-sms/tsconfig.spec.json (333 bytes) CREATE angular-auth0-zenvia-sms/.vscode/extensions.json (130 bytes) CREATE angular-auth0-zenvia-sms/.vscode/launch.json (474 bytes) CREATE angular-auth0-zenvia-sms/.vscode/tasks.json (938 bytes) CREATE angular-auth0-zenvia-sms/src/favicon.ico (948 bytes) CREATE angular-auth0-zenvia-sms/src/index.html (307 bytes) CREATE angular-auth0-zenvia-sms/src/main.ts (372 bytes) CREATE angular-auth0-zenvia-sms/src/polyfills.ts (2338 bytes) CREATE angular-auth0-zenvia-sms/src/styles.scss (80 bytes) CREATE angular-auth0-zenvia-sms/src/test.ts (745 bytes) CREATE angular-auth0-zenvia-sms/src/assets/.gitkeep (0 bytes) CREATE angular-auth0-zenvia-sms/src/environments/environment.prod.ts (51 bytes) CREATE angular-auth0-zenvia-sms/src/environments/environment.ts (658 bytes) CREATE angular-auth0-zenvia-sms/src/app/app-routing.module.ts (245 bytes) CREATE angular-auth0-zenvia-sms/src/app/app.module.ts (393 bytes) CREATE angular-auth0-zenvia-sms/src/app/app.component.scss (0 bytes) CREATE angular-auth0-zenvia-sms/src/app/app.component.html (23364 bytes) CREATE angular-auth0-zenvia-sms/src/app/app.component.spec.ts (1127 bytes) CREATE angular-auth0-zenvia-sms/src/app/app.component.ts (229 bytes) ✔ Packages installed successfully. Successfully initialized git. Now we will install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post . 2. Adding the Bootstrap CSS framework to an Angular application After installing and configuring the Bootstrap CSS framework, we will configure the variable with the Auth0 domain and the variable with the Auth0 Client ID in the and files as below. 3. auth0.domain auth0.clientId src/environments/environment.ts src/environments/environment.prod.ts auth0: { domain: 'dev-5tf99p7c.us.auth0.com', clientId: 'GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG', redirectUri: 'http://localhost:4200/profile', }, Now we will install the library. 4. @auth0/auth0-angular npm install @auth0/auth0-angular After install the Auth0 library, we will create the component. 5. SignInComponent ng generate component sign-in --skip-tests=true CREATE src/app/sign-in/sign-in.component.scss (0 bytes) CREATE src/app/sign-in/sign-in.component.html (22 bytes) CREATE src/app/sign-in/sign-in.component.ts (279 bytes) UPDATE src/app/app.module.ts (477 bytes) Now we will change the file. Import the service and create the method as below. 6. src/app/sign-in/sign-in.component.ts Router signIn import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-sign-in', templateUrl: './sign-in.component.html', styleUrls: ['./sign-in.component.scss'], }) export class SignInComponent { constructor(private router: Router) { } public signIn(): void { this.router.navigate(['/profile']); } } Next, we will change the file. Add the lines as below. 7. src/app/sign-in/sign-in.component.html Sign in After create the component, we will create the component. 8. SignIn ProfileComponent ng generate component profile --skip-tests=true CREATE src/app/profile/profile.component.scss (0 bytes) CREATE src/app/profile/profile.component.html (22 bytes) CREATE src/app/profile/profile.component.ts (280 bytes) UPDATE src/app/app.module.ts (710 bytes) Now we will change the file. Import the service and add the lines as below. 9. src/app/profile/profile.component.ts AuthService import { Component, OnInit } from '@angular/core'; import { AuthService } from '@auth0/auth0-angular'; @Component({ selector: 'app-profile', templateUrl: './profile.component.html', styleUrls: ['./profile.component.scss'], }) export class ProfileComponent implements OnInit { user: any; constructor(private authService: AuthService) { this.user = {}; } public ngOnInit(): void { this.authService.user$.subscribe((success: any) => { this.user = success; }); } } Next, we will change the file and add the lines as below. 10. src/app/profile/profile.component.html Email: Nickname: After create the component, we will change the file. Import the service and create the method as below. 11. Profile src/app/app.component.ts AuthService signOut import { Component, Inject, OnInit } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { AuthService } from '@auth0/auth0-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { isAuthenticated: boolean; constructor(@Inject(DOCUMENT) private document: Document, private authService: AuthService) { this.isAuthenticated = false; } public ngOnInit(): void { this.authService.isAuthenticated$.subscribe((success: boolean) => { this.isAuthenticated = success; }); } public signOut(): void { this.authService.logout({ returnTo: this.document.location.origin, }); } } Now we will change the file and add the menu as below. 12. src/app/app.component.html Angular Auth0 ZENVIA SMS Sign in Profile Sign out Next, we will change the file and add the routes as below. 13. src/app/app-routing.module.ts import { AuthGuard } from '@auth0/auth0-angular'; import { ProfileComponent } from './profile/profile.component'; import { SignInComponent } from './sign-in/sign-in.component'; const routes: Routes = [ { path: '', redirectTo: 'signIn', pathMatch: 'full', }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], }, { path: 'signIn', component: SignInComponent, }, { path: '**', redirectTo: 'signIn', }, ]; Then, we will change the file. Import the and modules, the and components and configure the module as below. 14. src/app/app.module.ts FormsModule AuthModule ProfileComponent SignInComponent AuthModule import { FormsModule } from '@angular/forms'; import { AuthModule } from '@auth0/auth0-angular'; import { environment } from '../environments/environment'; import { SignInComponent } from './sign-in/sign-in.component'; import { ProfileComponent } from './profile/profile.component'; declarations: [ AppComponent, SignInComponent, ProfileComponent, ], imports: [ BrowserModule, FormsModule, AuthModule.forRoot(environment.auth0), AppRoutingModule, ], After change the module, we will run the application with the command below. 15. npm start > angular-auth0-zenvia-sms@1.0.0 start > ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Raw Size vendor.js | vendor | 2.43 MB | styles.css, styles.js | styles | 454.67 kB | polyfills.js | polyfills | 294.83 kB | scripts.js | scripts | 76.33 kB | main.js | main | 21.87 kB | runtime.js | runtime | 6.54 kB | | Initial Total | 3.27 MB Build at: 2022-03-31T20:10:33.566Z - Hash: 9c7286a62dfaa60c - Time: 5025ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully. Ready! We will access the URL and check if the application is working. See the application working on and . 16. http://localhost:4200/ GitHub Pages Stackblitz The application repository is available at . https://github.com/rodrigokamada/angular-auth0-zenvia-sms Test the application sign up and sign in Let's test the application sign-up. Access the URL and click on the button . 1. http://localhost:4200/ Sign in Now we will click on the button . 2. Sign up Next, we will fill in the fields , and and click on the button . 3. Email Address Password Continue After filling in the signup data, we will select the country code, fill in the field and click on the button . 4. Enter your phone number Continue Now we will copy the code that you received by SMS message. 5. Next, we will fill in the field with the code that you received by SMS message and click on the button . 6. Enter the 6-digit code Continue Next, we will click on the button . 7. Accept After confirming your phone, you will be redirected to the application. 8. Now we will check the registered email. 9. Ready! We tested the application sign-up with the phone validation by SMS message and the profile view. 10. Conclusion Summarizing what was covered in this article: We created an account on the ZENVIA platform. We created the sandbox on the ZENVIA platform. We created an account on the Auth0 platform. We configured the Auth0 platform. We created an Angular application. We tested the signup, sign-in, phone validation, and profile. You can use this article to add authentication, authorization, and identity management from the user to an Angular application and validate the user's phone by SMS message. Thank you for reading and I hope you enjoyed the article! This tutorial was posted on my in portuguese. blog Also Published here To stay updated whenever I post new articles, follow me on . Twitter