CODEWITHSUNDEEP
javascriptfirebase-authenticationangular5electron
Artyom Ohanyan
Artyom Ohanyan

Reputation: 19

Firebase phone number authentication in Electron js, Angular 5

I am trying to implement Firebase Phone Number Authentication but there is a problem with environment such as I am using electron js.

Here is my code 

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';

constructor(public afAuth: AngularFireAuth) {}

sendPhoneNumber() {

const phoneNumber = '+' + this.phoneNumber;
const appVerifier = new firebase.auth.RecaptchaVerifier('LoginPage-signInButton', {
    'size': 'invisible',
    'callback': (response) => {
      console.log('response', response)
    },
    'error-callback': (error) => {
      console.log('error', error);
    }
  });
  this.afAuth.auth.signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(confirmationResult => {
      console.log(confirmationResult);
    }) 
}

And I am getting this error

code: "auth/operation-not-supported-in-this-environment"
message: "RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment."

are there any solutions for this problem or workaround?

Upvotes: 0

Views: 717

Answers (1)

Debaryoh
Debaryoh

Reputation: 73

Based on your question, you seem to be trying to handle Phone authentication in your Electron Application. Phone authentication using Firebase JS library might not work based on how you are handling it in your Electron environment since the reCAPTCHA will be unable to verify the origin of your application. This is due to the fact that the origin will look like file://assets/index.html.

Firebase's phone authentication service for web depends on an app verifier interface: https://firebase.google.com/docs/reference/js/firebase.auth.RecaptchaVerifier which RecaptchaVerifier implements.

Do this:

Open on browser, render the reCAPTCHA, get the reCAPTCHA token, close the browser and then pass it back to your the Electron app then implement your own firebase.auth.ApplicationVerifier.

Open a browser custom tab and redirect to your own and white-list in the Firebase Console where firebase.auth.RecaptchaVerifier will be rendered. You then pass the reCAPTCHA response token back to your app. This guarantees that only your app can open it.

You need to listen to incoming links in your app and parse the reCAPTCHA token. Repackage it in a firebase.auth.ApplicationVerifier implementation. You can now pass it to signInWithPhoneNumber to complete sign-in.

Hope this helps.

Upvotes: 1

Related Questions