Add phone number sign-in

[FluorescentHallucinogen]

Fix #228.

[FluorescentHallucinogen]

Thanks to @AVStarikovich! 😉

[FluorescentHallucinogen]

@mbleigh @tjmonsi Please review this pull request.

[FluorescentHallucinogen]

Please note that reCAPTCHA doesn't work inside Shadow DOM.

[FluorescentHallucinogen]

@mbleigh @tjmonsi PTAL.

[tjmonsi]

This can be problematic. It means it needs something that has an id of a recaptcha-container.

You can change this with saying...

signInWithPhoneNumber: function(phoneNumber, verifier) {
   var appVerifier
   if (verifier instanceof HTMLElement) {
      appVerifier = verifier
   } else if (typeof verifier === 'string') {
      appVerifier = this.shadowRoot.querySelector('#recaptcha-container')
   }

   if (!appVerifier) return withError()

[FluorescentHallucinogen]

@tjmonsi Done. Only two questions:

1. Is it a good idea to use the window object to pass confirmationResult from signInWithPhoneNumber function to confirmCode function? If not, is it possible to somehow avoid this at all?

2. What about moving creation of firebase.auth.RecaptchaVerifier from signInWithPhoneNumber function to another separate function e.g. createRecaptchaVerifier? Something like this:

createRecaptchaVerifier: function(container, parameters, app) {
  return new firebase.auth.RecaptchaVerifier(container, parameters, app);
},

signInWithPhoneNumber: function(phoneNumber, applicationVerifier) {
  return this._handleSignIn(this.auth.signInWithPhoneNumber(phoneNumber, applicationVerifier)
    .then(function(confirmationResult) {
      window.confirmationResult = confirmationResult;
    }));
},

On the one hand, I believe we should keep PolymerFire API as close to Firebase JavaScript SDK API as possible. In the Firebase JavaScript SDK the signInWithPhoneNumber function takes 2 arguments — phoneNumber and applicationVerifier. On the other hand, this means that the user needs somewhere (outside the signInWithPhoneNumber function) to create the applicationVerifier to pass it to signInWithPhoneNumber function.

[tjmonsi]

On the one hand, I believe we should keep PolymerFire API as close to Firebase JavaScript SDK API as possible. In the Firebase JavaScript SDK the signInWithPhoneNumber function takes 2 arguments — phoneNumber and applicationVerifier. On the other hand, this means that the user needs somewhere (outside the signInWithPhoneNumber function) to create the applicationVerifier to pass it to signInWithPhoneNumber function.

You are right on point here. It will really need the user to create an application verifier.
I haven't tried yet the phone number flow but I'll look into it this weekend with my weekend pass on polymerfire issues and will get back to you on it

[FluorescentHallucinogen]

@tjmonsi The weekend has passed. Any news?

[tjmonsi]

I am stuck. Was working on the devfest site the whole weekend so that I can make a release today. Sorry If I have to ask for an extension :(

[FluorescentHallucinogen]

@tjmonsi Any progress?

[tjmonsi]

I'm doing the issues and requests one by one :( I'll get into this tomorrow. Just got time to be free now

[JGSolutions]

Any progress? Will this feature get released anytime soon?

[merlinnot]

Guys, don’t you think that we should discuss what we really want to accomplish here before reviewing the code itself? I’m asking because I’ve implemented phone auth myself in a Polymer app and I took completely different approach. Most concerning thing for me in the current PR is recreating recaptcha every time the function is being called. It can be done once, i.e. in a connected callback.

[JGSolutions]

So will this get released?

[merlinnot]

I don’t think it should be released in the current state, but I’d love to continue working on this feature. As I’ve mentioned in the previous comment, it can be done cleaner. I won’t be able to make a PR with my approach until next month, I have a lot on my plate right now.

[FluorescentHallucinogen]

Ping.

[FluorescentHallucinogen]

@merlinnot

it can be done cleaner. I won’t be able to make a PR with my approach until next month

Any progress?

[merlinnot]

Copy-pasted from one of my projects:

constructor:

this._shadowHelper = document.createElement('div');
document.querySelector('body').appendChild(this._shadowHelper);

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
  this._shadowHelper,
  {
    size: 'invisible',
    callback: () => this._recaptchaReady = true,
  },
);
window.recaptchaWidgetId = await window.recaptchaVerifier.render();

Then you can use:

grecaptcha.reset(window.recaptchaWidgetId);

or

firebase.auth().signInWithPhoneNumber(number, window.recaptchaVerifier);