Local Testing

[hawekotte]

Expected Behavior

Pull down repo (from original source or direct fork), install dependencies, build package, and then use a local install to test updates within an Ionic app. Given a correct Firebase setup within the Ionic app, all Firebase calls (native and web layer) are expected to run smoothly.

Actual Behavior

I have a fork (well, a fork of a fork), that seeks to add Sign in with Apple to the list of available login methods. Though, as of right now I run into an issue when testing the package locally. Specifically, after building and installing the package into my Ionic app, this line causes the app to throw 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().

One quick workaround is to replace it with this line but that is only a temporary fix because the same error above will be throw any time firebase.app() is called.

Note: Using the package currently available on NPM everything works smoothly and no error is thrown.

Steps to Reproduce the Problem

1. Clone the main repo,
2. Install all necessary dependencies (npm install and npm install firebase),
3. Build the package (npm run-script build),
4. Install the package locally (from the Ionic app folder either use npm link or npm install /path/to/capacitor-firebase-auth/repo),
5. Run capacitor sync and then start the app (npx cap sync and then however you start your app),
6. It will now fail to load any time cfaSignIn('<ANYTHING>') is called.

Question

So how do I ensure that firebase.initializeApp() is properly called when using the locally installed package?

Thanks a ton!

[hawekotte]

If it helps, here is a hacky way I was able to test my code using the NPM package that already works:

1. Install the package into your app (npm install capacitor-firebase-auth)
2. Pull down a copy of our own CFA version from here
   • Note: Make sure you checkout/download the feature/apple-sign-in branch
3. Build our CFA package (cd into the directory and run npm install && npm install firebase && npm run-script build)
4. Copy (and replace) the following files from our CFA repo (from step 2) into the downloaded node module (/mobile/node-modules/capacitor-firebase-auth)
   • dist/esm/definitions.js
   • dist/esm/facades.js
   • ios/Plug/Plugin/Handlers/AppleProviderHandler
   • ios/Plug/Plugin/Plugin.swift
5. Go back into the mobile directory in a terminal and sync capacitor (npx cap sync)
6. You can now run the iOS version!

Note: Doing this allow iOS to works but is in no may maintainable!

Update (April 2, 2020):

I attempted to hack together a working version on Android as well and ran into similar issues. Thus here is an updated version that includes my current hacky method that acts as my proof of concept for sign in with Apple (that supports both iOS and Android):

0. Make sure you follow the "Before you begin" sections of the Firebase iOS and Android docs.
1. Install the package into your app (npm install capacitor-firebase-auth)
2. Pull down a copy of our own CFA version from here
   • Note: Make sure you checkout/download the feature/apple-sign-in branch
3. Build our CFA package (cd into the directory and run npm install && npm install firebase && npm run-script build)
4. JavaScript Files:
   • Copy (and replace) the following files from our CFA repo (from step 2) into the downloaded node module (/mobile/node-modules/capacitor-firebase-auth)
     • dist/esm/definitions.js
     • dist/esm/facades.js
5. iOS Files:
   • Copy (and replace) the following files from our CFA repo (from step 2) into the downloaded node module (/mobile/node-modules/capacitor-firebase-auth)
     • ios/Plug/Plugin/Handlers/AppleProviderHandler
     • ios/Plug/Plugin/Plugin.swift
6. Android Files:
   • Copy (and replace) the following files from our CFA repo (from step 2) into the downloaded node module (/mobile/node-modules/capacitor-firebase-auth)
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/CapacitorFirebaseAuth.java
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/handlers/AppleProviderHandler.java
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/handlers/FacebookProviderHandler.java
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/handlers/GoogleProviderHandler.java
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/handlers/PhoneProviderHandler.java
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/handlers/ProviderHandler.java
     • android/capacitor-firebase-auth/src/main/java/com/baumblatt/capacitor/firebase/auth/handlers/TwitterProviderHandler.java
     • android/capacitor-firebase-auth/src/main/res/values/strings.xml
7. Go back into the mobile directory in a terminal and sync capacitor (npx cap sync)
8. You can now run the iOS version!

Note: I am not too confident in my iOS and Android abilities so extra 👀 are always welcome!

[loftyduck]

Thanks @hawekotte for these details, I'm working through the same thing right now. I think the local testing is hindered by working with a scoped package that has a different name, but unfortunately I don't have a workaround other than what you detailed.

It'd be great to get a PR or branch on this repo that adds Apple sign-in so we can add that functionality and get it tested properly.

[hawekotte]

You've hit the nail on the head, @loftyduck. My fork (with manual overriding) works for now and I am willing to throw up a PR with it, but I figure it would need a decent amount of work since I am outside of my wheelhouse here.

[baumblatt]

Hello,

I’m a little lost about what this issue is about, but let me share some workarounds to make things work locally.

1. The firebase library

Go to your test project, the one who use the plugin, inside ./node_modules/firebase run: npm link

This will place the firebase web library general available on your node installation.

Than, go to plugin project and run: npm link firebase

This will tie the same firebase instance to both projects, and is necessary to run with a local copy of the plugin.

2. Install the local plugin on your project, something like the above on the package.json:

"dependencies": {
     ...
     "capacitor-firebase-auth": "file:../capacitor-firebase-auth",
     ...
}

Please, let me know with this work for you.

Best regards, Bernardo Baumblatt.

[hawekotte]

@baumblatt, thanks a ton for the steps!

I'll give them a test here soon and report back. Cheers!

[baumblatt]

Hi @hawekotte ,

Please, if your are able to send a PR, use the next branch, today this branch are in sync with master.

Best regards, Bernardo Baumblatt.