adde authentication components to App js

import React from "react";

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

import HomeComponent from "./components/HomeComponent"; 

import MessageComponent from "./components/MessageComponent";

import Home from "./components/Home";

import { UserRoleProvider } from './contexts/UserRoleContext';

import Navbar from "./components/Navbar";

import Register from "./components/Register";

import Login from "./components/Login";

import Entries from "./components/Entries";

import 'bootstrap/dist/css/bootstrap.min.css';

import './assets/mystyle.css'

import './assets/custom.css'

// import logo from './logo.svg';

// import './App.css';

    //     </a>

    //   </header>

    // </div>

    <UserRoleProvider>

    <Router>

      <Navbar />

      <div className="container mt-5">

      <Routes>

        {/* Home route */}

        <Route path="/" element={<HomeComponent />} />

        <Route path="/home" element={<HomeComponent />} />

        {/* Home route */}

        <Route path="/" element={<Home />} />

        {/* Entries route */}

        <Route path="/" element={<Entries />} />

        {/* Message route */}

        <Route path="/message" element={<MessageComponent />} />

        {/* Login route */}

        <Route path="/login" element={<Login />} />

        {/* Register route */}

        <Route path="/register" element={<Register />} />

      </Routes>

      </div>

    </Router>

    </UserRoleProvider>

  );

}