feat: auth exceptions + roles with user object

front/components/security/AuthProvider.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from "react";
 import { getRefreshToken, getUserInfo } from "../../services/auth/auth";
+import { useRouter } from "next/router";
 
 export const AuthContext: any = React.createContext({});
 
+const NON_AUTHENTICATED_ROUTES = ["/login", "/signup"];
 export interface Auth {
   access_token: string;
   isAuthenticated: boolean;
@@ -10,7 +12,9 @@ export interface Auth {
   isLoading: boolean;
 }
 
+
 const AuthProvider = (props: any) => {
+  const router = useRouter();
   const [auth, setAuth] = React.useState<Auth>({ access_token: "", isAuthenticated: false, userInfo: {}, isLoading: true });
 
   async function checkRefreshToken() {
@@ -19,30 +23,35 @@ const AuthProvider = (props: any) => {
   }
 
   async function checkAuth() {
-    let access_token = await checkRefreshToken();
-    let isAuthenticated = false;
-    let userInfo = {};
-    let isLoading = false;
+    try {
+      let access_token = await checkRefreshToken();
+      let userInfo = {};
+      let isLoading = false;
+    
+      if (access_token) {
+        userInfo = await getUserInfo(access_token);
+        setAuth({ access_token, isAuthenticated: true, userInfo, isLoading });
 
-    if (access_token) {
-      userInfo = await getUserInfo(access_token);
-      isAuthenticated = true;
-      setAuth({ access_token, isAuthenticated, userInfo, isLoading });
-    } else{
-      isAuthenticated = false;
-      setAuth({ access_token, isAuthenticated, userInfo, isLoading });
+        // if user is authenticated and tries to access login or signup page, redirect to home
+        if(NON_AUTHENTICATED_ROUTES.includes(router.pathname)) {
+          router.push("/");
+        }
+      } else {
+        setAuth({ access_token, isAuthenticated: false, userInfo, isLoading });
+        router.push("/login");
+      }
+    } catch (error) {
+      router.push("/");
     }
   }
 
-  
-
   useEffect(() => {
     if (auth.isLoading) {
       checkAuth();
     }
     return () => {
       auth.isLoading = false;
-    }
+    };
   }, []);
 
   return <AuthContext.Provider value={auth}>{props.children}</AuthContext.Provider>;

front/components/security/AuthenticatedOnly.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { getRefreshToken, getUserInfo } from "../../services/auth/auth";
-import { Auth, AuthContext } from "./AuthProvider";
-
-const AuthenticatedOnly = (props: any) => {
-  const [auth, setAuth] = React.useState<Auth>({ access_token: "", isAuthenticated: false, userInfo: {}, isLoading: true });
-
-  async function checkRefreshToken() {
-    let data = await getRefreshToken();
-    return data.access_token;
-  }
-
-  async function checkAuth() {
-    let access_token = await checkRefreshToken();
-    let isAuthenticated = false;
-    let userInfo = {};
-    let isLoading = false;
-
-    if (access_token) {
-      userInfo = await getUserInfo(access_token);
-      isAuthenticated = true;
-      setAuth({ access_token, isAuthenticated, userInfo, isLoading });
-    } else {
-      isAuthenticated = false;
-      setAuth({ access_token, isAuthenticated, userInfo, isLoading });
-    }
-  }
-
-  React.useEffect(() => {
-    checkAuth();
-  }, []);
-
-  return (
-    <div>
-      {auth.isLoading && <div>Loading...</div>}
-      {!auth.isLoading && auth.isAuthenticated && <div>{props.children}</div>}
-      {!auth.isLoading && !auth.isAuthenticated && <div>Not Authenticated</div>}
-    </div>
-  );
-};
-
-export default AuthenticatedOnly;

front/components/security/HeaderProfileBox.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import styled from "styled-components";
+import Link from "next/link";
+import { AuthContext } from "./AuthProvider";
+import Avvvatars from "avvvatars-react";
+
+export const HeaderProfileBox = () => {
+  const auth: any = React.useContext(AuthContext);
+
+  return (
+    <ProfileArea>
+      {!auth.isAuthenticated && (
+        <UnidentifiedArea>
+          <ul>
+            <li>
+              <Link href="/login">
+                <a>Login</a>
+              </Link>
+            </li>
+            <li>
+              <Link href="/signup">
+                <a>Sign up</a>
+              </Link>
+            </li>
+          </ul>
+        </UnidentifiedArea>
+      )}
+      {auth.isAuthenticated && (
+        <AccountArea>
+          <div>{auth.userInfo.user_object.username}</div>
+          <div>
+            <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
+          </div>
+        </AccountArea>
+      )}
+    </ProfileArea>
+  );
+};
+
+const AccountArea = styled.div`
+  padding-right: 20px;
+  display: flex;
+  place-items: center;
+
+  div {
+    margin-right: 10px;
+  }
+  img {
+    width: 29px;
+    border-radius: 19px;
+  }
+`;
+
+const ProfileArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  place-items: center;
+`;
+
+const UnidentifiedArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  flex-grow: 1;
+
+  ul {
+    display: flex;
+    place-items: center;
+    list-style: none;
+    padding-left: 20px;
+
+    li {
+      padding-right: 20px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #171717;
+    }
+  }
+`;