@firepixy/ngx-auth-firebaseui
Advanced tools
Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication
Angular UI component for firebase authentication. This library is an angular module (including angular components and services) that allows to authenticate your users with your firebase project. NgxAuthFirebseUI is compatible with angular material and angular flexLayout.
If you prefer to develop with bootstrap rather than with material design, please check this project @firebaseui/ng-bootstrap
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 ngx-auth-firebaseui by starring :star: and sharing it :loudspeaker:
| Features | ngx-auth-firebaseui | firebaseui |
|---|---|---|
| Sign Up | :heavy_check_mark: | :heavy_check_mark: |
| Sign In | :heavy_check_mark: | :heavy_check_mark: |
| Sign In Anonymously | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Google | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Apple | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Facebook | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Twitter | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Github | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Microsoft | :heavy_check_mark: | :heavy_check_mark: |
| Sign In with Yahoo | :heavy_check_mark: | :heavy_check_mark: |
Sign In with Phonenumber | :x: | :heavy_check_mark: |
| Sign out | :heavy_check_mark: | :x: |
| Sign in/up progress indicator | :heavy_check_mark: | :x: |
| Password Strength indicator | :heavy_check_mark: | :x: |
| Forgot/Reset Password | :heavy_check_mark: | :x: |
| Password Strength Meter | :heavy_check_mark: | :x: |
| Delete account | :heavy_check_mark: | :x: |
| Login Authentication Guard | :heavy_check_mark: | :x: |
| User Profile | :heavy_check_mark: | :x: |
| Check whether user's email is verified | :heavy_check_mark: | :x: |
| Edit user's display name (incl. validation) | :heavy_check_mark: | :x: |
| Edit user's email (incl. validation) | :heavy_check_mark: | :x: |
Edit user's phone number (incl. validation) | :heavy_check_mark: | :x: |
| Configure your favorite auth provider in runtime | :heavy_check_mark: | :x: |
| Sync user'auth with Firestore read more | :heavy_check_mark: | :x: |
| Animations | :heavy_check_mark: | :x: |
| Angular v2-8 friendly | :heavy_check_mark: | :x: |
| Internationalization (i18n) | :heavy_check_mark: | :heavy_check_mark: |
| Ionic/cordova support | :soon: @firebaseui/ionic-auth | :x: |
| Real time form validation | :heavy_check_mark: | :x: |
| Easy to integrate | :heavy_check_mark: | :x: |
| Support Server Side Rendering | :heavy_check_mark: | :x: |
| Support SPA without further config | :heavy_check_mark: | :x: |
| Support Safari private browsing | :heavy_check_mark: | :interrobang: |
| AWESOME | :heavy_check_mark: | :interrobang: |
any important event occurred.ngx-auth-firebaseui-user<ngx-auth-firebaseui> used for the authentication process see more<ngx-auth-firebaseui-register> standalone registration component to create new accounts see more<ngx-auth-firebaseui-login> standalone login component to use already created accounts see more<ngx-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter, github, microsoft and yahoo see more<ngx-auth-firebaseui-user> used to display/edit the data of the current authenticated user in form of a material card see more<ngx-auth-firebaseui-avatar> used to display/edit the data of the current authenticated user in the toolbar see morenumber :soon:numberLoggedInGuard used to protect angular routes from unauthenticated users (with fallback routes via NgxAuthFirebaseUIConfig)the full tutorial guide can be found here
take a look at live example with firestore's synchronization here
v8
in combination with ngx-auth-firebaseui-user
v7
Please note: when the view port is getting too small, the layout will be
automatically change to column
"peerDependencies": {
"@angular/core": "^9.x",
"@angular/animations": "^9.x",
"@angular/cdk": "^9.x",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/forms": "^9.x",
"@angular/material": "^9.x",
"@angular/fire": "5.4.x",
"firebase": "7.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 projects
the @angular-material-extensions/password-strength is used to indicate how secure is the provided password when registering a new firebase user e.g:
If Angular Material Design is not setup, just run ng add @angular/material learn more
Now add the library via the angular schematics
ng add ngx-auth-firebaseui
ngx-auth-firebaseui 's module will be automatically imported to the root module (just replace PUT_YOUR_FIREBASE_API_KEY_HERE with your firebase api key)ngx-auth-firebaseui 's assets will be automatically added the angular.json fileInstall above dependencies via npm.
Now install ngx-auth-firebaseui via:
npm install --save ngx-auth-firebaseui
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 instructions here
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 slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgxAuthFirebaseUIModule .forRoot()):
and then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { 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 import
NgxAuthFirebaseUIModule.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]
})
export class AppModule { }
Other modules in your application can simply import NgxAuthFirebaseUIModule:
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxAuthFirebaseUIModule, ...],
})
export class OtherModule {
}
Note:If you are using
SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,mapneeds 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 library
import { 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 import
NgxAuthFirebaseUIModule.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
authGuardFallbackURL: '/loggedout', // url for unauthenticated users - to use in combination with canActivate feature on a route
authGuardLoggedInURL: '/loggedin', // url for authenticated users - to use in combination with canActivate feature on a route
passwordMaxLength: 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 name
nameMaxLength: 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: true
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the library is imported, you can use its components, directives and pipes in your Angular application:
<ngx-auth-firebaseui></ngx-auth-firebaseui> see the usage<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login> see the usage<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register> see the usage<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers> see the usage<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> see the usage<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar> see the usage<ngx-auth-firebaseui></ngx-auth-firebaseui> see the api<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login> see the api<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register> see the api<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers> see the api<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> see the api<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar> see the apiIf you want to prevent a route to be accessed from non authorized users, you can
use a built in LoggedInGuard angular router guard.
NgxAuthFirebaseUIConfig under authGuardFallbackURLNgxAuthFirebaseUIConfig under authGuardLoggedInURLimport {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 to examples/logged-in route (per example),
otherwise he will be redirected to the examples/logged-out route
LoggedInGuard in your router moduleimport {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LoggedInGuard} from 'ngx-auth-firebaseui';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'secured',
loadChildren: 'app/secured/secured.module#SecuredModule',
canActivate: [LoggedInGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Built by and for developers :heart: we will help you :punch:
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
Copyright (c) 2019-2020 Anthony Nahas. Licensed under the MIT License (MIT)
FAQs
Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication
We found that @firepixy/ngx-auth-firebaseui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.