Question: does this plugin sign in to both native and web layers of Firebase?

[mesqueeb]

Question: does this plugin sign in to both native and web layers of Firebase?

I'm actually only interested in the web layer. I think if the user also gets authenticated natively in the Firebase Swift layer, it might get extra confusing for me.

[robingenz]

Hi, thank you for your question.
This plugin only signs the user in to the native layer.
Currently, it also supports only Android and iOS (see #20 for web support).
The initial idea was that the Firebase JS SDK is not needed on Android and iOS.
However, it should be possible to use the Firebase JS SDK if you want to.
Therefore the sign in on the web layer should be possible without any problems.
This should work as follows:

import { FirebaseAuthentication } from '@robingenz/capacitor-firebase-authentication';
import 'firebase/auth';
import firebase from 'firebase/app';

const signInWithGoogle = async () => {
  // 1. Sign in on the native layer
  await FirebaseAuthentication.signInWithGoogle();
  // 2. Fetch the Firebase id token
  const result = await FirebaseAuthentication.getIdToken();
  // 3. Sign in on the web layer using the id token
  const credential = firebase.auth.GoogleAuthProvider.credential(result.token);
  await firebase.auth().signInWithCredential(credential);
};

signInWithGoogle();

I must admit that I have not tested this yet. Please let me know if there are any problems.

[mesqueeb]

@robingenz what's the value or use case for having users authenticated in the native layers?

Since capacitor apps are apps we write with JS frameworks (vue, angular, react), I believe most DEVs will use the Firebase JS SDK for most things, like connection to Firestore etc.

I wonder, are there many native plugins that would require authenticated Firebase users on the native layer? That is the only use case I can think of. Is there any other use case I'm not thinking of? I'd love to learn! : )

Good job on the plugin either way!

[vojto]

I must admit that I have not tested this yet. Please let me know if there are any problems.

@robingenz Any pointers on how to do this with Apple auth?

Trying this:

const {token} = await FirebaseAuthentication.getIdToken()
const provider = new firebase.auth.OAuthProvider('apple.com')
const credential = provider.credential(token)
firebase.auth().signInWithCredential(credential)

But doesn't seem to be working.

[robingenz]

Hi @vojto, good catch!
For apple.com, the rawNonce (see here) must also be passed.
Unfortunately, the rawNonce is not yet returned with in the current plugin version, so this is not currently possible.
Instead of the idToken and the rawNonce it seems that the accessToken can also be used.
This would be the easier upgrade for this plugin, as I don't always have access to the rawNonce at the moment.
I have created an issue for this: #44
I will implement it in the next days.

I would also like to create examples of how to sign up for each provider on the web layer. Already tested examples from the community would be helpful for that.

If any other problems arise, I will of course try to find a solution for them as well.

[robingenz]

@mesqueeb The main reason is: No unnecessary dependencies.
For example, I'm working on a project where a lot of emphasis is put on having as few dependencies as possible, because every new dependency and every dependency update is audited.
In this project, only Android and iOS are supported.
The plugin fully meets the current requirements and we are very satisfied.
For example, we don't have to worry about migrating Firebase JS SDK from v8 to v9.

Another reason, as you mentioned, is that there are other dependencies to the native layer.
For example, with Ionic Portals, the plugin should be able to be used in "native" apps as well.
Furthermore, migrating from a "native" app to a Capacitor app will be simplified as users will not have to re-authenticate.
Of course, the latter examples are very specific use cases.

Since the Firebase JS SDK can still be used, I think this is a good solution to keep all options open.

[vojto]

@robingenz I'm not sure about accessToken. At this point it's nil:

So it seems to me we're relying on idToken/rawNonce combo.

---

Another problem: If you log in once using idToken/rawNonce, you can't use it again. I was curious how the older library does it, and it's one-or-the-other approach there:

func handleAuthCredentials(credential: AuthCredential) {
    if (self.nativeAuth) {
        self.authenticate(credential: credential)
    } else {
        self.buildResult(credential: credential)
    }
}

---

Anyway, here's a PR which makes it work, but it does it by skipping login on Native layer.

If this is the right direction, I'll be happy to help finishing it.

[mesqueeb]

@vojto @robingenz I would love a built in option in this plugin where the dev can choose to authenticate the web layer and not the native layer.

In my use case, which I think is the more common use case, we have a capacitor app that uses Firebase JS SDK to connect to our database: Firestore. However, since the Firebase JS SDK's authentication doesn't work properly in Capacitor, we have to use this plugin (or that other one).

Most devs who write web apps and then wrap it with Capacitor probably don't understand Java or Swift at all. That's why if you authenticate users on the native layer with the Firebase Swift SDK or the Java SDK, that's suddenly an extremely complex concept for most devs to grasp.

That's why I believe it's best to give an option to only authenticate the Web layer (Firebase JS SDK) using this plugin.

It's easier for most of us to reason about and there's less surprises. Then we can just use the Firebase JS SDK to then connect to Firestore and not worry about any other Capacitor quirks or plugins.

[vojto]

I updated #47 and added some more info about it. It now works for both Google & Apple login with some examples.

@robingenz Main question for you: Do you wanna allow a flag that will let us decide between native and web layer? Or would you rather find a way to support both at the same time?

[robingenz]

@mesqueeb @vojto Thanks for your suggestions and the ideas.
It's a bit stressful today, unfortunately, so I won't get around to looking at everything until tomorrow.
I plan to work a bit on the plugin this weekend.

[vojto]

No rush, thanks for your work!

[robingenz]

Okay, so I took a look and tried a few things and I think adding an option to skip the native layer is currently the best possible approach to enable the use of the Firebase JS SDK for Apple sign-in (as @vojto has shown in #47).
I have created several issues for that, which I want to get done until the next release:

• feat: implement skipNativeAuth config option #48
• feat: return AuthCredential on sign in #44
• feat(ios): return nonce on sign in #50
• docs: how to use this plugin with the Firebase JS SDK #49

[robingenz]

I ran into a problem returning the nonce value on Android. For this reason I will implement this for iOS only for now.
This is the feature request for Android: #53
I appreciate any tips and suggestions for solutions.

[mesqueeb]

@robingenz i also never got Apple auth to work on Android, tried with several plugins. In our app that forced us to have Apple auth disabled on Android. Not ideal but ok for now. : )

[robingenz]

The changes have been published:

npm i @robingenz/[email protected]

Please let me know if there are any problems and create a new issue.

[robingenz]

@mesqueeb #53 is now closed. So Apple Sign-In should now work on Android with the Firebase JS SDK.