ionic-auth-firebaseui - Ionic UI component for firebase authentication powered by @firebase, @angular and @angular/fire

PLEASE TAKE IN CONSIDERATION THAT THIS PROJECT STILLS UNDER DEVELOPMENT

,

• Angular Material Design Version
• Angular Bootstrap Version

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support ionic-auth-firebaseui by starring ⭐ and sharing it 📢

Table of Contents

• Why to use ionic-auth-firebaseui ?
• Supported Providers
• Supported Processes and Actions
• Requirements
• Demo
• Documentation
• Screenshots
• Peer Dependencies
• Dependencies
• Installation
• Library's components
• Configuration
• Usage
• API
• Run Demo App Locally
• Other Angular Libraries
• Support
• License

Supported Providers:

• anonymously
• email and password (traditional)
• google
• facebook
• twitter
• github
• phone number 🔜

Supported Processes and Actions:

• sign up
• sign in
• sign in Anonymously | with google, facebook, twitter, github
• sign out
• validation of password's strength while creating a new account using @angular-material-extensions/password-strength
• forgot/reset password
• sending email verifications
• delete user's account
• edit user's profile like email, name, (profile picture 🔜) and phone number
• firestore auto sync 🔥
• do not allow users to create new accounts before checking the terms of services and private policy - for mor info check this here

Requirements:

• angular forms - v7.x
• @angular/fire - v5.x
• firebase - v5.x

Demo

View all the directives in action at https://AnthonyNahas.github.io/ionic-auth-firebaseui

Dependencies

• Angular (requires Angular 2 or higher, tested with 7x)
• Ionic (requires Ionic 4 or higher, tested with 4x)

Library's components

• <ionic-auth-firebaseui> used for the authentication process
• <ionic-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter and github
• <ionic-auth-firebaseui-user> used to display/edit the data of the current authenticated user

Installation

Install above dependencies via npm.

Now install ionic-auth-firebaseui via:

npm install --save ionic-auth-firebaseui

---

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ionic-auth-firebaseui:

map: {
  'ionic-auth-firebaseui': 'node_modules/ionic-auth-firebaseui/bundles/ionic-auth-firebaseui.umd.js',
}

---

Once installed you need to import the main module:

import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice IonicAuthFirebaseuiModule.forRoot()):

import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [IonicAuthFirebaseuiModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import IonicAuthFirebaseuiModule:

import { IonicAuthFirebaseuiModule } from 'ionic-auth-firebaseui';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [IonicAuthFirebaseuiModule, ...], 
})
export class OtherModule {
}

(2) Configuration

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { IonicAuthFirebaseUIModule } from 'ionic-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    // Specify the ngx-auth-firebaseui library as an import
    IonicAuthFirebaseUIModule.forRoot(
                {
                  apiKey: 'your-firebase-apiKey',
                  authDomain: 'your-firebase-authDomain',
                  databaseURL: 'your-firebase-databaseURL',
                  projectId: 'your-firebase-projectId',
                  storageBucket: 'your-firebase-storageBucket',
                  messagingSenderId: 'your-firebase-messagingSenderId'
                },
                 () => 'your_app_name_factory',
                {
                  enableFirestoreSync: true, // enable/disable autosync users with firestore
                  toastMessageOnAuthSuccess: false, // whether to open/show a snackbar message on auth success - default : true
                  toastMessageOnAuthError: false // whether to open/show a snackbar message on auth error - default : true
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Usage

Once the library is imported, you can use its components, directives and pipes in your Angular application:

<ngx-auth-firebaseui></ngx-auth-firebaseui>

<!-- You can now use the library component in app.component.html  -->

<ionic-auth-firebaseui (onSuccess)="printUser($event)"
                     (onError)="printError()">
</ionic-auth-firebaseui>

or

<!-- or simply in the app.component.ts -->
@Component({
    selector: 'app',
    template: `
        <ionic-auth-firebaseui (onSuccess)="printUser($event)" (onError)="printError()"></ionic-auth-firebaseui>`
})
class AppComponent {

    printUser(event) {
        console.log(event);
    }

    printError(event) {
        console.error(event);
    }
}

API

<ngx-auth-firebaseui></ngx-auth-firebaseui>

option	bind	type	default	description
providers	Input()	string[]	['all'] or [AuthProvider.All]	choose your favorite authentication provider: google
appearance	Input()	MatFormFieldAppearance	standard	the appearance of the mat-form-field #'legacy'
tabIndex	Input()	number	null;	0
registrationEnabled	Input()	boolean	true	whether the user is able to register a new account
resetPasswordEnabled	Input()	boolean	true	whether the user is able to reset his account password
guestEnabled	Input()	boolean	true	whether the user can sign in and continue as guest
tosUrl	Input()	string	-	the url of term of services
privacyPolicyUrl	Input()	string	-	the url of the private privacy
goBackURL	Input()	string	-	the url to redirect to after creating a new user and clicking the go back button - the button is only available when the input is provided
messageOnAuthSuccess	Input()	string	see the code ->	the message of the snackbar when the authentication process was successful
messageOnAuthError	Input()	string	see the code ->	the message of the snackbar when the authentication process has failed
onSuccess	Output()	any	-	this will be fired when an authentication process was success. The authenticated user is emitted!
onError	Output()	any	-	this event will be fired when an error occurred during the authentication process! An error message is emitted!

PS: if either tosUrl or privacyPolicyUrl` are provided, the user will be asked to check and accepts tos and pp before registering a new account or sign in in anonymously

<ionic-auth-firebaseui-user></ionic-auth-firebaseui-user>

option	bind	type	default	description
editMode	Input()	boolean	false	whether the use is in edit mode
canLogout	Input()	boolean	true	whether to render the logout button
canDeleteAccount	Input()	boolean	true	whether to render the delete account button
appearance	Input()	MatFormFieldAppearance	-	the style of the mat-input-form
onAccountDeleted	Output()	void	-	this will be fired when the user deletes his account

---

Other Angular Libraries

• ngx-auth-firebaseui
• @firebaseui/ng-bootstrap
• ngx-linkifyjs
• @angular-material-extensions/password-strength
• @angular-material-extensions/link-preview
• @angular-material-extensions/pages
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/jumbotron
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/combination-generator

---

Support

• Drop an email to: Anthony Nahas
• or open an appropriate issue
• let us chat on Gitter

Built by and for developers ❤️ we will help you 👊

---

License

Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)