Fix router

apps/platform/src/main.tsx

@@ -1,12 +1,12 @@
 import { StrictMode } from 'react'
 import * as ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
 
-import Router from './router/router'
+import Routes from './router/router'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 
 import { QueryClient, QueryClientProvider } from 'react-query'
+import AuthProvider from './provider/authProvider'
 
 const queryClient = new QueryClient()
 
@@ -15,9 +15,9 @@ root.render(
   <StrictMode>
     <ToastContainer />
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <Router />
-      </BrowserRouter>
+        <AuthProvider>
+          <Routes />
+        </AuthProvider>
     </QueryClientProvider>
   </StrictMode>
 )

apps/platform/src/provider/authProvider.tsx

@@ -0,0 +1,48 @@
+import { getAccessToken } from '@isomera/impl'
+import axios from 'axios'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+
+interface AuthContextType {
+  token: string | null
+  // Other authentication-related properties/methods...
+}
+
+// Define the type for the AuthProvider props
+type AuthProviderProps = {
+  children: React.ReactNode
+  // You can include other props for the AuthProvider here if needed
+}
+
+const AuthContext = createContext<AuthContextType>({
+  token: ''
+})
+
+const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  // State to hold the authentication token
+  const [token, setToken_] = useState(getAccessToken())
+
+  // Function to set the authentication token
+  const setToken = (newToken: string) => {
+    setToken_(newToken)
+  }
+
+  // Memoized value of the authentication context
+  const contextValue = useMemo(
+    () => ({
+      token,
+      setToken
+    }),
+    [token]
+  )
+
+  // Provide the authentication context to the children components
+  return (
+    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+  )
+}
+
+export const useAuth = (): AuthContextType => {
+  return useContext(AuthContext)
+}
+
+export default AuthProvider

apps/platform/src/router/protectedRoute.tsx

@@ -0,0 +1,28 @@
+import { Navigate, Outlet } from 'react-router-dom'
+import { getAccessToken, pages } from '@isomera/impl'
+
+export const ProtectedRoute = () => {
+  const token = getAccessToken()
+
+  // Check if the user is authenticated
+  if (!token) {
+    // If not authenticated, redirect to the login page
+    return <Navigate to="/" />
+  }
+
+  // If authenticated, render the child routes
+  return <Outlet />
+}
+
+export const NoProtectedRoute = () => {
+  const token = getAccessToken()
+
+  // Check if the user is authenticated
+  if (token) {
+    // If not authenticated, redirect to the login page
+    return <Navigate to={pages.userInfo.path} />
+  }
+
+  // If authenticated, render the child routes
+  return <Outlet />
+}

apps/platform/src/router/router.tsx

@@ -1,64 +1,90 @@
 import 'reflect-metadata'
-import { Route, Routes, Link } from 'react-router-dom'
+import { Link, createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { SignInView } from '../views/auth/signIn.view'
 import { SignUpView } from '../views/auth/signUp.view'
 import { pages } from '@isomera/impl'
 import { PasswordResetView } from '../views/auth/passwordReset.view'
 import { PasswordResetConfirmView } from '../views/auth/passwordResetConfirm.view'
 import { UserInfoView } from '../views/user /info.view'
+import { useAuth } from '../provider/authProvider'
+import { NoProtectedRoute, ProtectedRoute } from './protectedRoute'
 
-export function Router() {
-  return (
-    <div>
-      <Routes>
-        <Route
-          path="/"
-          element={
+const Routes = () => {
+  const { token } = useAuth()
+
+  // Define routes accessible only to authenticated users
+  const routesForAuthenticatedOnly = [
+    {
+      path: '/',
+      element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
+      children: [
+        {
+          path: 'user/info',
+          element: (
+            <div>
+              <UserInfoView />
+            </div>
+          )
+        }
+      ]
+    }
+  ]
+
+  // Define routes accessible only to non-authenticated users
+  const routesForNotAuthenticatedOnly = [
+    {
+      path: '/',
+      element: <NoProtectedRoute />, // Wrap the component in ProtectedRoute
+      children: [
+        {
+          path: '/',
+          element: (
             <div>
               <SignInView />
               <Link to="/sign-up">Sign Up</Link>
               <Link to={pages.passwordResetRequest.path}>Forgot password</Link>
             </div>
-          }
-        />
-        <Route
-          path="/sign-up"
-          element={
+          )
+        },
+        {
+          path: '/sign-up',
+          element: (
             <div>
               <SignUpView />
-              <Link to="/">Sign In</Link>
+              <Link to="/">Sign up</Link>
             </div>
-          }
-        />
-        <Route
-          path={pages.passwordResetRequest.path}
-          element={
+          )
+        },
+        {
+          path: pages.passwordResetRequest.path,
+          element: (
             <div>
               <PasswordResetView />
               <Link to="/">Sign In</Link>
             </div>
-          }
-        />
-        <Route
-          path={pages.passwordResetRequestConfirmation.path}
-          element={
+          )
+        },
+        {
+          path: pages.passwordResetRequestConfirmation.path,
+          element: (
             <div>
               <PasswordResetConfirmView />
               <Link to="/">Sign In</Link>
             </div>
-          }
-        />
-        <Route
-          path={pages.userInfo.path}
-          element={
-            <div>
-              <UserInfoView />
-            </div>
-          }
-        />
-      </Routes>
-    </div>
-  )
+          )
+        }
+      ]
+    }
+  ]
+
+  // Combine and conditionally include routes based on authentication status
+  const router = createBrowserRouter([
+    ...routesForNotAuthenticatedOnly,
+    ...routesForAuthenticatedOnly
+  ])
+
+  // Provide the router configuration using RouterProvider
+  return <RouterProvider router={router} />
 }
 
-export default Router
+export default Routes

apps/platform/src/views/user /info.view.tsx

@@ -1,16 +1,12 @@
-import { useUserHook } from "@isomera/impl"
+import { useUserHook } from '@isomera/impl'
 
 export const UserInfoView = () => {
-  const {data, isFetched} = useUserHook()
-    return (
-        <div>
-          Profile here
-          <div>
-            First Name: {data?.firstName}
-          </div>
-          <div>
-            Last Name: {data?.lastName}
-          </div>
-        </div>
-    )
-  }
+  const { data, isFetched } = useUserHook()
+  return (
+    <div>
+      Profile here
+      <div>First Name: {data?.firstName}</div>
+      <div>Last Name: {data?.lastName}</div>
+    </div>
+  )
+}