Firebaseui-web: Ionic demo app

[alexnu]

Hi,

Really excited to see that firebaseui now supports Ionic/Cordova environments, but I am trying to integrate it into my Ionic app and I am getting weird errors, probably because I am doing a lot of things wrong.

Also since it's still quite fresh, I couldn't find any tutorials yet with instructions.

Could you maybe create a demo app in Ionic to show how to correctly use it?

Thanks

[bojeil-google]

You can render FirebaseUI with Ionic/Cordova the same as you do with a single page web app (from a code perspective).
The difference is the set up:
You have to follow these instructions: https://firebase.google.com/docs/auth/web/cordova
Make sure you make the necessary changes:

• Firebase console (update your mobile apps in your project and agree to FDL terms of service),
• install the required plugins
• make the necessary updates to config.xml.

Unfortunately we don't have a demo app at the moment. We could look into it (contributions would be highly appreciated). But for now, let's try to help you get something working :)

[alexnu]

Thanks bojeil. I am trying to put together a demo app at the moment, if I make it I'll be happy to contribute it.

I have followed your instructions and it seems I am slowly getting there. So far I've found out that when I run my app with "ionic lab" I get the following error:

Refused to display 'https://www.accountchooser.com/redirect.html#localhost:8100' in a frame because it set 'X-Frame-Options' to 'deny'.
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE

However, if I run it with "ionic serve" then it works fine (so far I have only tried email provider), but I am not really sure what to do the redirect-urls, because Ionic 2 does not use urls for navigation.

Will dive deeper into this and get back to you when I have something.

[bojeil-google]

I only tested the library in a Cordova app (Android and iOS). I didn't specifically test Ionic but it should be the same.
Can you set this in your config to diasable accountchooser.com (it is automatically disabled when you build it in a real mobile cordova app):
credentialHelper: firebaseui.auth.CredentialHelper.NONE

You don't need to use redirects after sign-in. We provide a callback for signInSuccess.

[choopage]

hi @alexnu any luck so far? I'm trying to use ionic v3 (with angular v4) + firebase v4 + angularfire2 v4 + firebaseui-web v2.

Going around looking for demo app too :)

[alexnu]

Hi @choopage so far I have this: https://github.com/alexnu/IonicFirebaseUI which seems to be working fine with Ionic 3 and Firebase 3 (I tried Firebase 4 but got some weird errors so I downgraded to 3).

I only have email provider enabled at the moment, I will try enabling the others too.

I will also put together a README with instructions, once I'm done.

[alexnu]

Hey @bojeil-google so I managed to enable Google and Facebook providers successfully and they also work when I run it on my android phone (not so smooth because of the redirects opening in new browsers but ok).

I noticed that when I run the application on my PC for Google provider it lets me choose an account before proceeding, whereas in my android phone it proceeds with the default without asking me. Is there a way to let the user choose a google account in case he has many?

[bojeil-google]

You have to pass customParameters({prompt: 'select_account'}) in the Google config. Check this section: https://github.com/firebase/firebaseui-web#configure-oauth-providers

[alexnu]

Sorry I missed that. However it seems that when I replace this line:

firebase.auth.GoogleAuthProvider.PROVIDER_ID,

with this:
{ provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID, scopes: [ 'https://www.googleapis.com/auth/plus.login' ], customParameters: { // Forces account selection even when one account // is available. prompt: 'select_account' } },

I do get a dialog asking me to select account, but when I do something goes wrong and I cannot login. From inspecting I noticed that after I confirm the account from the in-app browser, I am redirected back to a new instance of my app where I am not authenticated, thus starting the flow from the beginning again.

This behavior does not occur when I use the default firebase.auth.GoogleAuthProvider.PROVIDER_ID or with other providers.

[bojeil-google]

I just tested quickly in an android emulator API 25 using your exact Google provider setting and it works as expected.

[alexnu]

Hey @bojeil-google thanks for your help. It also works for me in an emulator, but then the problem occurs when I run it on a real device. I tried to inspect the app through Chrome and this is the picture I got before trying to login:

Whereas after 3 unsuccessful tries I got this:

It seems that after each try a new "Login" page is created which is weird because during the initialization of the app I set the following callback for onAuthStateChanged() which just changes the RootPage:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is authenticated.
    this.setRootPage('HomePage');
  } else {
    // User is not authenticated.
    this.setRootPage(LoginPage);
  }
});

Also it doesn't seem to make a difference whether I provide prompt: 'select_account' or not, but what actually makes a difference is whether in the device I am testing I have more than one accounts. If I am asked to select account then the login is unsuccessful, otherwise everything is okay.

[bojeil-google]

I am not sure why this is happening specifically the discrepancy between the emulator and a real device. It doesn't seem related to Firebase Auth. Could this setting be the issue: https://developer.android.com/guide/topics/manifest/activity-element.html#lmode. Try setting launchMode to singleInstance.

[alexnu]

Yes that's it!! Indeed the issue appeared only on android devices and it is now fixed thanks to your suggestion.

Again @bojeil-google thanks a lot for your help. I now have a working Ionic demo app with FirebaseUI and I can start working on integrating it into my own app. I have also put together instructions for setting it up. If you find it useful I can contribute it here in a new folder inside "demo".

[bojeil-google]

Cool, I am glad it worked! We will try to collect all this feedback from your experience and others and update our docs so it's easier for others trying to use Firebase Auth/FirebaseUI in their Cordova/Ionic apps.

[alexnu]

Great! I also put together a guide focused on Ionic apps here for anyone interested.

[choopage]

Thank you Alex. Very helpful guide.

On 25 Jun 2017 7:10 PM, "Alexandros Nafas" [e-mail] wrote:

Closed #168 https://github.com/firebase/firebaseui-web/issues/168.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebaseui-web/issues/168#event-1137704577,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGKuQAmmqf600GrshfgWvnW8JQW6zu4Aks5sHkA0gaJpZM4N55QB
.