Issues with implementing Firebase Phone Authentication in Ionic 3

When trying to authenticate a phone number in Ionic 3 using Firebase, the program runs without error. However, after entering the phone number, nothing happens...

The .html code is shown below:

<ion-item>
<ion-label stacked>Phone Number</ion-label>
<ion-input type="number" [(ngModel)]="phoneNumber"></ion-input>
</ion-item>   
<button ion-button id="sign-in-button" (click)="signIn(phoneNumber)">Send OTP</button>
<ion-input type="number" placeholder="OTP" [(ngModel)]="code"></ion-input>
<button ion-button id="verify-in-button" (click)="verify()">Sign In</button>

The .ts file contains the following code:

 export class HomePage { 
 verificationId: any;
 code: string = "";
 phoneNumber: number;
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) { }

signIn(phoneNumber)
{
(<any>window).FirebasePlugin.verifyPhoneNumber("+91" + phoneNumber,60,(credential)=>{
this.verificationId = credential.verificationId;
}, (error)=> {     
alert("error" + error);
} );
}

verify()
{
let signInCredential = 
firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
firebase.auth().signInWithCredential(signInCredential).then((info)=>{
}, (error)=>{ 
alert("error" + error);
} )
}

}

I am unsure of what I might be missing...

angulartypescriptfirebasefirebase-authenticationionic3

Answer №1

If you're looking for a comprehensive guide on Firebase phone authentication, I recommend checking out this informative article by Jorge. It provides a step-by-step breakdown of all the necessary details.

