Added OAuth via GitHub

app-generator · app-generator · commit fb8e00b199d3 · 2022-12-02T20:49:46.000+02:00
diff --git a/src/App.js b/src/App.js
@@ -41,7 +41,7 @@ import createCache from "@emotion/cache";
 
 // Soft UI Dashboard React routes
 import routes from "./routes";
-import { ProtectedRoute } from './ProtectedRoute';
+import { ProtectedRoute } from "./ProtectedRoute";
 
 // Soft UI Dashboard React contexts
 import { useSoftUIController, setMiniSidenav, setOpenConfigurator } from "context";
@@ -104,7 +104,7 @@ export default function App() {
 
       if (route.route) {
         if (route.protected) {
-          return(
+          return (
             <Route key={route.key} element={<ProtectedRoute />}>
               <Route path={route.route} element={route.component} />
             </Route>
diff --git a/src/api/auth.js b/src/api/auth.js
@@ -1,19 +1,24 @@
 import axios from "./index";
+import { API_SERVER } from "config/constant";
 
 class AuthApi {
   static Login = (data) => {
-    return axios.post(`${base}/login`, data);
+    return axios.post(`${API_SERVER}users/login`, data);
   };
 
   static Register = (data) => {
-    return axios.post(`${base}/register`, data);
+    return axios.post(`${API_SERVER}users/register`, data);
+  };
+
+  static Authorize = (code) => {
+    return axios.get(`${API_SERVER}sessions/oauth/github?code=${code}`);
   };
 
   static Logout = (data) => {
-    return axios.post(`${base}/logout`, data, { headers: { Authorization: `${data.token}` } });
+    return axios.post(`${API_SERVER}users/logout`, data, {
+      headers: { Authorization: `${data.token}` },
+    });
   };
 }
 
-let base = "users";
-
 export default AuthApi;
diff --git a/src/config/constant.js b/src/config/constant.js
@@ -2,7 +2,9 @@ let BACKEND_SERVER = null;
 if (process.env.REACT_APP_BACKEND_SERVER) {
   BACKEND_SERVER = process.env.REACT_APP_BACKEND_SERVER;
 } else {
-  BACKEND_SERVER = "http://localhost:5000/";
+  BACKEND_SERVER = "http://localhost:5000/api/";
 }
 
 export const API_SERVER = BACKEND_SERVER;
+export const ADMIN = 1;
+export const USER = 2;
diff --git a/src/layouts/authentication/components/Socials/github.js b/src/layouts/authentication/components/Socials/github.js
@@ -0,0 +1,23 @@
+import SoftButton from "components/SoftButton";
+import SoftBox from "components/SoftBox";
+
+const client_id = process.env.REACT_APP_GITHUB_OAUTH_CLIENT_ID;
+const redirect_uri = process.env.REACT_APP_GITHUB_OAUTH_REDIRECT_URL;
+
+const GithubSocial = () => {
+  return (
+    <SoftBox px={1} mt={2}>
+      <a
+        href={`https://github.com/login/oauth/authorize?scope=user&client_id=${client_id}&redirect_uri=${redirect_uri}`}
+      >
+        <SoftButton variant="outlined" color="light">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 24">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+        </SoftButton>
+      </a>
+    </SoftBox>
+  );
+};
+
+export default GithubSocial;
diff --git a/src/layouts/authentication/sign-in/index.js b/src/layouts/authentication/sign-in/index.js
@@ -13,10 +13,10 @@ Coded by www.creative-tim.com
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 */
 
-import { useState } from "react";
-
+import { useState, useEffect } from "react";
+import { RotatingLines } from "react-loader-spinner";
 // react-router-dom components
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 // @mui material components
 import Switch from "@mui/material/Switch";
@@ -29,52 +29,57 @@ import SoftButton from "components/SoftButton";
 
 // Authentication layout components
 import CoverLayout from "layouts/authentication/components/CoverLayout";
+import GithubSocial from "layouts/authentication/components/Socials/github";
+import Separator from "layouts/authentication/components/Separator";
 
 // Images
 import curved9 from "assets/images/curved-images/curved-6.jpg";
 
 import AuthApi from "../../../api/auth";
-import { useNavigate } from 'react-router-dom';
 import { useAuth } from "../../../auth-context/auth.context";
+import { API_SERVER } from "config/constant";
 
 function SignIn() {
   const navigate = useNavigate();
 
   const [rememberMe, setRememberMe] = useState(true);
   const [formData, setFormData] = useState({});
-  const [error, setError] = useState("")
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const { setUser } = useAuth();
   const { user } = useAuth();
 
   const handleSetRememberMe = () => setRememberMe(!rememberMe);
 
-  const handleFormData = e => {
+  const handleFormData = (e) => {
     setFormData({
       ...formData,
-      [e.target.name]: e.target.value
-    })
-  }
+      [e.target.name]: e.target.value,
+    });
+  };
 
-  const submitFormData = e => {
+  const submitFormData = (e) => {
     e.preventDefault();
-    AuthApi.Login(formData).then(response => {
-      if(response.data.success) {
-        return setProfile(response);
-      } else {
-        setError(response.data.msg)
-      }
-    }).catch(error => {
-      if (error.response) {
-        return setError(error.response.data.msg);
-      }
-      return setError("There has been an error.");
-    })
-  }
+    AuthApi.Login(formData)
+      .then((response) => {
+        if (response.data.success) {
+          return setProfile(response);
+        } else {
+          setError(response.data.msg);
+        }
+      })
+      .catch((error) => {
+        if (error.response) {
+          return setError(error.response.data.msg);
+        }
+        return setError("There has been an error.");
+      });
+  };
 
   const handleRedirect = () => {
     return navigate("/dashboard");
-  }
+  };
 
   const setProfile = (response) => {
     let user = { ...response.data.user };
@@ -85,51 +90,102 @@ function SignIn() {
     return navigate("/dashboard");
   };
 
+  useEffect(() => {
+    const url = window.location.href;
+    const hasCode = url.includes("?code=");
+
+    // If Github API returns the code parameter
+    if (hasCode) {
+      const newUrl = url.split("?code=");
+      window.history.pushState({}, null, newUrl[0]);
+      setIsLoading(true);
+
+      const requestData = {
+        code: newUrl[1],
+      };
+
+      AuthApi.Authorize(requestData.code)
+        .then(({ data }) => {
+          if (data.user) {
+            setUser(JSON.stringify(data.user));
+            localStorage.setItem("user", JSON.stringify(data.user));
+            handleRedirect();
+          } else {
+            setError("no user returned");
+          }
+        })
+        .catch((error) => {
+          setError(error.message);
+        })
+        .finally(() => setIsLoading(false));
+    }
+  }, []);
+
   return (
     <CoverLayout
       title="Welcome back"
-      description="Enter your email and password to sign in"
+      description="Login through github or enter your email and password to sign in"
       image={curved9}
     >
-      {user && user.token ? (
-      <div>
-        <h3 style={{ textAlign: "center" }}>You are already signed in.</h3>
-        <SoftBox mt={4} mb={1}>
-          <SoftButton variant="gradient" buttonColor="info" fullWidth onClick={handleRedirect}>
-            {`Let's go`}
-          </SoftButton>
+      {isLoading ? (
+        <SoftBox display="flex" justifyContent="center">
+          <RotatingLines
+            strokeColor="black"
+            strokeWidth="5"
+            animationDuration="0.75"
+            width="96"
+            visible={true}
+          />
         </SoftBox>
-      </div>
-      ) : (
-      <SoftBox component="form" role="form">
-        <SoftBox mb={2}>
-          <SoftBox mb={1} ml={0.5}>
-            <SoftTypography component="label" variant="caption" fontWeight="bold">
-              Email
-            </SoftTypography>
+      ) : user && user.token ? (
+        <div>
+          <h3 style={{ textAlign: "center" }}>You are already signed in.</h3>
+          <SoftBox mt={4} mb={1}>
+            <SoftButton variant="gradient" buttonColor="info" fullWidth onClick={handleRedirect}>
+              {`Let's go`}
+            </SoftButton>
           </SoftBox>
-          <SoftInput type="email" name="email" onChange={handleFormData} placeholder="Email" />
-        </SoftBox>
-        <SoftBox mb={2}>
-          <SoftBox mb={1} ml={0.5}>
-            <SoftTypography component="label" variant="caption" fontWeight="bold">
-              Password
-            </SoftTypography>
+        </div>
+      ) : (
+        <>
+          <SoftBox display="flex" flexDirection="column" alignItems="center" mb={2}>
+            <GithubSocial />
           </SoftBox>
-          <SoftInput type="password" name="password" onChange={handleFormData} placeholder="Password" />
-        </SoftBox>
-        <SoftBox display="flex" alignItems="center">
-          <Switch checked={rememberMe} onChange={handleSetRememberMe} />
-          <SoftTypography
-            variant="button"
-            fontWeight="regular"
-            onClick={handleSetRememberMe}
-            sx={{ cursor: "pointer", userSelect: "none" }}
-          >
-            &nbsp;&nbsp;Remember me
-          </SoftTypography>
-        </SoftBox>
-        <SoftBox mt={2} mb={2} textAlign="center">
+          <Separator />
+          <SoftBox component="form" role="form">
+            <SoftBox mb={2}>
+              <SoftBox mb={1} ml={0.5}>
+                <SoftTypography component="label" variant="caption" fontWeight="bold">
+                  Email
+                </SoftTypography>
+              </SoftBox>
+              <SoftInput type="email" name="email" onChange={handleFormData} placeholder="Email" />
+            </SoftBox>
+            <SoftBox mb={2}>
+              <SoftBox mb={1} ml={0.5}>
+                <SoftTypography component="label" variant="caption" fontWeight="bold">
+                  Password
+                </SoftTypography>
+              </SoftBox>
+              <SoftInput
+                type="password"
+                name="password"
+                onChange={handleFormData}
+                placeholder="Password"
+              />
+            </SoftBox>
+            <SoftBox display="flex" alignItems="center">
+              <Switch checked={rememberMe} onChange={handleSetRememberMe} />
+              <SoftTypography
+                variant="button"
+                fontWeight="regular"
+                onClick={handleSetRememberMe}
+                sx={{ cursor: "pointer", userSelect: "none" }}
+              >
+                &nbsp;&nbsp;Remember me
+              </SoftTypography>
+            </SoftBox>
+            <SoftBox mt={2} mb={2} textAlign="center">
               <h6
                 style={{
                   fontSize: ".8em",
@@ -142,27 +198,29 @@ function SignIn() {
                 {error}
               </h6>
             </SoftBox>
-        <SoftBox mt={4} mb={1}>
-          <SoftButton variant="gradient" color="info" onClick={submitFormData} fullWidth>
-            sign in
-          </SoftButton>
-        </SoftBox>
-        <SoftBox mt={3} textAlign="center">
-          <SoftTypography variant="button" color="text" fontWeight="regular">
-            Don&apos;t have an account?{" "}
-            <SoftTypography
-              component={Link}
-              to="/authentication/sign-up"
-              variant="button"
-              color="info"
-              fontWeight="medium"
-              textGradient
-            >
-              Sign up
-            </SoftTypography>
-          </SoftTypography>
-        </SoftBox>
-      </SoftBox> )}
+            <SoftBox mt={4} mb={1}>
+              <SoftButton variant="gradient" color="info" onClick={submitFormData} fullWidth>
+                sign in
+              </SoftButton>
+            </SoftBox>
+            <SoftBox mt={3} textAlign="center">
+              <SoftTypography variant="button" color="text" fontWeight="regular">
+                Don&apos;t have an account?{" "}
+                <SoftTypography
+                  component={Link}
+                  to="/authentication/sign-up"
+                  variant="button"
+                  color="info"
+                  fontWeight="medium"
+                  textGradient
+                >
+                  Sign up
+                </SoftTypography>
+              </SoftTypography>
+            </SoftBox>
+          </SoftBox>
+        </>
+      )}
     </CoverLayout>
   );
 }
diff --git a/src/layouts/authentication/sign-up/index.js b/src/layouts/authentication/sign-up/index.js
