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

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

Component API

$3

- 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 Optional. The HTML in this template is appended to the component.
- Outputs
- success: EventEmitter
- 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: Sign Out

#### Sign In Component Usage
Import NgxFirebaseAuthSignInModule into the module which contains your sign in route...

`ts
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...
`html


By signing in or signing up for example.com, you agree to our
Terms of Service and
Privacy Policy.



`
...and handle the outputs in your component code...
`ts
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(['/']);
}

}
`




$3

- selector: ngx-firebase-auth-oob
- Inputs (none)
- Outputs
- success: EventEmitter See below.
- navigationError: EventEmitter 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...

`ts
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...

`html




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

`ts
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.

$3

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.

$3

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.

$3

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.

$3

Run ng test to execute the unit tests via Karma.

$3

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

$3

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