firebase3-ionic2-auth-component

Easy to use auth component for Firebase based Ionic2 applications.

Screenshots

Install

npm install firebase3-ionic2-auth-component --save

Sample usage

import {Component} from '@angular/core';
import {firebase} from './services/firebase';
import {Login} from 'firebase3-ionic2-auth-component';

@Component({
    directives: [Login],
    template: `
        <ion-content>
            <login
                [firebase_auth]="firebase.auth"
                [roles]="['brand', 'blogger']"
                [custom_inputs]="[{label: 'Custom', type: 'text'}]"
                [dictionary]="dictionary"
                (user)="onUser($event)"></login>
        </ion-content>
    `
})
export class LoginPage {
    constructor() {
        this.firebase = firebase;
        this.dictionary = {
            'title': 'YourTitle',
            'brand': 'Brand',
            'blogger': 'Blogger'
        }
    }
    onUser(user) {
        console.log('USER: ', user);
    }
}

INPUT firebase_auth

An instance of Firebase (version 3) auth. A sample of ./services/firebase implementation.

let _firebase = require('firebase');
let config = {
    apiKey: "FIXME",
    authDomain: "FIXME",
    databaseURL: "FIXME",
    storageBucket: "FIXME",
};
_firebase.initializeApp(config);
export let firebase = {
    ref: _firebase.database().ref(),
    auth: _firebase.auth(),
    storage: _firebase.storage().ref()
}

INPUT roles

If your app has multiple user roles, and a user can register as one role or another, provide the list of roles, ex. [roles]="['brand', 'blogger']"

INPUT custom_inputs

Anything extra you need a user to input before register, ex. [custom_inputs]="[{label: 'Custom', type: 'text'}]"

INPUT distionary

Values from this object will update the default dictionary of the component. Possible values:

{
    'title': 'Title',
    'back': 'Back',
    'reset_password': 'Reset password',
    'login': 'Login',
    'register': 'Register',
    'email': 'Email',
    'password': 'Password',
    'auth/wrong-password': 'Incorrect password',
    'auth/user-not-found': 'User not found',
    'auth/invalid-email': 'Invalid email',
    'auth/weak-password': 'The password must be at least 6 characters long',
    'auth/email-already-in-use': 'Email already in use'
}

NOTE: If you provide roles, then include the translations for each role, ex.

this.dictionary = {
    'title': 'YourTitle',
    'brand': 'Brand',
    'blogger': 'Blogger'
}

OUTPUT user

On user login or register, the output user will emit the user object of the following format:

{
  email: 'example@gmail.com',
  uid: 'USER-UID',
  role: 'brand',
  custom_inputs: [
    {
      label: 'Custom',
      type: 'text',
      value: 'my-custom-value'
    }
  ]
}

If user is not logger in or on logout event, the user output will emit null