Repository files navigation

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

If did you like this project, support@firebaseui/ng-bootstrapby starring ⭐ and sharing it 📢

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

• @firebaseui/ng-bootstrap ❤️ ngx-auth-firebaseui | vs firebaseui-web
• Why to use @firebaseui/ng-bootstrap ?
• Library's components
• Supported Providers
• Supported Processes and Actions
• Requirements
• Demo
• Features
• Examples
• Documentation
• Screenshots
• Peer Dependencies
• Dependencies
• Installation
• Usage
• API
• Additional Requirements - font awesome icons
• Additional Requirements - assets
• Run Demo App Locally
• Development
• Other Angular Libraries
• Support
• License

• 💝 it uses a responsive and accessible web design UX/UI from twitter bootstrap concepts and components (supporting desktop and mobile view).
• 💄 pick up your own theme! change the primary, secondary and danger colors whenever you need (e.g to support light and dark themes) via scss - bootstrap
• 🚢 super easy to use with an angular based project (project that is created with theangular-cli)
• 🔜 optional configuration
• 🔜 configure your authentication providers in runtime
• ♻️ reusable components for every project that needs an authentication with a firebase project/app.
• 🔜 built in feedback mechanism in form of aalert when an error or any important event occurred.
• 🔜 ability to sign out or even to delete totally the account
• 👻 your client does not want to create an account in your project? Let him to sign in anonymously!
• 🔜 user profile component to display user's data using viangb-auth-firebaseui-user
• ⚡ update user profile as feature
• 🔥Sync user's authentication with FIRESTOREAUTOMATICALLY
• 💪 Forgot Password feature! Go and let your users to recover their passwords easily
• 🎉 Supports SSR - Server Side Rendering

• <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

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

• sign up
• sign in
• sign in Anonymously | with google, facebook, twitter, github
• sign out
• validation of password's strength while creating a new account usingngb-material-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 🔥

• Try it out

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

• Angular (requires)

• bootstrap - v4
• ng-bootstrap - v4
• @angular/fire - v5
• firebase - v5.x
• font-awesome - v4.x
• angular forms - v7.x
• angular animations - v7.x

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

Install above dependencies vianpm.

Now install@firebaseui/ng-bootstrap via:

npm install --save @firebaseui/ng-bootstrap

Note:If you are usingSystemJS, 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 slightlydifferent 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]})exportclassAppModule{}

Other modules in your application can simply importNgbAuthFirebaseUIModule:

import{NgbAuthFirebaseUIModule}from'@firebaseui/ng-bootstrap';@NgModule({declarations:[OtherComponent, ...],imports:[NgbAuthFirebaseUIModule, ...],})exportclassOtherModule{}

<!-- 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>`})classAppComponent{printUser(event){console.log(event);}printError(event){console.error(event);}}

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

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

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';exportclassExampleComponentimplementsOnInit{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>

• clone this repo by running

$ git clone https://github.com/firebaseui/ng-bootstrap.git

• link the ngb-auth-firebaseui packageuse 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 byhttp://localhost:4200/

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

$ npm run build

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

• Drop an email to:Anthony Nahas
• or open an appropriateissue
• let us chat onGitter

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

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

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