Skip to content
Angular Bootstrap UI library for firebase authentication powered by @ng-bootstrap and @angularfire2
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore(ci): added circle ci configuration Jun 28, 2018
.github chore(package): initial commit Jun 28, 2018
assets docs(project): added jetbrains support Nov 2, 2018
config chore(package): added config files for jest Jun 28, 2018
demo fix(demo): removed unwanted libraries Jan 10, 2019
src refactor(package): replaced the angularfire2's package with @angular/… Oct 4, 2018
.editorconfig
.gitignore chore(package): initial commit Jun 28, 2018
.travis.yml test(package): fix error related to jest Aug 1, 2018
.yo-rc.json chore(package): initial commit Jun 28, 2018
CHANGELOG.md chore(release): bump version number to 0.4.1 Jan 10, 2019
LICENSE docs(project): added mit license and empty changelog file Jun 28, 2018
README.md
greenkeeper.json chore: add Greenkeeper config file Jul 4, 2018
gulpfile.js refactor(package): replaced the angularfire2's package with @angular/… Oct 4, 2018
karma.conf.js chore(package): added karma and webpack config files Jun 28, 2018
package-lock.json feat(package): upgraded rollup to v1 Jan 10, 2019
package.json chore(release): bump version number to 0.4.1 Jan 10, 2019
tsconfig.json chore(package): added tslint and tsconfig files Jun 28, 2018
tslint.json chore(package): removed rxjs from import-blacklist in tslint Jan 10, 2019
webpack.config.js chore(package): added karma and webpack config files Jun 28, 2018

README.md

@firebaseui/ng-bootstrap - Angular Bootstrap UI library for firebase authentication powered by @ng-bootstrap

npm version npm demo Join the chat at https://gitter.im/firebaseui/Lobby CircleCI branch Build Status Coverage Status dependency Status devDependency Status Greenkeeper Badge license

firebaseui/ng-bootstrap - sign in, sign up demo image firebaseui/ng-bootstrap - reset password demo image

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 did you like this project, support @firebaseui/ng-bootstrap by starring ⭐️ and sharing it 📢

If you prefer to develop with material design rather than with bootstrap, please check this project ngx-auth-firebaseui

Table of Contents

ngx-auth-firebaseui vs firebaseui-web

Features @firebaseui/ng-bootstrap ngx-auth-firebaseui firebaseui
Sign Up ✔️ ✔️ ✔️
Sign In ✔️ ✔️ ✔️
Sign In Anonymously ✔️ ✔️
Sign In with Google ✔️ ✔️ ✔️
Sign In with Facebook ✔️ ✔️ ✔️
Sign In with Twitter ✔️ ✔️ ✔️
Sign In with Github ✔️ ✔️ ✔️
Sign In with PhoneNumber 🔜 ✔️
Sign out ✔️ ✔️
Sign in/up progress indicator ✔️ ✔️
Password Strength indicator 🔜 ✔️
Forgot/Reset Password ✔️ ✔️
Delete account 🔜 ✔️
User Profile 🔜 ✔️
Check whether user's email is verified 🔜 ✔️
Edit user's display name (incl. validation) 🔜 ✔️
Edit user's email (incl. validation) 🔜 ✔️
Edit user's phone number (incl. validation) 🔜 ✔️
Configure your favorite auth provider in runtime ✔️ ✔️
Sync user'auth with Firestore read more ✔️ ✔️
Angular v2-6 friendly ✔️ ✔️
Internationalization (i18n) 🔜 @angular v7 🔜 @angular v7 ✔️
Ionic/cordova support 🔜 @firebaseui/ionic-auth 🔜 @firebaseui/ionic-auth
Real time form validation ✔️ ✔️
Easy to integrate ✔️ ✔️
Support Server Side Rendering ✔️ ✔️
Support SPA without further config ✔️ ✔️
Support Safari private browsing ✔️ ✔️
AWESOME 🔜 ✔️ ⁉️

Why to use @firebaseui/ng-boostrap ?

Library's components

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

Supported Providers:

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

Supported Processes and Actions:

Demo

  • Try it out
if(issues || feedback || you_need_more_features){
    // send me an email -> to: anthony.na@hotmail.de
}

Dependencies

Requirements:

npm install --save @ng-bootstrap/ng-bootstrap bootstrap @angular/fire firebase font-awesome @angular/forms @angular/animations

Installation

Install above dependencies via npm.

Now install @firebaseui/ng-bootstrap via:

npm install --save @firebaseui/ng-bootstrap

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 @firebaseui/ng-bootstrap:

map: {
  '@firebaseui/ng-bootstrap': 'node_modules/@firebaseui/ng-bootstrap/bundles/@firebaseui/ng-bootstrap.umd.js',
}

Once installed you need to import the main module:

import { NgbAuthFirebaseUIModule } from '@firebaseui/ng-bootstrap';

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 NgbAuthFirebaseUIModule.forRoot()):

import { NgbAuthFirebaseUIModule } from '@firebaseui/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbAuthFirebaseUIModule.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'
                                              }), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgbAuthFirebaseUIModule:

import { NgbAuthFirebaseUIModule } from '@firebaseui/ng-bootstrap';

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

Usage

<ngb-auth-firebaseui></ngb-auth-firebaseui>

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

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

or

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

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

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

<ngb-auth-firebaseui-providers></ngb-auth-firebaseui-providers>

<!-- You can now use the library component in app.component.html  -->
<ngb-auth-firebaseui-providers layout="column"></ngb-auth-firebaseui-providers>

API

<ngb-auth-firebaseui></ngb-auth-firebaseui>

option bind type default description
guestEnabled Input() boolean true whether the user can sign in and continue as guest
providers Input() string[] ['all'] or [AuthProvider.All] choose your favorite authentication provider: google
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!

How to disable users to sign in and continue as guest, use the guestEnabled input

<ngb-auth-firebaseui [guestEnabled]="false"
                     (onSuccess)="printUser($event)"
                     (onError)="printError($event)">
</ngb-auth-firebaseui>

How to configure your input providers ? see the examples

e.g: in your component, import the AuthProvider enum to pick up your favorite provider:

import {OnInit} from '@angular/core';
import {AuthProvider} from '@firebaseui/ng-bootstrap';

export class ExampleComponent implements OnInit {

  providers = AuthProvider;

  ngOnInit() {
  }
}

in your template -->

  <ngb-auth-firebaseui
  [providers]="[providers.Google, providers.Facebook, providers.Twitter]"
  (onSuccess)="printUser($event)"
   (onError)="printError()"></ngb-auth-firebaseui>

or

  <ngb-auth-firebaseui
  [providers]="['google', 'facebook', 'twitter']"
  (onSuccess)="printUser($event)"
  (onError)="printError()">
</ngb-auth-firebaseui>

Run Demo App Locally

$ git clone https://github.com/firebaseui/ng-bootstrap.git
  • link the ngb-auth-firebaseui package use gulp globally
$ gulp link
  • navigate to the demo app directory
$ cd demo
  • install the dependencies
$ npm i
  • run/start/serve the app
$ npm run start

or

$ ng serve --open
  • the app is now hosted by http://localhost:4200/

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

Other Angular Libraries


Support

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


jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm


License

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

You can’t perform that action at this time.