Step 17: sign users up and log them in/out with Firebase

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^4.1.1",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-modal": "^1.7.7",
@@ -12,6 +13,7 @@
     "redux": "^3.6.0",
     "redux-form": "^6.7.0",
     "redux-promise": "^0.5.3",
+    "redux-thunk": "^2.2.0",
     "superagent": "^3.5.2"
   },
   "devDependencies": {

src/actions/index.js

@@ -1,20 +1,32 @@
 import request from 'superagent';
+import Firebase from 'firebase';
 
 export const OPEN_MODAL = 'OPEN_MODAL';
 export const CLOSE_MODAL = 'CLOSE_MODAL';
 export const REQUEST_GIFS = 'REQUEST_GIFS';
-export const SIGN_IN_USER = 'SIGN_IN_USER';
 export const SIGN_OUT_USER = 'SIGN_OUT_USER';
+export const AUTH_ERROR = 'AUTH_ERROR';
+export const AUTH_USER = 'AUTH_USER';
 
 const API_URL = 'http://api.giphy.com/v1/gifs/search?q=';
 const API_KEY = '&api_key=dc6zaTOxFJmzC';
 
-export function requestGifs(term = null) {
-    const data = request.get(`${API_URL}${term.replace(/\s/g, '+')}${API_KEY}`);
+const config = {
+    apiKey: "",
+    authDomain: "",
+    databaseURL: "",
+};
 
-    return {
-        type: REQUEST_GIFS,
-        payload: data
+Firebase.initializeApp(config);
+
+export function requestGifs(term = null) {
+    return function(dispatch) {
+        request.get(`${API_URL}${term.replace(/\s/g, '+')}${API_KEY}`).then(response => {
+            dispatch({
+                type: REQUEST_GIFS,
+                payload: response
+            });
+        });
     }
 }
 
@@ -31,15 +43,64 @@ export function closeModal() {
     }
 }
 
-export function signInUser() {
-    return {
-        type: SIGN_IN_USER
+export function signUpUser(credentials) {
+    return function(dispatch) {
+        Firebase.auth().createUserWithEmailAndPassword(credentials.email, credentials.password)
+            .then(response => {
+                dispatch(authUser());
+            })
+            .catch(error => {
+                console.log(error);
+                dispatch(authError(error));
+            });
     }
 }
 
+export function signInUser(credentials) {
+    return function(dispatch) {
+        Firebase.auth().signInWithEmailAndPassword(credentials.email, credentials.password)
+            .then(response => {
+                dispatch(authUser());
+            })
+            .catch(error => {
+                dispatch(authError(error));
+            });
+    }
+}
 
 export function signOutUser() {
+    return function (dispatch) {
+        Firebase.auth().signOut()
+            .then(() =>{
+                dispatch({
+                    type: SIGN_OUT_USER
+                })
+            });
+    }
+}
+
+
+export function verifyAuth() {
+    return function (dispatch) {
+        Firebase.auth().onAuthStateChanged(user => {
+            if (user) {
+                dispatch(authUser());
+            } else {
+                dispatch(signOutUser());
+            }
+        });
+    }
+}
+
+export function authUser() {
+    return {
+        type: AUTH_USER
+    }
+}
+
+export function authError(error) {
     return {
-        type: SIGN_OUT_USER
+        type: AUTH_ERROR,
+        payload: error
     }
 }

src/containers/Login.js

@@ -34,11 +34,21 @@ class Login extends React.Component {
         </fieldset>
     );
 
+    renderAuthenticationError() {
+        if (this.props.authenticationError) {
+            return <div className="alert alert-danger">{ this.props.authenticationError }</div>;
+        }
+        return <div></div>;
+    }
+
     render() {
         return(
             <div className="container">
                 <div className="col-md-6 col-md-offset-3">
                     <h2 className="text-center">Log In</h2>
+
+                    { this.renderAuthenticationError() }
+
                     <form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
                         <Field name="email" component={this.renderField} className="form-control" type="text" label="Email"/>
                         <Field name="password" component={this.renderField} className="form-control" type="password" label="Password"/>
@@ -51,7 +61,13 @@ class Login extends React.Component {
     }
 }
 
-export default connect(null, Actions)(reduxForm({
+function mapStateToProps(state) {
+    return {
+        authenticationError: state.auth.error
+    }
+}
+
+export default connect(mapStateToProps, Actions)(reduxForm({
     form: 'login',
     validate
 })(Login));

src/containers/Signup.js

@@ -29,7 +29,7 @@ const validate = values => {
 
 class Signup extends React.Component {
     handleFormSubmit = (values) => {
-        this.props.signInUser(values);
+        this.props.signUpUser(values);
     };
 
     renderField = ({ input, label, type, meta: { touched, error } }) => (
@@ -42,11 +42,21 @@ class Signup extends React.Component {
         </fieldset>
     );
 
+    renderAuthenticationError() {
+        if (this.props.authenticationError) {
+            return <div className="alert alert-danger">{ this.props.authenticationError }</div>;
+        }
+        return <div></div>;
+    }
+
     render() {
         return (
             <div className="container">
                 <div className="col-md-6 col-md-offset-3">
                     <h2 className="text-center">Sign Up</h2>
+
+                    { this.renderAuthenticationError() }
+
                     <form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
                         <Field name="email" type="text" component={this.renderField} label="Email" />
                         <Field name="password" type="password" component={this.renderField} label="Password" />
@@ -60,7 +70,13 @@ class Signup extends React.Component {
     }
 }
 
-export default connect(null, Actions)(reduxForm({
+function mapStateToProps(state) {
+    return {
+        authenticationError: state.auth.error
+    }
+}
+
+export default connect(mapStateToProps, Actions)(reduxForm({
     form: 'signup',
     validate
 })(Signup));

src/reducers/auth.js

@@ -1,18 +1,28 @@
-import { SIGN_IN_USER, SIGN_OUT_USER } from '../actions';
+import { AUTH_USER, SIGN_OUT_USER, AUTH_ERROR } from '../actions';
 
 const initialState =  {
-    authenticated: false
+    authenticated: false,
+    error: null
 };
 
 export default function gifs(state = initialState, action) {
     switch (action.type) {
-        case SIGN_IN_USER:
+        case AUTH_USER:
             return {
-                ...state, authenticated: true
+                ...state,
+                authenticated: true,
+                error: null
             };
         case SIGN_OUT_USER:
             return {
-                ...state, authenticated: false
+                ...state,
+                authenticated: false,
+                error: null
+            };
+        case AUTH_ERROR:
+            return {
+                ...state,
+                error: action.payload.message
             };
         default:
             return state;

src/store/configureStore.js

@@ -1,8 +1,9 @@
 import { createStore, compose, applyMiddleware } from 'redux';
-import ReduxPromise from 'redux-promise';
+import reduxThunk from 'redux-thunk';
 import rootReducer from '../reducers';
 import createHistory from 'history/createBrowserHistory';
 import { routerMiddleware } from 'react-router-redux';
+import * as Actions from '../actions';
 
 export const history = createHistory();
 
@@ -11,7 +12,7 @@ export function configureStore(initialState) {
         rootReducer,
         initialState,
         compose (
-            applyMiddleware(ReduxPromise, routerMiddleware(history)),
+            applyMiddleware(reduxThunk, routerMiddleware(history)),
             window.devToolsExtension ? window.devToolsExtension() : f => f
         )
     );
@@ -24,5 +25,7 @@ export function configureStore(initialState) {
         });
     }
 
+    store.dispatch(Actions.verifyAuth());
+
     return store;
 }