Auth

oathfiles.txt

@@ -0,0 +1,2 @@
+dev-eydbckiq4wqvn7iy.us.auth0.com
+LslJwFqrmO90hmUV4K4v2Yg63nq4QjNU

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.6",
@@ -22,6 +23,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
+    "securesure": "file:",
     "web3": "^4.15.0"
   },
   "devDependencies": {

src/App.jsx

@@ -3,18 +3,23 @@ import LandingPage from './components/LandingPage';
 import AdminPage from './components/AdminPage';
 import HospitalDashboard from './components/HospitalDashboard';
 import CompanyDashboard from './components/CompanyDasboard';
+
+import Login from './components/Login'
 import UserDashboard from './components/UserDashboard';
 import ClaimSubmit from './components/ClaimSubmit';
 
+
 const App = () => (
     <Router>
         <Routes>
             <Route path="/" element={<LandingPage />} />
             <Route path="/admin" element={<AdminPage />} />
             <Route path='/hospital' element={<HospitalDashboard />} />
             <Route path='/company' element={<CompanyDashboard />} />
+            <Route path='/login' element={<Login />} />
             <Route path='/user' element={<UserDashboard />} />
             <Route path='/claim' element={<ClaimSubmit />} />
+
         </Routes>
     </Router>
 );

src/components/LandingPage.jsx

@@ -1,63 +1,77 @@
 import React from 'react';
 import { Shield, Lock, Clock, Check, ChevronRight, Database, AlertCircle } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
 
 const LandingPage = () => {
-    return (
-        <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
-            <nav className="bg-white shadow-sm fixed w-full z-10">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex justify-between h-16 items-center">
-                        <div className="flex items-center">
-                            <Shield className="h-8 w-8 text-blue-600" />
-                            <span className="ml-2 text-xl font-bold text-gray-900">SecureSure</span>
-                        </div>
-                        <div className="hidden md:flex items-center space-x-8">
-                            <a href="#features" className="text-gray-700 hover:text-blue-600">Features</a>
-                            <a href="#technology" className="text-gray-700 hover:text-blue-600">Technology</a>
-                            <a href="#workflow" className="text-gray-700 hover:text-blue-600">How it Works</a>
-                            <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
-                                Get Started
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </nav>
+  const navigate = useNavigate(); // Hook for navigation
 
-            <header className="relative overflow-hidden pt-20">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
-                    <motion.div
-                        className="text-center"
-                        initial={{ opacity: 0, y: -50 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8 }}
-                    >
-                        <h1 className="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-6xl">
-                            <span className="block">Decentralized Smart Insurance</span>
-                            <span className="block text-blue-600">Claim Processing</span>
-                        </h1>
-                        <p className="mt-5 max-w-md mx-auto text-xl text-gray-600 sm:text-2xl md:mt-8 md:max-w-3xl">
-                            Leverage the power of Web3 and Generative AI for transparent, fraud-resistant insurance claims processing.
-                        </p>
-                        <div className="mt-8 flex justify-center">
-                            <motion.a
-                                href="#"
-                                className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
-                                whileHover={{ scale: 1.05 }}
-                            >
-                                Get Started
-                            </motion.a>
-                            <motion.a
-                                href="#"
-                                className="ml-4 inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-blue-600 bg-white border border-blue-600 hover:bg-blue-50"
-                                whileHover={{ scale: 1.05 }}
-                            >
-                                Learn More
-                            </motion.a>
-                        </div>
-                    </motion.div>
-                </div>
-            </header>
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
+      <nav className="bg-white shadow-sm fixed w-full z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16 items-center">
+            <div className="flex items-center">
+              <Shield className="h-8 w-8 text-blue-600" />
+              <span className="ml-2 text-xl font-bold text-gray-900">SecureSure</span>
+            </div>
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#features" className="text-gray-700 hover:text-blue-600">
+                Features
+              </a>
+              <a href="#technology" className="text-gray-700 hover:text-blue-600">
+                Technology
+              </a>
+              <a href="#workflow" className="text-gray-700 hover:text-blue-600">
+                How it Works
+              </a>
+              {/* Update button to use navigation */}
+              <button
+                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
+                onClick={() => navigate('/login')} // Redirect to the login page
+              >
+                Get Started
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <header className="relative overflow-hidden pt-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <motion.div
+            className="text-center"
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <h1 className="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-6xl">
+              <span className="block">Decentralized Smart Insurance</span>
+              <span className="block text-blue-600">Claim Processing</span>
+            </h1>
+            <p className="mt-5 max-w-md mx-auto text-xl text-gray-600 sm:text-2xl md:mt-8 md:max-w-3xl">
+              Leverage the power of Web3 and Generative AI for transparent, fraud-resistant insurance claims processing.
+            </p>
+            <div className="mt-8 flex justify-center">
+              <motion.a
+                href="#"
+                className="inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+                whileHover={{ scale: 1.05 }}
+                onClick={() => navigate('/login')} // Redirect to the login page
+              >
+                Get Started
+              </motion.a>
+              <motion.a
+                href="#"
+                className="ml-4 inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-blue-600 bg-white border border-blue-600 hover:bg-blue-50"
+                whileHover={{ scale: 1.05 }}
+              >
+                Learn More
+              </motion.a>
+            </div>
+          </motion.div>
+        </div>
+      </header>
 
             <section id="features" className="py-16 bg-gray-50">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

src/components/Login.css

@@ -0,0 +1,23 @@
+.login-container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f0f4f8; /* Light background for better contrast */
+  }
+
+  .login-button {
+    background-color: #1e40af; /* Tailwind's blue-700 */
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .login-button:hover {
+    background-color: #1d4ed8; /* Tailwind's blue-800 */
+  }
+

src/components/Login.jsx

@@ -0,0 +1,23 @@
+import { useAuth0 } from '@auth0/auth0-react';
+
+
+function Login() {
+  const { user, loginWithRedirect } = useAuth0();
+
+  console.log("Current User:", user);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
+      <header className="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
+        <button
+          onClick={() => loginWithRedirect()}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Login with Redirect
+        </button>
+      </header>
+    </div>
+  );
+}
+
+export default Login;

src/main.jsx

@@ -1,10 +1,21 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { Auth0Provider } from '@auth0/auth0-react';
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
+
+  <Auth0Provider
+   domain="dev-eydbckiq4wqvn7iy.us.auth0.com"
+    clientId="hKvJ5ykA2G9EcD5Cmtn4jfAUvCluKXk2"
+  authorizationParams={{
+    redirect_uri: window.location.origin
+  }}
+>
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+  <App />
+  </StrictMode>
+</Auth0Provider>,
+);
+