npm

Need private packages and team management tools?Check out npm Orgs. »

@nowzoo/ngx-firebase-auth

0.2.5 • Public • Published

NgxFirebaseAuth

Components for email-first sign in and out-of-band (oob) actions (reset password, etc). Designed for Angular single page apps with routing.

Example app implementation code

Why?

The current "drop-in" Firebase auth library did not meet the needs of several Angular projects. Your results may vary.

Features:

  • All configuration happens via component inputs.
  • Explicit sign in success output, passing an instance of auth.UserCredential.
  • Sign out link.
  • An Oob Component designed to live on a separate route.

Notes

  • This is a work in progress.
  • The component styling is based on Bootstrap.
  • Does not currently support email link and phone sign-in. Supports sign in by password + Google, Facebook, Twitter and GitHub.
  • Depends upon angularfire2

Install

npm i @nowzoo/ngx-firebase-auth --save

Component API

Sign In Component

  • selector: ngx-firebase-auth-sign-in
  • Inputs
    • oAuthProviderIds: string[] Optional. The ids of OAuth providers you want to enable.
    • oAuthProviderFactory: (providerId: string) => auth.AuthProvider Optional. Pass your function for creating providers. If no function is provided here, or the function does not return a provider for a particular provider id, the component will create a default provider.
    • useOAuthPopup: boolean Optional. Default: false. Whether or not to use a popup rather than a redirect for OAuth sign in. See the example app, which uses ngx-device-detector to choose which method to use.
    • tosTemplate: TemplateRef<any> Optional. The HTML in this template is appended to the component.
  • Outputs
    • success: EventEmitter<auth.UserCredential>
    • mode: EventEmitter<'signIn' | 'resetPassword'> Use this to set the route title.

Sign In Component Notes

  • Only the OAuth providers you pass in oAuthProviderIds will be shown as sign up options for new users.
  • For existing users, all oAuth providers for that user will be displayed as sign in options.
  • Only the password and the Twitter, Google, GitHub and Facebook providers are currently supported.
  • Create a sign out link: <a routerLink="path/to/your/route" [queryParams]="{action: 'signOut'}">Sign Out</a>

Sign In Component Usage

Import NgxFirebaseAuthSignInModule into the module which contains your sign in route...

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { NgxFirebaseAuthSignInModule } from '@nowzoo/ngx-firebase-auth';
 
import { RouteComponent } from './route/route.component';
 
const routes: Routes = [
  {path: '', component: RouteComponent}
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    NgxFirebaseAuthSignInModule
  ],
  declarations: [RouteComponent]
})
export class SignInModule { }

Stick an instance of the sign in component into the HTML of your component...

<!-- route.component.html -->
<ng-template #tos>
  By signing in or signing up for example.com, you agree to our
  <a href="/tos">Terms of Service</a> and
  <a href="/privacy">Privacy Policy</a>.
</ng-template>
 
<div class="row">
  <div class="col-sm-8 offset-md-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
    <h1>{{routeTitle}}</h1>
    <hr>
    <ngx-firebase-auth-sign-in
      [oAuthProviderIds]="['google.com']"
      [tosTemplate]="tos"
      [useOAuthPopup]="deviceDetector.isDesktop()"
      (success)="onSuccess($event)"
      (mode)="onMode($event)">
    </ngx-firebase-auth-sign-in>
  </div>
</div>

...and handle the outputs in your component code...

import { Component } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import { Router } from '@angular/router';
import { auth } from 'firebase/app';
@Component({
  selector: 'app-route',
  templateUrl: './route.component.html',
  styleUrls: ['./route.component.css']
})
export class RouteComponent {
 
  routeTitle: string = null;
  constructor(
    public deviceDetector: DeviceDetectorService,
    private router: Router
  ) { }
 
 
  onMode(mode: 'resetPassword' | 'verifyEmail' | 'recoverEmail') {
    switch (mode) {
      case 'resetPassword':
        this.routeTitle = 'Reset Password';
        break;
      default:
        this.routeTitle = 'Sign In';
        break;
    }
  }
 
  onSuccess(cred: auth.UserCredential) {
    console.log(cred);
    console.log(`Welcome, ${cred.user.displayName}!`);
    console.log(`You signed in with ${cred.additionalUserInfo.providerId}.`);
    if (cred.additionalUserInfo.isNewUser) {
      console.log(`You are a newly registered user!`);
    } else {
      console.log(`You are a returning user!`);
    }
    this.router.navigate(['/']);
  }
 
}

Oob Component

  • selector: ngx-firebase-auth-oob
  • Inputs (none)
  • Outputs
    • success: EventEmitter<INgxFirebaseAuthOobSuccess> See below.
    • navigationError: EventEmitter<void> Emitted when one or more of the oob parameters (oobCode and mode) is messing from the querystring. You should handle this by redirecting the user in some way.
    • mode: EventEmitter<'resetPassword' | 'verifyEmail' | 'recoverEmail'> Use this to set the window or route title.

Interface INgxFirebaseAuthOobSuccess

  • mode: 'resetPassword' | 'verifyEmail' | 'recoverEmail';
  • info: auth.ActionCodeInfo
  • cred?: auth.UserCredential Only populated on reset password, when we sign the user in after saving the password.
  • user?: User Populated if the user is signed in.

Oob Component Notes

  • Only the resetPassword, verifyEmail and recoverEmail oob modes are supported.

Oob Component Usage

Import NgxFirebaseAuthOobModule into the module which contains your sign in route...

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { NgxFirebaseAuthOobModule } from '@nowzoo/ngx-firebase-auth';
import { RouteComponent } from './route/route.component';
 
const routes: Routes = [
  {path: '', component: RouteComponent}
];
 
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    NgxFirebaseAuthOobModule
  ],
  declarations: [RouteComponent]
})
export class OobModule { }

Stick an instance of the oob component into the HTML of your component...

<!-- route.component.html -->
<div class="row">
  <div class="col-sm-8 offset-md-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
    <h1>
      {{routeTitle}}
    </h1>
    <hr>
    <ngx-firebase-auth-oob
      (mode)="onMode($event)"
      (navigationError)="onNavigationError()"
      (success)="onSuccess($event)">
    </ngx-firebase-auth-oob>
  </div>
</div>

... and handle the outputs in your code...

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { INgxFirebaseAuthOobSuccess } from '@nowzoo/ngx-firebase-auth';
@Component({
  selector: 'app-route',
  templateUrl: './route.component.html',
  styleUrls: ['./route.component.css']
})
export class RouteComponent {
 
  routeTitle: string = null;
  constructor(
    private router: Router
  ) { }
 
 
  onMode(mode: 'resetPassword' | 'verifyEmail' | 'recoverEmail') {
    switch (mode) {
      case 'resetPassword':
        this.routeTitle = 'Reset Password';
        break;
      case 'recoverEmail':
        this.routeTitle = 'Recover Email';
        break;
      case 'verifyEmail':
        this.routeTitle = 'Verify Email';
        break;
    }
  }
 
  onNavigationError() {
    this.router.navigate(['/']);
  }
 
  onSuccess(success: INgxFirebaseAuthOobSuccess) {
    switch (success.mode) {
      case 'resetPassword':
        // the user has saved her new password and is signed in...
        console.log(`Welcome, ${success.user.displayName}!`);
        this.router.navigate(['/']);
        break;
      default:
        // etc...
        break;
    }
  }
 
}

Development

This project was generated with Angular CLI version 6.0.7.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

install

npm i @nowzoo/ngx-firebase-auth

Downloadsweekly downloads

2

version

0.2.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability