Logging Users Out

README.md

@@ -141,3 +141,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 4. Adding Sign-In for Authorized Users: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/2e00bc34c30fe005f6aa303191a4ad7050b613c5)
 5. Storing the Response Token from Sing-In/Sign-Up: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/674882c777eda0514e1432aa4a85ebd1a328ff08)
 6. Adding a `<Spinner />` UI Component for Sign-In & Showing Errors on the View: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/9e2332b6ecde73b692cdb532e8344d4517b68ac5)
+7. Logging Users Out: [Commit Details]()

src/components/UI/Buttons/StyledButton.styled.jsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export const StyledButton = styled.button`
   background-color: transparent;
+  position: relative;
   border: none;
   color: white;
   outline: none;
@@ -12,10 +13,10 @@ export const StyledButton = styled.button`
   font-weight: bold;
   color: ${props => props.type.toLowerCase() === 'success' ? '#5C9210' : '#944317'};
 
-  :first-of-type {
+  /* :first-of-type {
     margin-left: 0;
     padding-left: 0;
-  }
+  } */
 
   :disabled {
     color: #CCC;

src/containers/Auth/Auth.component.jsx

@@ -102,14 +102,15 @@ class Auth extends Component {
       <FormDiv>
         <form onSubmit={this.submitHandler}>
           {errorMessage}
-          <h3>{this.state.isSignUp ? "Sign-Up" : "Sign-In"}</h3>
+          <h3>{this.state.isSignUp ? "Sign Up" : "Sign In"}</h3>
           {form}
           <Button type="success">SUBMIT</Button>
         </form>
         <Button
           type="danger"
-          onClick={this.switchAuthModeHandler}>
-          {this.state.isSignUp ? "Existing User? Sign-In" : "New User? Sign-Up"}
+          onClick={this.switchAuthModeHandler}
+          style={{'textDecoration':'underline'}}>
+          {this.state.isSignUp ? "Existing User? Sign In" : "New User? Please Sign Up"}
         </Button>
       </FormDiv>
     );

src/store/actions/actionTypes.js

@@ -19,3 +19,4 @@ export const FETCH_ORDERS_FAIL = "FETCH_ORDERS_FAIL";
 export const AUTH_START = "AUTH_START";
 export const AUTH_SUCCESS = "AUTH_SUCCESS";
 export const AUTH_FAIL = "AUTH_FAIL";
+export const AUTH_LOGOUT = "AUTH_LOGOUT";

src/store/actions/auth.js

@@ -5,20 +5,14 @@ import axios from 'axios';
 import * as actionTypes from './actionTypes';
 
 export const authStart = () => ({ type: actionTypes.AUTH_START, });
+export const authFail = error => ({ type: actionTypes.AUTH_FAIL, error, });
+export const authSuccess = (idToken, userId) => ({ type: actionTypes.AUTH_SUCCESS, idToken, userId, });
+export const logout = () => ({ type: actionTypes.AUTH_LOGOUT, });
 
-export const authSuccess = (idToken, userId) => {
-  return {
-    type: actionTypes.AUTH_SUCCESS,
-    idToken,
-    userId
-  };
-};
-
-export const authFail = error => {
-  return {
-    type: actionTypes.AUTH_FAIL,
-    error,
-  };
+export const checkAuthTimeout = expirationTime => dispatch => {
+  setTimeout(() => {
+    dispatch(logout());
+  }, expirationTime * 1000); // Default expirationTime is 3600. 3600ms * 1000 = 3600000ms = 3600s = 1hr.
 };
 
 export const auth = (email, password, isSignup) => dispatch => {
@@ -41,9 +35,9 @@ export const auth = (email, password, isSignup) => dispatch => {
     .post(url, authData)
     .then((res) => {
       console.log(res);
-      const { idToken, localId } = res.data;
+      const { idToken, localId, expiresIn } = res.data;
       dispatch(authSuccess(idToken, localId));
-      return res;
+      dispatch(checkAuthTimeout(expiresIn));
     })
     .catch((err) => {
       console.log(err);

src/store/reducers/auth.js

@@ -11,12 +11,14 @@ const initialState = {
 const authStart = (state, action) => updateObject(state, { error: null, loading: true });
 const authSuccess = (state, action) => updateObject(state, { token: action.idToken, userId: action.userId, error: null, loading: false, });
 const authFail = (state, action) => updateObject(state, { error: action.error, loading: false, });
+const authLogout = (state, action) => updateObject(state, { token: null, userId: null });
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case actionTypes.AUTH_START: return authStart(state, action);
     case actionTypes.AUTH_SUCCESS: return authSuccess(state, action);
     case actionTypes.AUTH_FAIL: return authFail(state, action);
+    case actionTypes.AUTH_LOGOUT: return authLogout(state, action);
     default: return state;
   }
 };