handlePhoneNumberAuth(phoneNumber: number){
  const appVerifier = this.recaptchaVerifier;
  const phoneNumberString = "+" + phoneNumber;
  firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
    .then( confirmationResult => {
      // SMS sent. Prompt user to enter the code from the message for verification.
      let prompt = this.alertCtrl.create({
      title: 'Enter Confirmation Code',
      inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
      buttons: [
        { text: 'Cancel',
          handler: data => { console.log('Cancelled'); }
        },
        { text: 'Verify',
          handler: data => {
            confirmationResult.confirm(data.confirmationCode)
            .then(function (result) {
              // User successfully verified and signed in.
              console.log(result.user);
              // ...
            }).catch(function (error) {
              // User failed to sign in (incorrect verification code?)
              // ...
            });
          }
        }
      ]
    });
    prompt.present();
  })
  .catch(function (error) {
    console.error("SMS not sent", error);
  });

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript MUI Autocomplete: Can you specify the parameter type of the PaperComponents function?

If you use MUI's Autocomplete, there is a property called PaperCompomponent that allows you to pass your own react component. This property is a function with properties as a parameter, which can then be used to pass on to your custom component. In T ...

javascriptreactjstypescriptmaterial-ui

What is a way to incorporate two ngClass directives within a single div element?

Is it possible to include two ng-class directives within a single div element? If so, how should we go about writing them together? Thank you for your help. <div [ngClass]={'white-background': policyNumber.length <= 0} [ngClass]="getS ...

angularng-classangular-ng-class

Facing issues using Angular 5 for PUT requests due to 401 errors

When attempting to update data using the PUT Method in my angular service and express routes, I encountered a 401 error. Here is my service code: //401 makeAdmin(_id) { this.loadToken() let headers = new Headers() headers.append('Authorization& ...

javascriptangularexpress

Using debounceTime and distinctUntilChanged in Angular 6 for efficient data handling

I recently came across a tutorial on RxJS that demonstrated the use of debounce and distinctUntilChanged. I'm trying to implement it in Angular 6, but I'm facing some challenges. Here is the code from the tutorial: var observable = Rx.Observabl ...

angulartypescriptrxjsangular6

Modifying Array Values in Angular 7

I am currently dealing with a complex array where questions and their corresponding answers are retrieved from a service. Upon receiving the array, I aim to set the 'IsChecked' attribute of the answers to false. The snippet of code I have written ...

javascriptangulartypescriptangular7

Having trouble inserting the current time into Firebase Firestore

Currently, I am looking to use the current time as an input in Firebase Firestore (timestamp). Initially, when using the code snippet below: today: number = Date.now(); everything appeared to function correctly. However, the time was only updated once, s ...

angulartypescriptfirebasegoogle-cloud-firestore

Is there another way to implement this method without having to convert snapshotChanges() into a promise?

When trying to retrieve cartIdFire, it is returning as undefined since the snapshot method is returning an observable. Is there a way to get cartIdFire without converting the snapshot method into a promise? Any workaround for this situation? private asyn ...

javascriptangularfirebaseangularfire2

Is there a way to ensure that a certain block of code in Typescript is executed only after an API call has been completed?

When making an API call, I need the code after the call to wait until the API call finishes. In my function called this.api_call, it calls the API and only returns an array returnValue once the call is complete. let returnValue = this.api_call(data); // ...

javascripttypescriptapiasynchronous

The AuthGuard (Guard decorator) is unable to resolve its dependencies according to Nest

My AuthGuard is responsible for checking the JWT token in controllers. I am trying to use this Guard in controllers to verify authentication, but I encountered the following error: Nest cannot resolve dependencies of the AuthGuard (?, +). Please ensur ...

node.jstypescriptnestjs

Tips for defining a key: reducerFunctions object within a Typescript interface

Exploring the given interface: interface TestState { a: number; b: string; } My goal is to create a generic type that enforces an object to: have the same keys as a specified interface (e.g. TestState) for each key, provide a value of a reducer funct ...

typescriptgenerics

Trigger the Material UI DatePicker to open upon clicking the input field

I have a component that is not receiving the onClick event. I understand that I need to pass a prop with open as a boolean value, but I'm struggling to find a way to trigger it when clicking on MuiDatePicker. Here is an image to show where I want to ...

javascripttypescriptmaterial-ui

Error: zsh is unable to locate the command, even after defining it in package.json bin and installing it globally

I attempted to create a command-line application using TypeScript. Below is the code I have written: //package.json { "name": "jihea-cli", "version": "1.0.0", "description": "", "main": "index.ts", "bin": { "cli": "./bin/index.ts" }, // ...

node.jstypescriptnpmzshnpm-publish

Develop a custom data structure by combining different key elements with diverse property values

Within my coding dilemma lies a Union of strings: type Keys = 'a' | 'b' | 'c' My desire is to craft an object type using these union keys, with the flexibility for assigned values in that type. The typical approach involves ...

typescript

Oops! An issue has occurred: Control with the specified path (formArray) could not be

I encountered an issue with Angular showing the error message: ERROR Error: Cannot find control with path: 'notes -> 1', 'notes -> 0'. Below is the code snippet from component.html: <div formArrayName="notes"> ...

angular

Using Jimp to load a font and retrieve its Base64 representation

I am currently working in Angular with Jimp, attempting to overlay text onto an existing image. However, the image is not updating as expected. const Jimp = require('jimp') var _this = this; Jimp.read("assets/TimeLine.png").then(function ( ...

angulartypescriptlambdajimp

Managing the closest element depending on the selected option in Angular 5

My task involves accessing the nearest element of a dropdown. The HTML below includes multiple dropdowns and input boxes. When selecting options from the dropdown, I need to enable or disable the input box closest to it. <div class="form-block" *ngFor= ...

htmlangular

The property 'x' is not found on 'Reel' type in this context

Creating a custom class extending Container in PIXI.js: export class CustomContainer extends Container { constructor(width: number, height: number) { super(); var sprite: Sprite = Sprite.fromImage("assets/images/elephant.png"); ...

typescriptpixi.jstslint

Simulated FTP Connection Setup and Error Event in Node.js using Typescript

In my Node-Typescript-Express application, I am utilizing the FTP library to connect and retrieve files from a designated location. As part of creating unit tests, I am focusing on mocking the library to ensure coverage for code handling Ready and Error ev ...

node.jstypescriptexpressunit-testingjestjs

What purpose does a private property serve within the interface?

Given the following code snippet: class X { bar() { return "bar" } constructor(private readonly x: number){} } interface Y extends X { } const f = (y: Y) => { console.log(y.bar()); } f({ bar: () => "tavern"}); The code does ...

typescript

Display axis labels vertically next to each column in ng2-google-chart

Currently working with version 4.0.0 of ng2-google-charts, I am aiming to show hAxis text next to the column. Although I attempted using slantedText and slantedTextAngle, they do not seem to be compatible within the chart. Any assistance on this matter w ...

angularchartsgoogle-visualizationng2-google-chart