OmarKhanfer/firebase-usermanagement

Library's Components
Supported Providers
Supported Processes and Actions
Supported Angular Guards
Peer Dependencies
Installation
testing

Library's Components

<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

Supported Providers:

email and password (traditional)
google

Supported Processes and Actions:

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)

Peer Dependencies - please make sure that peerDependencies are installed

"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"
  }

Installation

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

start cypress testing

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

OmarKhanfer / firebase-usermanagement

Table of Contents