feat: add authentication

Author: Throyer

.vscode/settings.json

@@ -8,7 +8,8 @@
         "Servlet",
         "springboot",
         "springframework",
-        "throyer"
+        "throyer",
+        "zustand"
     ],
     "java.configuration.updateBuildConfiguration": "automatic",
 

web/package-lock.json

@@ -14,12 +14,15 @@
     "@emotion/styled": "^11.10.4",
     "axios": "^0.27.2",
     "framer-motion": "^6.5.1",
+    "luxon": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.4.0"
+    "react-router-dom": "^6.4.0",
+    "zustand": "^4.1.1"
   },
   "devDependencies": {
+    "@types/luxon": "^3.0.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",

web/package.json

@@ -1,24 +1,40 @@
 import { Button, Divider, Stack, Text } from "@chakra-ui/react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuthentication } from "../../hooks/use-authentication/use-authentication";
 
-export const Navbar = () => (
-  <>
-    <Stack mt="10" direction='row'>
-      <Link to="/">
-        <Button          
-          p="3"
-          variant="link">
-          Home
-        </Button>
-      </Link>
-      <Link to="/users">
-        <Button          
+export const Navbar = () => {
+
+  const { logout } = useAuthentication()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <Stack mt="10" direction='row'>
+        <Link to="/">
+          <Button
+            p="3"
+            variant="link">
+            Home
+          </Button>
+        </Link>
+        <Link to="/users">
+          <Button
+            p="3"
+            variant="link">
+            Users
+          </Button>
+        </Link>
+        <Button
+          onClick={() => {
+            logout();
+            navigate('/');
+          }}
           p="3"
           variant="link">
-          Users
+          Logout
         </Button>
-      </Link>
-    </Stack>
-    <Divider />
-  </>
-)
+      </Stack>
+      <Divider />
+    </>
+  )
+}

web/src/components/navbar/index.tsx

@@ -1,6 +1,5 @@
-import { Box, Center, Skeleton } from "@chakra-ui/react";
-import { Table as ChakraUiTable, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/table";
-import { Random } from "../../utils/random";
+import { Box, Center } from "@chakra-ui/react";
+import { Table as ChakraUiTable, TableContainer } from "@chakra-ui/table";
 import { Pagination, PaginationProps } from "../pagination";
 import { Body } from "./body";
 import { Head } from "./head";

web/src/components/table/index.tsx

@@ -0,0 +1,46 @@
+import { useCallback } from "react";
+import { Navigate, useNavigate } from "react-router-dom";
+import { api } from "../../http/api";
+import { useSession } from "../../providers/session";
+import { useUser } from "../../providers/user";
+import { Credentials, LoginResult, SessionsApiResponse } from "./use-authentication.types";
+
+export const useAuthentication = () => {
+  const { set: setSession } = useSession();
+  const { set: setUser } = useUser();
+
+  const navigate = useNavigate()
+
+  const login = useCallback(async ({ email, password }: Credentials, redirectTo = '/home'): Promise<LoginResult> => {
+    try {
+      const { data } = await api.post<SessionsApiResponse>('sessions', { email, password });
+      const { user, ...session } = data;
+
+      setSession(session);
+      setUser(user);
+      navigate(redirectTo);
+
+      return {
+        isAuthenticated: true
+      }
+    } catch (error: any) {
+
+      console.log(error);
+      error.response && console.log(error.response);
+      
+      return {
+        isAuthenticated: false
+      }
+    }
+  }, [])
+
+  const logout = useCallback(() => {
+    setSession(null);
+    setUser(null);
+  }, [])
+
+  return {
+    login,
+    logout
+  }
+}

web/src/hooks/use-authentication/index.ts

@@ -0,0 +1,22 @@
+import { User } from "../../providers/user/user-store.types";
+
+export type SessionsApiResponse = {
+  user: User;
+  accessToken: string;
+  expiresIn: string;
+  refreshToken: string;
+  tokenType: string;
+}
+
+export type Credentials = {
+  email: string;
+  password: string;
+}
+
+export type LoginResult = {
+  isAuthenticated: boolean;
+}
+
+export type UseAuthentication = {
+  login: (credentials: Credentials) => Promise<LoginResult>;
+}

web/src/hooks/use-authentication/use-authentication.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { DialogContext, DialogContextData } from "../providers/alert";
+
+export function useDialog(): DialogContextData {
+  const context = useContext(DialogContext);
+
+  if (!context) {
+    throw new Error("o useDialog deve ser utilizado dentro de um DialogProvider");
+  }
+
+  return context;
+}

web/src/hooks/use-authentication/use-authentication.types.ts

@@ -0,0 +1,36 @@
+import axios from "axios";
+
+import { useSession } from '../providers/session';
+
+const ENV = {
+  BASE_URL: "http://localhost:8080/api"
+}
+
+export const api = axios.create({
+  baseURL: ENV.BASE_URL
+});
+
+api.interceptors.request.use(async (configs) => {
+  const { session, set: setSession } = useSession.getState()
+
+  if (session) {
+
+    if (session.isExpired()) {
+      try {        
+        const { data: sessionResponse } = await axios.post(`${ENV.BASE_URL}/sessions/refresh`, {
+          refreshToken: session.refreshToken
+        });
+        setSession(sessionResponse);
+      } catch (error) {
+        setSession(null);
+      }
+    }
+
+    configs.headers = {
+      ...configs.headers,
+      'Authorization': `Bearer ${session.accessToken}`,
+    }
+  }
+
+  return configs;
+})