Seeking assistance for implementing auto OTP verification in a project I am working on. After the user enters their phone number, I have come across some examples for Ionic 1 with Angular 1 online. However, I am specifically looking for examples using Ionic 3 with TypeScript. Any help or examples would be greatly appreciated. Thank you!
Allow me to present an idea involving automated OTP verifications for various purposes, including password recovery.
Requirements:
1. Backend Server
2. SMS Server
3. Ionic app
4. Understanding of REST API
You have the option to set up two REST API URLs that will prompt the backend to send the SMS OTP. Here is an example:
1. /sendOtp - a backend API that Ionic calls to send the OTP
Ionic app -> sendOTP API -> SMS server -> Ionic app
a. Ionic app: Sends information like phone number and type (e.g., reset-password) along with a generated reference code.
b. sendOTP API: Generates a 6-digit OTP, saves it in the database, and sends it to the SMS server.
c. SMS server: Sends the OTP to the provided phone number.
d. Ionic app: Displays the OTP page while waiting for the OTP.
2. /verifyOtp - a backend API that verifies the OTP generated from the backend and matches it to the database.
Ionic app -> verifyOtp API -> SMS server -> Ionic app
a. Ionic app: Upon receiving the OTP digits, it sends the OTP along with the reference code to the verifyOtp API.
b. verifyOtp API: Accepts and checks if the OTP matches the database, then generates a temporary password.
c. SMS Server: Sends the temporary password to the Ionic app.
d. Ionic app: Can display a thank you page or redirect to a password change screen.
You can design the APIs based on your specific requirements.
Content When testing a service that needs one parameter in the constructor, it's essential to initialize the service as a provider using an object instead of directly passing the service through: auth.service.ts (example) @Injectable() export class ...
I've encountered an issue trying to use .env variables in my Vue app. When I ran npm install process, the only syntax that didn't result in an error when importing was: import * as process from 'process'; Prior to this, I received the ...
I am currently working on a project in TypeScript using Node.js and Jest. I have a function that may or may not modify a global variable, which is a TypeScript Map. After one test modifies the global variable, it retains that value for subsequent tests. I ...
My ASP.NET web API has a simple method with the following test results: $ curl localhost:5000/Api/GetAllQuestions [{"questionId":0,"value":"qqq","answers":[{"answerId":25,"value":"qwerty"}]}] However, I am encountering an issue in my Angular 2 HTTP serv ...
I have an issue with a possible duplicate question. I currently have an input box where the value is being set using ngModel. Now I need to fetch that value and store it in typescript. Can anyone assist me on how to achieve this? Below is the HTML code: ...
I encountered an issue with the routing code in my Nativescript app. Here is the code snippet: const routes: Routes = [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [ {path: 'fp&apos ...
When using NestJS API App with HttpService to call another API, the functionality works successfully without any custom interceptors. However, the issue arises when attempting to view the response from the called API. The following code snippet showcases ...
My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...
I have implemented Nebular auth for my Angular application. I am trying to include a token in the header when a user logs in. Below is the API response: { "status": 0, "message": null, "data": { "type": &qu ...
Is it possible to dynamically add and remove classes using getElementById in Angular 8? I need to switch from 'col-md-12' to 'col-md-6' when a user clicks on the details icon. I also want to modify the style of another div by setting d ...
I've been working on loading dynamic field forms based on input from an HTTP service. The service provides metadata about which fields to load, including the name and type of each field. Therefore, I need to dynamically build the formGroup in ngOnInit ...
Is there a way to use the fetch method with a relative path like this: export async function getServerSideProps() { // Fetch data from local API const res = await fetch(`/api/get_all_prices`) const data = await res.json() // Pass data to th ...
There are some keys in the package.json file of Angular 2/4's source code that remain undocumented: { "name": "@angular/platform-browser/animations", "typings": "../animations.d.ts", "main": "../bundles/platform-browser-animations.umd.js", "m ...
I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...
After downloading node.js, I encountered errors when trying to run the CLI command npm install -g @angular/cli: npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/@angular%2fcli failed, reason: getaddrin ...
Situation Currently, I am developing a web application using Typescript/Angular2 RC1. In my project, I have two classes - Class1 and Class2. Class1 is an Angular2 service with a variable myVar = [obj1, obj2, obj3]. On the other hand, Class2 is an Angular2 ...
Utilizing the power of useEffect, I am fetching data from two different APIs to build an array. My goal is to access this array outside of useEffect and utilize it in the return statement below to render points on a map. However, when trying to access it ...
Seeking solution for the error below, unsure where to begin. While attempting to compile my Ionic project for iOS, encountering the following issue: $ ionic cordova build ios .... /Plugins/cordova-plugin-googleplus/GooglePlus.h:2:9: fatal error: 'Goog ...
Imagine having a class with two methods declared for exclusive use within that class. // 1. private get something() { return 0; } // 2. private getSomething() { return 0; } While I am familiar with getters and setters, I'm intrigued to know if ther ...
I am passing the 'TotalUnits' value to the Dialog and updating it there. However, I am having trouble retrieving the updated value back in the 'dialog.result'. Can anyone provide some assistance? Main Component: Open AllocationDialog( ...