[FEATURE] Login with Smartlock

[dtruffaut]

Login with Smartlock

Google Smartlock (One tap sign up / sign in) is a great way to seamless sign up / sign in a user to a web application : https://developers.google.com/identity/one-tap/web/

Problem :

As it is not yet part of Firebase auth methods, the only way to connect to Firebase with Smartlock is to perform a Google+ OAuth right after, which is cumbersome as it adds a useless redirect, select account screen then a OAuth approval screen, that we just want to avoid using only Smartlock.

Solution :

Add Smartlock as a Firebase Auth method. So we can connect to Firebase right after successful Smartlock sign up / sign in.

How to :

Provide a loginWithSmartlock() method. Indeed, it's neither a Popup or Redirect method, as Smartlock uses in-place iframe with postMessage to avoid popups or redirects (and this is exactly what Smartlock is handy, no popup neither redirect : in-place sign up / sign in)

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[bojeil-google]

Signing in with a one-tap credential is already supported. In fact, FirebaseUI-web, which is built on top of the Firebase Auth module, provides that already: https://github.com/firebase/firebaseui-web#one-tap-sign-up

One-tap Google credentials provide Google ID tokens. You just need to initialize a Firebase Auth credential with that and sign in with it. For example assuming you have a googleyolo credential:

// Make sure you are using the same Google project for one-tap and Firebase.
const authCredential = firebase.auth.GoogleAuthProvider.credential(googleyoloCredential.idToken);
firebase.auth().signInWithCredential(authCredential);

It is pretty straight forward.

[dtruffaut]

Thanks ! I will try this this week-end.

[dtruffaut]

It works like a charm :+1:

For those who get an error like :

• A network error (such as timeout, interrupted connection or unreachable host) has occurred
• Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': Cannot construct a Request with a Request object that has already been used

It is because you probably use a service worker, then intercept fetch event and inside try to reperform a fetch just after on the same request because you cache hit failed. In that case, dont do fetch(request), but do instead : fetch(request.clone()), which creates a new request.

Many thanks bojeil-google for helping in this issue !