added ngrx for auth

Author: loiane

src/providers/auth/auth.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from 'angularfire2/auth';
+import { fromFirebaseAuthPromise } from "../firebase-utils";
+
+@Injectable()
+export class AuthProvider {
+
+ constructor(public afAuth: AngularFireAuth) { }
+
+ signIn(user: {email, password}) {
+ return fromFirebaseAuthPromise(
+ this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password)
+ );
+ }
+
+ signUp(user: {email, password}) {
+ return fromFirebaseAuthPromise(
+ this.afAuth.auth.createUserWithEmailAndPassword(user.email, user.password)
+ );
+ }
+
+ signOut() {
+ return fromFirebaseAuthPromise(
+ this.afAuth.auth.signOut()
+ );
+ }
+
+}

src/store/actions/auth.actions.ts

@@ -0,0 +1,61 @@
+import { Action } from '@ngrx/store';
+import { type } from "../util";
+
+export const AuthActionTypes = {
+ LOGIN_REQUESTED: type("[Auth] -LOGIN Requested-"),
+ LOGIN_COMPLETED: type("[Auth] -LOGIN Completed-"),
+
+ LOGOUT_REQUESTED: type("[Auth] -LOGOUT Requested-"),
+ LOGOUT_COMPLETED: type("[Auth] -LOGOUT Completed-"),
+
+ SIGNUP_REQUESTED: type("[Auth] -SIGNUP Requested-"),
+ SIGNUP_COMPLETED: type("[Auth] -SIGNUP Completed-"),
+
+ AUTH_ERROR: type("[Auth] -Auth Error-")
+};
+
+interface AuthUserPayload {
+ user: any;
+}
+
+export class LoginRequestedAction implements Action {
+ type = AuthActionTypes.LOGIN_REQUESTED;
+ constructor(public payload: AuthUserPayload) {}
+}
+
+export class LoginCompletedAction implements Action {
+ type = AuthActionTypes.LOGIN_COMPLETED;
+ constructor(public payload: AuthUserPayload) {}
+}
+
+export class AuthErrorAction implements Action {
+ type = AuthActionTypes.AUTH_ERROR;
+ constructor(public payload: any) {}
+}
+
+export class LogoutRequestedAction implements Action {
+ type = AuthActionTypes.LOGOUT_REQUESTED;
+ constructor(public payload = null) {}
+}
+
+export class LogoutCompletedAction implements Action {
+ type = AuthActionTypes.LOGOUT_COMPLETED;
+ constructor(public payload = null) {}
+}
+
+export class SignUpRequestedAction implements Action {
+ type = AuthActionTypes.SIGNUP_REQUESTED;
+ constructor(public payload: AuthUserPayload) {}
+}
+
+export class SignUpCompletedAction implements Action {
+ type = AuthActionTypes.SIGNUP_COMPLETED;
+ constructor(public payload: AuthUserPayload) {}
+}
+
+export type AuthAction =
+ | LoginRequestedAction
+ | LoginCompletedAction
+ | LogoutRequestedAction
+ | LogoutCompletedAction
+ | AuthErrorAction;

src/store/effects/auth.effects.ts

@@ -0,0 +1,62 @@
+import { NavPushAction } from './../actions/nav.actions';
+import { Action } from '@ngrx/store';
+import { AuthActionTypes, LoginCompletedAction, LogoutCompletedAction, SignUpCompletedAction, AuthErrorAction } from './../actions/auth.actions';
+import { AuthProvider } from './../../providers/auth/auth';
+import { Observable } from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/mergeMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/observable/from';
+
+
+@Injectable()
+export class AuthEffects {
+
+ constructor(
+ private authService: AuthProvider,
+ private actions$: Actions
+ ) { }
+
+ @Effect()
+ loginAction$: Observable<Action> = this.actions$
+ .ofType(AuthActionTypes.LOGIN_REQUESTED)
+ .map(this.toPayload)
+ .switchMap(payload => this.authService.signIn(payload)
+ .mergeMap(res => Observable.from([
+ (new LoginCompletedAction({user: res})),
+ (new NavPushAction({page: 'HomePage', toRootNav: true}))
+ ]))
+ .catch(this.handleError)
+ );
+
+ @Effect()
+ logoutAction$: Observable<Action> = this.actions$
+ .ofType(AuthActionTypes.LOGOUT_REQUESTED)
+ .map(this.toPayload)
+ .switchMap(payload => this.authService.signOut()
+ .map(res => (new LogoutCompletedAction()))
+ .catch(this.handleError)
+ );
+
+ @Effect()
+ signUpAction$: Observable<Action> = this.actions$
+ .ofType(AuthActionTypes.SIGNUP_REQUESTED)
+ .map(this.toPayload)
+ .switchMap(payload => this.authService.signUp(payload.user)
+ .map(res => (new SignUpCompletedAction({user: res})))
+ .catch(this.handleError)
+ );
+
+ private handleError(error) {
+ return Observable.of(new AuthErrorAction({error: error}));
+ }
+
+ private toPayload(action){
+ return action.payload;
+ }
+}

src/store/reducers/auth.reducer.ts

@@ -0,0 +1,38 @@
+import { AuthState } from './../state/auth.state';
+import { AuthAction, AuthActionTypes } from "../actions/auth.actions";
+
+export const authInitialState: AuthState = {
+ userData: null,
+ isLoggedIn: false,
+ error: null
+}
+
+export function authReducer(state = authInitialState, action: AuthAction): AuthState {
+ switch (action.type) {
+
+ case AuthActionTypes.LOGIN_COMPLETED: {
+ return Object.assign({}, state, {
+ userData: action.payload.user,
+ isLoggedIn: action.payload.user != null,
+ error: null
+ });
+ }
+
+ case AuthActionTypes.AUTH_ERROR: {
+ return Object.assign({}, state, {
+ error: action.payload.error
+ });
+ }
+
+ case AuthActionTypes.LOGOUT_COMPLETED: {
+ return Object.assign({}, state, {
+ userData: null,
+ isLoggedIn: false
+ });
+ }
+
+ default: {
+ return state;
+ }
+ }
+}

src/store/services/auth.store.ts

@@ -0,0 +1,27 @@
+import { AuthState } from './../state/auth.state';
+import { LoginRequestedAction } from './../actions/auth.actions';
+import { AppState } from './../state/app.state';
+import { Injectable } from '@angular/core';
+//import { Observable } from 'rxjs/Observable';
+import { Store } from "@ngrx/store";
+
+@Injectable()
+export class AuthStoreService {
+
+ private AUTH_STATE = 'auth';
+
+ constructor(private store: Store<AppState>) {}
+
+ dispatchLoginAction(user){
+ this.store.dispatch(new LoginRequestedAction(user));
+ }
+
+ getAuthError(){
+ return this.storeSelect()
+ .map((state: AuthState) => state.error);
+ }
+
+ private storeSelect(){
+ return this.store.select(this.AUTH_STATE);
+ }
+}

src/store/state/auth.state.ts

@@ -0,0 +1,5 @@
+export interface AuthState {
+ userData: any; //firebase user model
+ isLoggedIn: boolean,
+ error: any;
+}