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...

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

The symbol 'router-outlet' is not recognized by the system

This new project utilizes Angular 13 for its implementation. One of the key updates is the addition of routing to the project, specifically in the file app-routing.module.ts. import { NgModule } from '@angular/core'; import {RouterModule, Routes ...

Error: Angular 2 Application lacks 'Access-Control-Allow-Origin' header

Currently, I am working on a project where I am focusing on learning and practicing Angular 2. Since I do not have a server-side setup, I am making API requests to the barchart ondemand api. I am facing an issue with CORS and I am wondering if there is a ...

Executing a function in Angular 2 depending on the class assigned to a <div>

In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...

Mastering the Art of Flex Layout Grids

Here is a preview of how my grid is currently formatted: https://i.stack.imgur.com/SBChV.png The current code looks like this: <div fxLayout="row wrap"> <img class="component-logo" fxFlex="1 1 c ...

Angular - personalized modal HTML

I am facing a challenge where I need to trigger a popup when a button is clicked. There can be multiple buttons, each with its own overlay popup, and these popups should close when clicking outside of them. Currently, I am using TemplateRef (#toggleButton ...

Using a decorator with an abstract method

Discussing a specific class: export abstract class CanDeactivateComponent { abstract canLeavePage(): boolean; abstract onPageLeave(): void; @someDecorator abstract canDeactivateBeforeUnload(): boolean; } An error occurred stating that A decorat ...

What is the best way to include additional text in a dropdown menu?

I'm trying to add the text "Choose Country" in a drop-down list before the user selects their country. example1 Here is the line of code I used: <option data-hidden="true"> Choose Country </option> However, the phrase does ...

What is the best way to retrieve information from multiple pages of my REST API?

Recently, I integrated a search engine into my application and now I need to gather all the data available for a particular resource, such as all the posts made by a user. The response I receive from my API looks something like this: { "count": 2, ...

The checkbox component is currently not displaying on the ngx-datatable

The following HTML code snippet demonstrates a sample layout. The operations are functioning correctly, however, the checkbox is not visible. <ngx-datatable style="width: 90%" class="material" [rows]="rows" ...

The element is implicitly given an 'any' type due to the fact that a string expression cannot be used to index the following type: { "1" : { "key": string}; "2" : { "key": string};}

I have a JSON file containing IDs as keys like this: "1" : { "key": "value"}, "2" : { "key": "value"}, In my class, I import this JSON file as a data object and then use the ID passed to a method ...

Error in Continuous Integration for Angular 4: Unable to access property 'x' of an undefined variable

i am trying to display some data on the form but encountering an error: TypeError: Cannot read property 'title' of undefined below is my component code : book:Book; getBook(){ var id = this.route.snapshot.params['id']; ...

Angular setup prompting for anonymous usage statistics collection by the Angular development team

This is my first time installing Angular and I ran into confusion at this step. The terminal message prompted me with the option to share anonymous usage data with the Angular Team at Google under their Privacy Policy. Here's what it said: ? Would y ...

Troubleshooting: Angular 2 ngIf not functioning properly when using properties in extended classes

I have developed an angular 2 component for a modal that inherits from a base modal class. The base class contains a boolean property to determine if the modal is open or closed, which I am utilizing in the template with *ngIf to toggle the visibility of t ...

Even as I create fresh references, my JavaScript array object continues to overwrite previous objects

Coming from a background in c# and c++, I am facing some confusion with a particular situation. Within the scope of my function, I am creating a new object before pushing it into an 'array'. Strangely, when I create the new object, it appears to ...

Angular time-based polling with conditions

My current situation involves polling a rest API every 1 second to get a result: interval(1000) .pipe( startWith(0), switchMap(() => this.itemService.getItems(shopId)) ) .subscribe(response => { console.log(r ...

Utilizing the FormsModule and ReactiveFormsModule within a Component module

I am facing an issue with integrating a reactive form into a generated component called boom-covers. I am utilizing the [formGroup] property as shown below: <form name="boomCovers" method="post" id="bomCovers" (ngSubmit)=&q ...

Refactor TypeScript in Visual Studio Code: Relocate class from one file to another (already existing) file

One common task when reorganizing a project with numerous classes is to transfer certain classes to an already existing file. After exploring various vscode features and extensions, I have not come across any refactoring tool that allows for this specific ...

Angular: Utilize a Pipe in Template to Format and Display Time With a Mask

Within my code, there's a function called secondsToHms that serves to convert seconds into hours, minutes, and seconds: transform(seconds: number): string { const minutes = Math.floor(seconds / 60); //minutes const secs = seconds % 60; //seconds ...

Custom-designed foundation UI element with a parameter triggers TypeScript issue

When running this tsx code: import React from "react"; import BaseButton from "@mui/base/Button"; import styled from "@emotion/styled"; export const enum BUTTON_TYPE { MAIN = "main", LINK = "link", } ...

Having trouble getting the submit function to work in the Primeng p-dialog form

I am struggling to perform a file upload using the primeng p-dialog component. The issue I am facing is that the Submit button does not seem to be working at all, and there are no error messages being displayed in the console. Despite extensive research on ...