Merge pull request #22 from dcorroyer/mb-32-revoir-la-gestion-de-lauth-et-des-routes

MB-32 revoir la gestion de lauth et des routes

Author: dcorroyer

app/assets/routes/_authenticated/index.module.css app/assets/components/not-found.module.css

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Button, Container, Group, Text, Title } from '@mantine/core'
+
+import { Link } from 'react-router-dom'
+
+import { Illustration } from '@/components/illustration'
+
+import classes from './not-found.module.css'
+
+const NotFound: React.FC = () => {
+  return (
+    <Container className={classes.root}>
+      <div className={classes.inner}>
+        <Illustration className={classes.image} />
+        <div className={classes.content}>
+          <Title className={classes.title}>Nothing to see here</Title>
+          <Text c='dimmed' size='lg' ta='center' className={classes.description}>
+            Page you are trying to open does not exist. The page is in construction.
+          </Text>
+          <Group justify='center'>
+            <Button size='md' component={Link} to={'/budgets'}>
+              Take me back to budget page
+            </Button>
+          </Group>
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+export default NotFound

app/assets/components/not-found.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Link, useLocation } from '@tanstack/react-router'
+import { Link, useLocation } from 'react-router-dom'
 
 import cx from 'clsx'
 
@@ -63,13 +63,14 @@ export function Sidebar() {
         <Link
           onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
           className={classes.link}
+          to={''}
         >
           <IconSun className={cx(classes.light, classes.linkIcon)} stroke={1.5} />
           <IconMoon className={cx(classes.dark, classes.linkIcon)} stroke={1.5} />
           <span>Change Theme</span>
         </Link>
 
-        <Link onClick={() => logout()} className={classes.link}>
+        <Link onClick={() => logout()} className={classes.link} to={''}>
           <IconLogout className={classes.linkIcon} stroke={1.5} />
           <span>Logout</span>
         </Link>

app/assets/components/sidebar.tsx

@@ -1,15 +1,11 @@
-import { readLocalStorageValue } from '@mantine/hooks'
-
 import { LoginParams, RegisterParams, User } from '@/features/auth/types'
 import { ApiErrorResponse } from '@/utils/ApiErrorResponse'
 import { ApiResponse } from '@/utils/ApiResponse'
+import { client } from '@/utils/client'
 
 export async function postLogin(values: LoginParams): Promise<Response | ApiErrorResponse> {
-  const response = await fetch('/api/login', {
+  const response = await client('/api/login', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
     body: JSON.stringify({
       username: values.email,
       password: values.password,
@@ -18,15 +14,12 @@ export async function postLogin(values: LoginParams): Promise<Response | ApiErro
 
   if (!response.ok) return Promise.reject('Failed to login')
 
-  return await response.json()
+  return response.json()
 }
 
 export async function postRegister(values: RegisterParams): Promise<Response | ApiErrorResponse> {
-  const response = await fetch('/api/register', {
+  const response = await client('/api/register', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
     body: JSON.stringify({
       firstName: values.firstName,
       lastName: values.lastName,
@@ -37,21 +30,15 @@ export async function postRegister(values: RegisterParams): Promise<Response | A
 
   if (!response.ok) return Promise.reject('Failed to register')
 
-  return await response.json()
+  return response.json()
 }
 
-export async function getMe(): Promise<ApiResponse<User>> {
-  const token = readLocalStorageValue({ key: 'token' }) as string | null
-
-  const response = await fetch('/api/users/me', {
+export const getMe = async (): Promise<ApiResponse<User>> => {
+  const response = await client('/api/users/me', {
     method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
   })
 
   if (!response.ok) return Promise.reject('Failed to get current user')
 
-  return await response.json()
+  return response.json()
 }

app/assets/contexts/AuthContext.ts

@@ -2,20 +2,14 @@ import { useCallback } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import { useLocalStorage } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
 
 import { postLogin, postRegister } from '@/features/auth/api/auth'
-import { useRouter } from '@tanstack/react-router'
+import { useNavigate } from 'react-router-dom'
+import { removeUser, saveUser } from './useUserLocalStorage'
 
 export const useAuth = () => {
-  const [token, setToken] = useLocalStorage({ key: 'token', defaultValue: null })
-  const [isAuthenticated, setIsAuthenticated] = useLocalStorage({
-    key: 'isAuthenticated',
-    defaultValue: false,
-  })
-  const router = useRouter()
-
+  const navigate = useNavigate()
   const login = useCallback((email: string, password: string) => {
     authLogin.mutate({ email, password })
   }, [])
@@ -35,10 +29,7 @@ export const useAuth = () => {
         return
       }
 
-      setToken(data.token)
-      setIsAuthenticated(true)
-
-      router.invalidate()
+      saveUser(data)
 
       notifications.show({
         withBorder: true,
@@ -47,6 +38,8 @@ export const useAuth = () => {
         title: 'Successful Login',
         message: 'You are now logged in',
       })
+
+      navigate('/')
     },
     onError: (error: Error) => {
       console.log('error:', error)
@@ -86,10 +79,7 @@ export const useAuth = () => {
   })
 
   const logout = () => {
-    setToken(null)
-    setIsAuthenticated(false)
-
-    router.invalidate()
+    removeUser()
 
     notifications.show({
       withBorder: true,
@@ -98,13 +88,13 @@ export const useAuth = () => {
       title: 'Logout',
       message: 'You are now logged out',
     })
+
+    navigate('/auth/login')
   }
 
   return {
     login,
     logout,
     register,
-    isAuthenticated,
-    token,
   }
 }

app/assets/features/auth/api/auth.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+import { getMe } from '../api/auth'
+
+export function useUser() {
+  const { data: user, isFetching } = useQuery({
+    queryKey: ['me'],
+    queryFn: getMe,
+  })
+
+  return { user, isFetching }
+}

app/assets/features/auth/api/index.ts

@@ -0,0 +1,11 @@
+export function saveUser(data: { token: string }): void {
+  localStorage.setItem('token', data.token)
+}
+
+export function removeUser(): void {
+  localStorage.removeItem('token')
+}
+
+export function getUser(): string | null {
+  return localStorage.getItem('token')
+}

app/assets/features/auth/hooks/useAuth.ts

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useForm } from 'react-hook-form'
+import { Link } from 'react-router-dom'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 
@@ -17,10 +18,9 @@ import {
 import { useAuth } from '@/features/auth/hooks/useAuth'
 import { loginFormSchema, loginFormType } from '@/features/auth/schemas/login'
 
-import { Link } from '@tanstack/react-router'
 import classes from './login.module.css'
 
-export const Login = () => {
+const Login: React.FC = () => {
   const { login } = useAuth()
 
   const loginForm = useForm<loginFormType>({
@@ -42,7 +42,7 @@ export const Login = () => {
       </Title>
       <Text c='dimmed' size='sm' ta='center' mt={5}>
         Do not have an account yet?{' '}
-        <Anchor size='sm' component={Link} to='/register'>
+        <Anchor size='sm' component={Link} to='/auth/register'>
           Create account
         </Anchor>
       </Text>
@@ -70,3 +70,5 @@ export const Login = () => {
     </Container>
   )
 }
+
+export default Login

app/assets/features/auth/hooks/useUser.ts

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useForm } from 'react-hook-form'
+import { Link } from 'react-router-dom'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 
@@ -17,10 +18,9 @@ import {
 import { useAuth } from '@/features/auth/hooks/useAuth'
 import { registerFormSchema, registerFormType } from '@/features/auth/schemas/register'
 
-import { Link } from '@tanstack/react-router'
 import classes from './register.module.css'
 
-export const Register = () => {
+const Register: React.FC = () => {
   const { register } = useAuth()
 
   const registerForm = useForm<registerFormType>({
@@ -45,7 +45,7 @@ export const Register = () => {
       </Title>
       <Text c='dimmed' size='sm' ta='center' mt={5}>
         Already have an account?{' '}
-        <Anchor size='sm' component={Link} to='/login'>
+        <Anchor size='sm' component={Link} to='/auth/login'>
           Sign in
         </Anchor>
       </Text>
@@ -94,3 +94,5 @@ export const Register = () => {
     </Container>
   )
 }
+
+export default Register

app/assets/features/auth/hooks/useUserLocalStorage.ts

@@ -1,19 +1,12 @@
-import { readLocalStorageValue } from '@mantine/hooks'
-
 import { Budget, BudgetDetails, BudgetParams } from '@/features/budgets/types'
 
 import { ApiErrorResponse } from '@/utils/ApiErrorResponse'
 import { ApiResponse, ApiResponseList } from '@/utils/ApiResponse'
+import { client } from '@/utils/client'
 
 export async function getBudgetList(): Promise<ApiResponseList<Budget[]>> {
-  const token = readLocalStorageValue({ key: 'token' }) as string | null
-
-  const response = await fetch('/api/budgets', {
+  const response = await client('/api/budgets', {
     method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
   })
 
   if (!response.ok) return Promise.reject('Failed to get user budgets')
@@ -22,14 +15,8 @@ export async function getBudgetList(): Promise<ApiResponseList<Budget[]>> {
 }
 
 export async function getBudgetDetail(id: string): Promise<ApiResponse<BudgetDetails>> {
-  const token = readLocalStorageValue({ key: 'token' }) as string | null
-
-  const response = await fetch(`/api/budgets/${id}`, {
+  const response = await client(`/api/budgets/${id}`, {
     method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
   })
 
   if (!response.ok) return Promise.reject('Failed to get user budgets')
@@ -38,14 +25,8 @@ export async function getBudgetDetail(id: string): Promise<ApiResponse<BudgetDet
 }
 
 export async function postBudget(values: BudgetParams): Promise<Response | ApiErrorResponse> {
-  const token = readLocalStorageValue({ key: 'token' }) as string | null
-
-  const response = await fetch('/api/budgets', {
+  const response = await client('/api/budgets', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
     body: JSON.stringify({
       date: values.date,
       incomes: values.incomes,
@@ -59,14 +40,8 @@ export async function postBudget(values: BudgetParams): Promise<Response | ApiEr
 }
 
 export async function deleteBudgetId(id: string): Promise<Response | ApiErrorResponse> {
-  const token = readLocalStorageValue({ key: 'token' }) as string | null
-
-  const response = await fetch(`/api/budgets/${id}`, {
+  const response = await client(`/api/budgets/${id}`, {
     method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
   })
 
   if (!response.ok) return Promise.reject('Failed to delete budget')
@@ -78,14 +53,8 @@ export async function updateBudgetId(
   id: string,
   values: BudgetParams,
 ): Promise<Response | ApiErrorResponse> {
-  const token = readLocalStorageValue({ key: 'token' }) as string | null
-
-  const response = await fetch(`/api/budgets/${id}`, {
+  const response = await client(`/api/budgets/${id}`, {
     method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
     body: JSON.stringify({
       date: values.date,
       incomes: values.incomes,