24-328 Using ngrx for signin

src/app/auth/ngrx/auth.actions.ts

@@ -3,6 +3,7 @@ import { Action } from '@ngrx/store';
 export const TRY_SIGNUP = 'TRY_SIGNUP';
 export const SIGNUP = 'SIGNUP';
 export const SIGNIN = 'SIGNIN';
+export const TRY_SIGNIN = 'TRY_SIGNIN';
 export const LOGOUT = 'LOGOUT';
 export const SET_TOKEN = 'SET_TOKEN';
 
@@ -16,6 +17,12 @@ export class Signup implements Action {
     readonly type = SIGNUP;
 }
 
+export class TrySignin implements Action {
+    readonly type = TRY_SIGNIN;
+
+    constructor(public payload: {username: string, password: string}) {}
+}
+
 export class Signin implements Action {
     readonly type = SIGNIN;
 }
@@ -30,4 +37,4 @@ export class SetToken implements Action {
     constructor(public payload: string) {}
 }
 
-export type AuthActions = TrySignup | Signup | Signin | Logout | SetToken;
+export type AuthActions = TrySignup | Signup | TrySignin | Signin | Logout | SetToken;

src/app/auth/ngrx/auth.effects.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { Actions, Effect } from '@ngrx/effects';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
@@ -23,12 +24,32 @@ export class AuthEffects {
             return fromPromise(firebase.auth().currentUser.getIdToken());
         })
         .mergeMap((token: string) => {
+            this.router.navigate(['/']);
             return [
                 { type: AuthActions.SIGNUP },
                 { type: AuthActions.SET_TOKEN, payload: token }
+            ];
+        });
+
+    @Effect()
+    authSignin = this.actions$.ofType(AuthActions.TRY_SIGNIN)
+        .map((action: AuthActions.TrySignup) => {
+            return action.payload;
+        })
+        .switchMap((authData: {username: string, password: string}) => {
+            return fromPromise(firebase.auth().signInWithEmailAndPassword(authData.username, authData.password));
+        })
+        .switchMap(() => {
+            return fromPromise(firebase.auth().currentUser.getIdToken());
+        })
+        .mergeMap((token: string) => {
+            this.router.navigate(['/']);
+            return [
+                { type: AuthActions.SIGNIN },
+                { type: AuthActions.SET_TOKEN, payload: token }
             ]
         });
 
     // variable with dollar sign at the end marks an observable
-    constructor(private actions$: Actions) {}
+    constructor(private router: Router, private actions$: Actions) {}
 }

src/app/auth/signin/signin.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
-import { AuthService } from '../auth.service';
+import { Store } from '@ngrx/store';
+
+import * as fromApp from '../../ngrx/app.reducers';
+import * as AuthActions from '../ngrx/auth.actions';
 
 @Component({
   selector: 'app-signin',
@@ -9,7 +12,7 @@ import { AuthService } from '../auth.service';
 })
 export class SigninComponent implements OnInit {
 
-  constructor(private authService: AuthService) { }
+  constructor(private store: Store<fromApp.AppState>) { }
 
   ngOnInit() {
   }
@@ -17,7 +20,7 @@ export class SigninComponent implements OnInit {
   onSignin(form: NgForm) {
     const email = form.value.email;
     const password = form.value.password;
-    this.authService.signinUser(email, password);
+    this.store.dispatch(new AuthActions.TrySignin({username: email, password: password}));
   }
 
 }