🔥 add auth state, twitter, github oauth and strict public routes

.vscode/settings.json

@@ -2,9 +2,6 @@
   "editor.formatOnType": true,
   "editor.formatOnPaste": true,
   "eslint.alwaysShowStatus": true,
-  "[javascript]": {
-    "editor.formatOnSave": false
-  },
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },

src/App.js

@@ -1,30 +1,75 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { Provider } from "react-redux";
+import { connect } from "react-redux";
 
 import "./App.css";
 import SignupContainer from "./containers/SignupContainer";
 import LoginContainer from "./containers/LoginContainer";
 import PrivateRoute from "./containers/PrivateRoute";
+import PublicRoute from "./containers/PublicRoute";
 import Dashboard from "./containers/Dashboard";
 import EditProfile from "./containers/EditProfile";
-import store from "./redux/store";
+// import store from "./redux/store";
+
+import { setAuthState } from "./redux/actions/authActions";
+
+const App = ({ isAuth, setAuthState }) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+      .get("/auth/state", { withCredentials: true })
+      .then((res) => {
+        setAuthState(res.data);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setIsLoading(true);
+        throw new Error(err);
+      });
+  }, []);
 
-function App() {
   return (
-    <Provider store={store}>
-      <>
-        <Router>
-          <Switch>
-            <PrivateRoute exact path="/" component={Dashboard} />
-            <PrivateRoute exact path="/edit" component={EditProfile} />
-            <Route exact path="/signup" component={SignupContainer} />
-            <Route exact path="/login" component={LoginContainer} />
-          </Switch>
-        </Router>
-      </>
-    </Provider>
+    <>
+      <Router>
+        <Switch>
+          <PrivateRoute
+            exact
+            path="/"
+            isLoading={isLoading}
+            isAuthenticated={isAuth}
+            component={Dashboard}
+          />
+          <PrivateRoute
+            exact
+            path="/edit"
+            isLoading={isLoading}
+            isAuthenticated={isAuth}
+            component={EditProfile}
+          />
+          <PublicRoute
+            exact
+            isLoading={isLoading}
+            isAuthenticated={isAuth}
+            path="/signup"
+            component={SignupContainer}
+          />
+          <PublicRoute
+            exact
+            isLoading={isLoading}
+            isAuthenticated={isAuth}
+            path="/login"
+            component={LoginContainer}
+          />
+        </Switch>
+      </Router>
+    </>
   );
-}
+};
+
+const mapStateToProps = (state) => ({
+  isAuth: state.auth.isAuthenticated,
+});
 
-export default App;
+export default connect(mapStateToProps, { setAuthState })(App);

src/components/Profile/Dropdown.jsx

