Phone Auth about capacitor-firebase-auth

[baumblatt]

Hello @alkahtani ,

First, sorry about, but we don’t have web implementation on this plugin, yet. But the error suggests that you are not initializing your Firebase App.

Please, follow the instructions of Add Firebase SDKs and initialize Firebase on official docs.

Don’t forget, after that, you will need to test on a phone or emulator.

Best regards,
Bernardo Baumblatt

[tepafril]

Dear @baumblatt ,
Thank you so much for you effort to write this awesome plugin. My task is implement phone auth on both android and ios. I have followed your instruction. Unfortunately, I also received above error message from debug area in Xcode(ios), yet I haven't tried on android.

Code

cfaSignIn('phone', {"phone": "[phone]"}).subscribe(
      user => console.log(user.phoneNumber)
);

Error
[error] - ERROR {"code":"auth/argument-error","message":"Either an instance of firebase.auth.Auth must be passed as an argument to the firebase.auth.PhoneAuthProvider constructor, or the default firebase App instance must be initialized via firebase.initializeApp()."}

I'm so glad if you could help.

Cheer,
Afril TEP

[tepafril]

Hi everyone!

I managed to make it work now by:

1. Implementing javascript initialization from firebase. Here is the snippet:

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase';
import {cfaSignIn} from 'capacitor-firebase-auth';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  constructor(
  ) {
  let firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
    };
    firebase.initializeApp(firebaseConfig);
  }

  onSubmit() {
    cfaSignIn('phone', {"phone": "[phone]"}).subscribe(
      user => console.log(user.phoneNumber)
    );
  }
}

2. Add a URL scheme to my app:
Here is their official instruction: Url Scheme

Please take a look at screenshot:

[GenissonAlbuquerque]

I am trying to use phone authentication, but I have not been successful.
I started a blank project at Ionic Angular with Capacitor and ran folow commands:

npm install --save capacitor-firebase-auth
npx cap sync
npm install jetifier
npx jetifier
npm install --save @capacitor/core
npm install --save firebase (I installed peerdependencies myself)

my capacitor.config.json seems like:

"CapacitorFirebaseAuth": {
"providers": ["phone"],
"languageCode": "en",
"nativeAuth": false,
"permissions": {}
}

I followed instructions to install firebase on Android and put google-services.json file on Android/App.

When I tray execute de code on my login.page.ts:

cfaSignIn('phone', {phone: '+55'+phoneNumer}).subscribe(user => { console.log(user.phoneNumber); });

I receved the error:

Either an instance of firebase.auth.Auth must be passed as an argument to the firebase.auth.PhoneAuthProvider constructor, or the default firebase App instance must be initialized via firebase.initializeApp().

I think de library was waiting for firebase.initializeApp() at web layer, but I'm using Capacitor. Should I instantiate firebase.initializeApp()? (in firebase console I create only a Android config, for use firebase.initializeApp() I will need create a Web config too). How capacitor-firebase-auth phone authentication works? Native layer (Android project) or web layer (javascript)? How to make a simple ionic capacitor app login with phone authentication?

[GenissonAlbuquerque]

the solution is:

Instead of use cfaLogIn('phone', {phone: '+55'+phoneNumber}).subscribe(user => { console.log(user.phoneNumber); });

I should use cfaSignInPhone('+55'+phoneNumber).subscribe(user => { console.log(user.phoneNumber); });