twilio otp verification

Author: Himanshu Upreti

client/src/app/_services/auth.service.ts

@@ -54,6 +54,28 @@ export class AuthService {
     return user.token;
   }
 
+
+  public generateOtp(){
+    return this.http.post(
+      `${this.apiBaseUrl}/users/otp`,{}
+    );
+  }
+
+  
+
+  public verifyOtp(otp){
+    const params = {
+      otp: otp
+    };
+    return this.http.get(
+      `${this.apiBaseUrl}/users/otp`,{
+        params: params
+      }
+    );
+  }
+
+  
+
   public getUserDetails() {
     return this.http.get(
       `${this.apiBaseUrl}/users/details`

client/src/app/app.component.html

@@ -2,6 +2,26 @@
   <div id="navbar">
     <app-navbar></app-navbar>
   </div>
+  <div id="otp-banner" >
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-2" *ngIf="!otpGenerated">
+        <a class="button is-primary" (click)="generateOtp()">Click here to verify your Mobile Number</a>
+      </div>
+      <ng-container *ngIf="otpGenerated">
+        <div class="column is-2">
+          <div class="field">
+            <div class="control">
+              <input class="input" type="number" placeholder="OTP" [(ngModel)]="otp" name="otp" required>
+            </div>
+          </div>
+        </div>
+        <div class="column is-2">
+          <a class="button is-primary" (click)="verifyOtp()">Verify OTP</a>
+        </div>
+      </ng-container>
+
+    </div>
+  </div>
   <div id="body">
     <router-outlet></router-outlet>
   </div>

client/src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { SEOService } from './_services/seo.service';
+import { AuthService } from './_services/auth.service';
 
 @Component({
   selector: 'app-root',
@@ -8,10 +9,43 @@ import { SEOService } from './_services/seo.service';
 })
 export class AppComponent {
   title = 'relief-shelter';
+  user: any;
+  otp: any;
+  otpGenerated = false;
 
   constructor(
-    private seoService: SEOService
+    private seoService: SEOService,
+    private authService: AuthService
   ) {
     this.seoService.addSeoData();
   }
+
+  generateOtp(){
+    this.authService.generateOtp()
+      .subscribe(
+        (res) => {
+          this.otpGenerated= true;
+          
+        }
+      )
+  }
+  verifyOtp(){
+    this.authService.verifyOtp(this.otp)
+      .subscribe(
+        (res) => {
+          this.user.verifiedMobile =  true;
+        }
+      )
+
+  }
+  ngOnInit(): void {
+    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+    //Add 'implements OnInit' to the class.
+    this.authService.getUserDetails()
+      .subscribe(
+        (res) => {
+          this.user = res;
+        }
+      )
+  }
 }

client/src/app/home/home.component.ts

@@ -40,7 +40,7 @@ export class HomeComponent implements AfterViewInit {
       accessToken: mapboxgl.accessToken
     }));
 
-    this.sheltersService.getAllShelters()
+    this.sheltersService.getAllShelters(72,72,50)
       .subscribe(
         (res) => {
           var i = 0;

client/src/environments/environment.ts

@@ -7,6 +7,7 @@ export const environment = {
   apiBaseUrl: 'http://localhost:3000/api',
   mapboxAccessToken: 'pk.eyJ1Ijoicm9oaXRycCIsImEiOiJjam5vejdtYmYyMG1tM3FzNXA1YnVib3JiIn0.5x5lvYoSAxmmc3EQAg19og',
   googleMapsAPIKey: 'AIzaSyDoaA5lB4-JbSXElDWllnNU3QcArgxdreM'
+  
 };
 
 /*

package-lock.json

@@ -31,7 +31,8 @@ const userModel = new Schema({
     firstName: { type: String },
     lastName: { type: String },
     mobileNumber: { type: Number },
-    aadharNumber: { type: Number }
+    aadharNumber: { type: Number },
+    verifiedMobile: {type: Boolean, default: false }
 
 });
 module.exports = mongoose.model('User', userModel);

server/api/users/model/User.js

@@ -0,0 +1,50 @@
+var rp = require('request-promise');
+const User = require('../model/User')
+const authyBaseUrl = process.env.TWILIO_API_URL  
+const API_KEY = process.env.TWILIO_API_KEY
+
+module.exports = {
+  method: 'POST',
+  path: '/api/users/otp',
+  options: {
+    handler: async (request, h) => {
+        const user = await User.findOne({_id: request.auth.credentials.id})
+        const options = {
+            method:'POST',
+            url: `${authyBaseUrl}/start`,
+            form:{
+                api_key: API_KEY,
+                phone_number : user.mobileNumber,
+                via: 'sms',
+                country_code:91
+            }
+            
+        }
+        let res = await rp(options)
+        return {message: 'successful'}
+      },
+      auth: {
+        strategy: 'jwt'
+      },
+      // validate: {
+      //   payload: addShelterSchema
+      // },
+      description: 'Add shelter',
+      notes: 'Adds shelter',
+      tags: ['api', 'shelter']
+  }
+}
+
+
+// PhoneVerification.prototype.verifyPhoneToken = function (phone_number, country_code, token, callback) {
+
+//     console.log('in verify phone');
+//     this._request("get", "/protected/json/phones/verification/check", {
+//             "api_key": this.apiKey,
+//             "verification_code": token,
+//             "phone_number": phone_number,
+//             "country_code": country_code
+//         },
+//         callback
+//     );
+// };

server/api/users/routes/generateUserOTP.js

@@ -0,0 +1,53 @@
+var rp = require('request-promise');
+const User = require('../model/User')
+const authyBaseUrl = process.env.TWILIO_API_URL  
+const API_KEY = process.env.TWILIO_API_KEY
+
+module.exports = {
+  method: 'GET',
+  path: '/api/users/otp',
+  options: {
+    handler: async (request, h) => {
+        const user = await User.findOne({_id: request.auth.credentials.id})
+        const options = {
+            method:'GET',
+            url: `${authyBaseUrl}/check`,
+            form:{
+                api_key: API_KEY,
+                phone_number : user.mobileNumber,
+                via: 'sms',
+                country_code:91,
+                verification_code: request.query.otp
+            }
+            
+        }
+        // console.log(options)
+        let res = await rp(options)
+        // console.log(res)
+        return res
+      },
+      auth: {
+        strategy: 'jwt'
+      },
+      // validate: {
+      //   payload: addShelterSchema
+      // },
+      description: 'Add shelter',
+      notes: 'Adds shelter',
+      tags: ['api', 'shelter']
+  }
+}
+
+
+// PhoneVerification.prototype.verifyPhoneToken = function (phone_number, country_code, token, callback) {
+
+//     console.log('in verify phone');
+//     this._request("get", "/protected/json/phones/verification/check", {
+//             "api_key": this.apiKey,
+//             "verification_code": token,
+//             "phone_number": phone_number,
+//             "country_code": country_code
+//         },
+//         callback
+//     );
+// };