Repository files navigation

Angular UI component forfirebase authentication.This library is an angular module (including angular components and services) that allows to authenticateyour users with your firebase project. NgxAuthFirebaseUI is compatible withangular material andangular flexLayout.

If you prefer to develop with bootstrap rather than with material design, please check this project@firebaseui/ng-bootstrap

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

If you like this project, supportngx-auth-firebaseuiby starring ⭐ and sharing it 📢

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

• 💝 it uses a responsive and accessible web design UX/UI from google material concepts and components (supporting desktop, tablet and mobile view) incl. smooth animations for a better UX.
• 💄 pick up your own theme! change the primary, accent and warn colors whenever you need (e.g to support light and dark themes)
• 🚢 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 asnackbar when an error orany 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 viangx-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
• support of i18n

• <ngx-auth-firebaseui> used for the authentication processsee more
• <ngx-auth-firebaseui-register> standalone registration component to create new accountssee more
• <ngx-auth-firebaseui-login> standalone login component to use already created accountssee more
• <ngx-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter, github, microsoft and yahoosee more
• <ngx-auth-firebaseui-user> used to display/edit the data of the current authenticated user in form of a material cardsee more
• <ngx-auth-firebaseui-avatar> used to display/edit the data of the current authenticated user in the toolbarsee more

• anonymously
• email and password (traditional)
• google
• apple
• facebook
• twitter
• github
• Microsoft
• Yahoo
• phonenumber 🔜

• sign up
• sign in
• sign in Anonymously | with google, apple, facebook, twitter, github, microsoft, yahoo
• 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 phonenumber
• firestore auto sync 🔥
• do not allow users to create new accounts before checking the terms of services and private policy - for mor info check thishere

• LoggedInGuard used to protect angular routes from unauthenticated users (with fallback routes viaNgxAuthFirebaseUIConfig)

• angular material theme

• angular material icons

• angular cdk - v14.x

• angular material - v14.x

• angular forms - v14.x

• angular animations - v14.x

• angular router - v14.x

• angular flex-layout v14.0.0-beta.41

• @angular/fire - v7.x

• firebase - v9.x

the full tutorial guide can be foundhere

take a look at live example with firestore's synchronizationhere

• sign in

in combination withngx-auth-firebaseui-user

• Sign up - registration

Please note: when the view port is getting too small, the layout will beautomatically change tocolumn

• Before

• After

"peerDependencies": {"@angular/core":"^13.x","@angular/animations":"^13.x","@angular/cdk":"^13.x","@angular/flex-layout":"^13.0.0-beta.38","@angular/forms":"^13.x","@angular/material":"^13.x","@angular/fire":"7.x","firebase":"9.x",  }

• v1.x should be used with angular v7 projects
• v3.x should be used with angular v8 projects
• v4.x should be used with angular v9/10 projects
• v5.x should be used with angular v11 projects
• v6.x should be used with angular v12/13 projects
• v7.x should be used with angular v14 projects

help!

• Angular (requires Angular 2 or higher, developed with 13.x) - obviously
• @angular-material-extensions/password-strength

the@angular-material-extensions/password-strength is usedto indicate how secure is the provided password when registering a new firebase user e.g:

If Angular Material Design is not setup, just runng add @angular/materiallearn more

Now add the library via theangular schematics

ng add ngx-auth-firebaseui

• ✔️ peer dependencies will be automatically added the package.json and installed
• ✔️ngx-auth-firebaseui 's module will be automatically imported to the root module (just replacePUT_YOUR_FIREBASE_API_KEY_HERE with your firebase api key)
• ✔️ngx-auth-firebaseui 's assets will be automatically added theangular.json file

Install above dependencies vianpm.

Now installngx-auth-firebaseui via:

npm install --save ngx-auth-firebaseui

Install the dependencies@angular-material-extensions/password-strength via:

npm install --save @angular-material-extensions/password-strength

npm i -s @angular/material @angular/cdk @angular/flex-layout @angular/forms @angular/animations @angular/router

Firebase deps

npm i -s firebase @angular/fire

-> continue by following the instructionshere

Once installed you need to import the main module:

