Table of Contents


  • <ng-register> standalone registration component to create new accounts
  • <ng-login-email-password> standalone login component with email & password
  • <ng-login-google> standalone login component with the google provider
  • <ng-user-settings> standalone user settings component
  • <ng-admin-settings> standalone admin settings component, for implementation click here
  • <ng-create-group> standalone create group component
  • <ng-group-list> standalone group list of current logged in user
  • <ng-group-settings> standalone group settings component of given group
  • <ng-group-users-settings> standalone user settings of given group

for an complete guide of the files go click here


  • email and password (traditional)
  • google

  • sign up
  • sign in
  • sign out
  • delete user's account
  • Impersonate a user (admin only)
  • firestore sync

Supported Angular Guards

  • LoggedInGuard used to protect angular routes from unauthenticated users (with fallback routes via NgxAuthFirebaseUIConfig)
  • AdminAuthGuard used to protect angular routes from non admin users (with fallback routes via NgxAuthFirebaseUIConfig)

"peerDependencies": {
    "@angular/common": "^8.2.0",
    "@angular/core": "^8.2.0",
    "@angular/router": "^8.2.10",
    "@angular/fire": "^5.2.1",
    "@angular/material": "8.2.3",
    "firebase": "^6.6.2",
    "rxjs": "~6.4.0"
  }

1. Install with npm

Install all of the above dependencies with npm Install the library with npm

npm install ng-usermanagement

2. Configs

Once you have installed the library you need to import the module into the main module.

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

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

// Import the library
import { NgUserManagementModule } from 'ng-usermanagement';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

const firebaseConfig = {
  authGuardLoggedInURL: "[fallback Url]" // Fallback to this url if the user isn't logged in
  firebaseConfig: {
    apiKey: "[Project Key]",
    authDomain: "[Project Id].firebaseapp.com",
    databaseURL: "https://[Project Id].firebaseio.com",
    projectId: "[Project Id]",
    storageBucket: "[Project Id].appspot.com",
    messagingSenderId: "[messageSender Id]",
    appId: "[App Id]"
  }
};

const inputValidationConfig = {
  required: 'Required',
  email: 'Invalid email address',
  verifyPassword: 'Verify your password',
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgUserManagementModule.forRoot(firebaseConfig, inputValidationConfig),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. firebase cloud functions

Copy and paste the firebase cloud functions into your cloud functions folder. If the folder doens't exist yet run the following command.

firebase init functions

copy the following cloud functions here

deploy the cloud functions with the following command.

firebase deploy --only functions

4. firestore rules

Copy and paste the firestore rules into your firestore rules file. If the file doesn't exist yet run the following command.

firebase init firestore

copy the following firestore rules here

deploy the firestore rules with the following command.

firebase deploy --only firestore:rules

For development only

ng serve
npm run build:testConfig
npx cypress open

start unit test

ng test ng-usermanagement

publishing to npm

Build the library.

ng build ng-usermanagement

navigate to the dist folder cd dist/ng-usermanagement

cd dist/ng-usermanagement
npm publish

deploy documentation to firebase

Build the compodoc file & serve it for testing if needed

npm run compodoc
npm run compodoc:serve

Copy and paste the files in documentation into the public folder. Run the deploy command to firebase

firebase deploy --only hosting