@@ -3,8 +3,6 @@ import styled from "styled-components";
 import { withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
 
-import Person from "../../assets/person.jpg";
-
 const Container = styled.div`
   position: relative;
   user-select: none;

src/containers/LoginContainer.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import styled from "styled-components";
+import { withRouter } from "react-router-dom";
 
 import CenterBox from "../components/CenterBox";
 import LogoBox from "../components/LogoBox";
@@ -91,5 +92,5 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(mapStateToProps, { loginUser, clearErrors })(
-  LoginContainer
+  withRouter(LoginContainer)
 );

src/containers/PrivateRoute.jsx

@@ -1,45 +1,31 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable implicit-arrow-linebreak */
 
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Route, Redirect } from "react-router-dom";
-import axios from "axios";
 import PropTypes from "prop-types";
 
 import Loading from "../components/Loading";
 
-const PrivateRoute = ({ component: Component, ...rest }) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    axios
-      .get("/auth/state", { withCredentials: true })
-      .then((res) => {
-        setIsAuthenticated(res.data);
-        setIsLoading(false);
-      })
-      .catch((err) => {
-        setIsLoading(true);
-        throw new Error(err);
-      });
-  }, []);
-
-  return (
-    <Route
-      {...rest}
-      render={(props) =>
-        isLoading ? (
-          <Loading />
-        ) : isAuthenticated ? (
-          <Component {...props} />
-        ) : (
-          <Redirect to="/login" />
-        )
-      }
-    />
-  );
-};
+const PrivateRoute = ({
+  component: Component,
+  isLoading,
+  isAuthenticated,
+  ...rest
+}) => (
+  <Route
+    {...rest}
+    render={(props) =>
+      isLoading ? (
+        <Loading />
+      ) : isAuthenticated ? (
+        <Component {...props} />
+      ) : (
+        <Redirect to="/login" />
+      )
+    }
+  />
+);
 
 PrivateRoute.propTypes = {
   component: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,

src/containers/PublicRoute.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable implicit-arrow-linebreak */
+
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+import PropTypes from "prop-types";
+
+import Loading from "../components/Loading";
+
+const PublicRoute = ({
+  component: Component,
+  isLoading,
+  isAuthenticated,
+  ...rest
+}) => (
+  <Route
+    {...rest}
+    render={(props) =>
+      isLoading ? (
+        <Loading />
+      ) : !isAuthenticated ? (
+        <Component {...props} />
+      ) : (
+        <Redirect to="/" />
+      )
+    }
+  />
+);
+
+PublicRoute.propTypes = {
+  component: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+};
+
+export default PublicRoute;

src/containers/SignupContainer.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import styled from "styled-components";
+import { withRouter } from "react-router-dom";
 
 import CenterBox from "../components/CenterBox";
 import LogoBox from "../components/LogoBox";
@@ -93,5 +94,5 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(mapStateToProps, { registerUser, clearErrors })(
-  SignupContainer
+  withRouter(SignupContainer)
 );

src/index.js

@@ -1,6 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+
+import store from "./redux/store";
 
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const Index = () => (
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
+
+ReactDOM.render(<Index />, document.getElementById("root"));

src/redux/actions/authActions.js

@@ -5,6 +5,7 @@ import {
   GET_ERRORS,
   CLEAR_ERRORS,
   CLEAR_CURRENT_USER,
+  SET_AUTH_STATE,
 } from "./types";
 
 export const setCurrentUser = (newUser) => ({
@@ -28,7 +29,32 @@ export const registerUser = (userData, history) => (dispatch) => {
 
   axios
     .post("/auth/signup", userData)
-    .then(() => {
+    .then((res) => {
+      // console.log(res);
+
+      const {
+        name,
+        bio,
+        phone,
+        local,
+        google,
+        facebook,
+        email,
+        image,
+      } = res.data.user;
+
+      const user = {
+        name,
+        email,
+        bio,
+        phone,
+        image,
+        local: local[0],
+        google: google[0],
+        facebook: facebook[0],
+      };
+
+      dispatch(setCurrentUser(user));
       history.push("/");
     })
     .catch((err) => {
@@ -43,7 +69,31 @@ export const loginUser = (userData, history) => (dispatch) => {
 
   axios
     .post("/auth/login", userData)
-    .then(() => {
+    .then((res) => {
+      const {
+        name,
+        bio,
+        phone,
+        local,
+        google,
+        facebook,
+        email,
+        image,
+      } = res.data.user;
+
+      const user = {
+        name,
+        email,
+        bio,
+        phone,
+        image,
+        local: local[0],
+        google: google[0],
+        facebook: facebook[0],
+      };
+
+      dispatch(setCurrentUser(user));
+
       history.push("/");
     })
     .catch((err) => {
@@ -57,7 +107,14 @@ export const fetchUserProfile = (callback) => (dispatch) => {
     .get("/profile", { withCredentials: true })
     .then((res) => {
       const {
-        name, bio, phone, local, google, facebook, email, image,
+        name,
+        bio,
+        phone,
+        local,
+        google,
+        facebook,
+        email,
+        image,
       } = res.data;
 
       const user = {
@@ -81,6 +138,9 @@ export const fetchUserProfile = (callback) => (dispatch) => {
 
 // Edit user profile
 export const editUserProfile = (userdata, history) => (dispatch) => {
+  // Clear previous errors
+  dispatch(clearErrors());
+
   axios
     .post("/profile/edit", userdata, { withCredentials: true })
     .then(() => history.push("/"))
@@ -103,3 +163,7 @@ export const logoutUser = (history) => (dispatch) => {
       throw new Error(err);
     });
 };
+
+export const setAuthState = (isAuth) => (dispatch) => {
+  dispatch({ type: SET_AUTH_STATE, payload: isAuth });
+};

src/redux/actions/types.js

@@ -1,10 +1,9 @@
 export const SET_CURRENT_USER = "SET_CURRENT_USER";
 export const CLEAR_CURRENT_USER = "CLEAR_CURRENT_USER";
 export const USER_LOADING = "USER_LOADING";
-
+export const SET_AUTH_STATE = "SET_AUTH_STATE";
 export const EDIT_USER = "EDIT_USER";
 export const DELETE_USER = "DELETE_USER";
-export const SET_AUTH_STATE = "SET_AUTH_STATE";
 
 export const GET_ERRORS = "GET_ERRORS";
 export const CLEAR_ERRORS = "CLEAR_ERRORS";