import{NgxAuthFirebaseUIModule}from'ngx-auth-firebaseui';

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

and then from your AngularAppModule:

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';// Import your libraryimport{NgxAuthFirebaseUIModule}from'ngx-auth-firebaseui';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';@NgModule({declarations:[AppComponent],imports:[BrowserModule,BrowserAnimationsModule,// Specify the ngx-auth-firebaseui library as an importNgxAuthFirebaseUIModule.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'}),],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

Other modules in your application can simply importNgxAuthFirebaseUIModule:

import{NgxAuthFirebaseUIModule}from'ngx-auth-firebaseui';@NgModule({declarations:[OtherComponent, ...],imports:[NgxAuthFirebaseUIModule, ...],})exportclassOtherModule{}

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 forngx-auth-firebaseui:

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

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';// Import your libraryimport{NgxAuthFirebaseUIModule}from'ngx-auth-firebaseui';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';@NgModule({declarations:[AppComponent],imports:[BrowserModule,BrowserAnimationsModule,// Specify the ngx-auth-firebaseui library as an importNgxAuthFirebaseUIModule.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 firestoretoastMessageOnAuthSuccess:false,// whether to open/show a snackbar message on auth success - default : truetoastMessageOnAuthError:false,// whether to open/show a snackbar message on auth error - default : trueauthGuardFallbackURL:'/loggedout',// url for unauthenticated users - to use in combination with canActivate feature on a routeauthGuardLoggedInURL:'/loggedin',// url for authenticated users - to use in combination with canActivate feature on a routepasswordMaxLength:60,// `min/max` input parameters in components should be within this range.passwordMinLength:8,// Password length min/max in forms independently of each componenet min/max.// Same as password but for the namenameMaxLength:50,nameMinLength:2,// If set, sign-in/up form is not available until email has been verified.// Plus protected routes are still protected even though user is connected.guardProtectedRoutesUntilEmailIsVerified:true,enableEmailVerification:true,// default: trueuseRawUserCredential:true,// If set to true outputs the UserCredential object instead of firebase.User after login and signup - Default: false}),],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

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

If you want to prevent a route to be accessed from non authorized users, you canuse a built inLoggedInGuard angular router guard.

1. enter the fallback url in theNgxAuthFirebaseUIConfig underauthGuardFallbackURL
2. enter the logged in url in theNgxAuthFirebaseUIConfig underauthGuardLoggedInURL

import{NgxAuthFirebaseUIModule}from'ngx-auth-firebaseui';NgxAuthFirebaseUIModule.forRoot(firebaseKey,firebaseAppNameFactory,{authGuardFallbackURL:'examples/logged-out',authGuardLoggedInURL:'examples/logged-in',}),

if the user is logged in, he will be redirected toexamples/logged-in route (per example),otherwise he will be redirected to theexamples/logged-out route

3. import theLoggedInGuard in your router module

import{NgModule}from'@angular/core';import{Routes,RouterModule}from'@angular/router';import{LoggedInGuard}from'ngx-auth-firebaseui';constroutes:Routes=[{path:'',redirectTo:'home',pathMatch:'full'},{path:'secured',loadChildren:'app/secured/secured.module#SecuredModule',canActivate:[LoggedInGuard]}];@NgModule({imports:[RouterModule.forRoot(routes)],exports:[RouterModule]})exportclassAppRoutingModule{}

• ngx-linkifyjs
• @angular-material-extensions/components
• @angular-material-extensions/password-strength
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/fab-menu
• @angular-material-extensions/select-country
• @angular-material-extensions/select-icon
• @angular-material-extensions/pages
• @angular-material-extensions/link-preview
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/jumbotron
• angular-material-extensions/freelancer-theme
• @firebaseui/ng-bootstrap

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

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

https://www.youtube.com/watch?v=qP5zw7fjQgo&feature=emb_logo&ab_channel=Fireshiphttps://www.youtube.com/watch?v=KpfJCEvpS9g&t=2s&ab_channel=JsWiz

1. Nahaus.de

Are you missing your project or you app? PR me to publish it on the README

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

Best angular and firebase stuff by Jeff Delaney onfirebase.io

check thisout

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