FirebaseUI for web - Ionic demo

This is a demo Ionic project using FirebaseUI-web.

Live demo

Firebase console configuration:

To properly configure your Firebase Project please follow all the instructions from the Set up Firebase Authentication for Cordova section at the following link:

https://firebase.google.com/docs/auth/web/cordova

Configuring sign-in providers

To use FirebaseUI to authenticate users you first need to configure each provider you want to use in their own developer app settings. Please read the Before you begin section of Firebase Authentication at the following links:

• Email and password
• Google
• Facebook
• Twitter
• Github

Note

Phone number is currently not supported for Ionic/Cordova environments.

Run app locally:

$ npm install
$ ionic serve

Note

ionic lab or ionic serve --lab does not work with Google provider, you will have to use ionic serve instead.

Add FirebaseUI to your own Ionic project:

After setting up Firebase console as described above, please follow the next steps:

Install firebase and firebaseui dependencies:

$ npm install firebase --save
$ npm install firebaseui --save

Setup firebaseui css to be visible to the app:

• First the css file has to be copied to www/build folder during every build. For that you need to create file config/copy.config.js with the following code:

module.exports = {
  copyFirebaseUiCss: {
    src: ['./node_modules/firebaseui/dist/firebaseui.css'],
    dest: '{{BUILD}}'
  }
}

• And add the following lines to your package.json:

"config": {
  "ionic_copy": "./config/copy.config.js"
}

• Then add the following line to src/index.html

<link href="build/firebaseui.css" rel="stylesheet">

For android set launchMode to singleInstance

By adding the following line to config.xml:

<preference name="AndroidLaunchMode" value="singleInstance" />

This is needed for Google Provider because sometimes after authentication a new instance of the app is created resulting in never successfully authenticating. The issue does not occur on iOS devices.

Create FirebaseUIProvider

There should only be a single instance of firebaseui for the whole app, so it is a good idea to create a provider and save the instance there:

@Injectable()
export class FirebaseuiProvider {

  ui: any;

  constructor() {
    // Initialize the FirebaseUI Widget using Firebase.
    this.ui = new firebaseui.auth.AuthUI(firebase.auth());
  }

}

Add FirebaseUI to any page you like

See example at src/pages/login/login.ts.