@anli/auth v1.1.0

Ionic Module Auth

Install

npm install @anli/auth --save

npm install @ngrx/store  @ngrx/effects @ngrx/entity --save
npm install @ngrx/store-devtools --save-dev

npm install angularfire2@5.0.0-rc.4 --save
npm install firebase@4.13.1 --save

npm install ramda --save

Usage

Update to src/environments/environment.ts:

export const environment = {
  production: false,
  auth0: {
    clientId: '',
    domain: '',
  },
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  }
}

Update to src/app/app.module.ts:

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {
  AuthModule,
  Auth0Module,    // only if using auth0
  FirebaseModule, // only if using firebase
} from '@anli/auth';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
...
@NgModule({
  ...
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AuthModule,
    Auth0Module.forRoot(environment.auth0), // only if using auth0
    FirebaseModule,                         // only if using firebase
    EffectsModule.forRoot([]),
    StoreModule.forRoot({ }),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),

Update to login.module.ts:

import { ComponentsModule } from '@anli/auth';
...
@NgModule({
  ...
  imports: [
    ...
    ComponentsModule,

Update to login.html:

<auth-login-form #loginForm (onLogin)="login($event)"></auth-login-form>

<ion-row justify-content-start padding-right padding-left>
  <button ion-button margin-top
    (click)="login(loginForm.form)" >
    Login
  </button>
</ion-row>

Update to login.ts:

import {
  Logout, selectError,
  FirebaseLogin as Login, // only if using firebase
  Auth0Login as Login, // only if using auth0
} from '@anli/auth';
import { Store, select } from '@ngrx/store';
...
export class LoginPage {
  ...
  constructor(
    ...
    public loadingCtrl: LoadingController,
    public store: Store<any>,
    public toastCtrl: ToastController,
  ) { }

  login(form: FormGroup) {
    const email = form.value.email;
    const password = form.value.password;

    let loading = this.loadingCtrl.create({ content: 'Please wait...' });
    loading.present();

    this.store.dispatch(new Login(email, password));
    this.store
      .pipe(
        select(selectError),
        filter(res => !R.isNil(res)),
        first(),
      )
      .subscribe((res: { ok: boolean, response?: string }) => {
        loading.dismiss();

        if (res.response) {
          this.notification(res.response);
        }
        
        if (res.ok) {
          // this.navCtrl.setRoot('HomePage');
        }
      })
    
  }

  notification(message: string, duration: number = 3000): void {
    let toast = this.toastCtrl.create({
      message,
      duration,
    });
    toast.present();
  }