ajout auth

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "firebase": "^10.12.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0",
     "react-toastify": "^10.0.5",
     "sass": "^1.77.6",
     "toast": "^0.5.4"

src/App.jsx

@@ -1,21 +1,34 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import ServerCard from './components/serverCard/serverCard';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';  // Use Routes and Navigate instead of Switch and Redirect
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import LoginPage from './pages/LoginPage/LoginPage';
+import DashboardPage from './pages/DashboardPage/DashboardPage';
+import { auth } from './pages/LoginPage/firebase';
 import styles from './App.module.scss';
 
 const App = () => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
   return (
-    <>
+    <Router>
       <div className={styles.container}>
-        <div className={styles.cardsContainer}>
+        <Routes>  // Use Routes instead of Switch
-          <ServerCard color="#f0f0f0" status="En cours" version="1.16.5" link="http://example.com" name="test1" />
+          <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />  // Use element and Navigate instead of component and Redirect
-          <ServerCard color="#f0f0f0" status="Démarrage" version="1.17.1" link="http://example.com" name="test2" />
+          <Route path="/dashboard" element={user ? <DashboardPage /> : <Navigate to="/login" />} />
-          <ServerCard color="#f0f0f0" status="Hors ligne" version="1.15.2" link="http://example.com" name="test3" />
+          <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
-        </div>
+        </Routes>
+        <ToastContainer />
       </div>
-      <ToastContainer />
+    </Router>
-    </>
   );
 };
 

src/App.module.scss

@@ -1,23 +0,0 @@
-body, html {
-  background-color: #23272E;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-.container {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cardsContainer {
-  width: 100%;
-  margin-top: 5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-  justify-content: center;
-}

src/main.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React from 'react';
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
-import App from './App.jsx'
+import App from './App.jsx';
-import './main.css'
+import './main.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
-)
+);

src/pages/DashboardPage/DashboardPage.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ServerCard from '../../components/serverCard/serverCard';
+import styles from './DashboardPage.module.scss';
+
+const DashboardPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.cardsContainer}>
+        <ServerCard color="#f0f0f0" status="En cours" version="1.16.5" link="http://example.com" name="test1" />
+        <ServerCard color="#f0f0f0" status="Démarrage" version="1.17.1" link="http://example.com" name="test2" />
+        <ServerCard color="#f0f0f0" status="Hors ligne" version="1.15.2" link="http://example.com" name="test3" />
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;

src/pages/DashboardPage/DashboardPage.module.scss

@@ -0,0 +1,24 @@
+body, html {
+    background-color: #23272E;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+  }
+  
+  .container {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .cardsContainer {
+    width: 100%;
+    margin-top: 5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+  }
+  

src/pages/LoginPage/LoginPage.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { auth, googleProvider, signInWithPopup } from './firebase'; // Import signInWithPopup
+import { useNavigate } from 'react-router-dom';
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+
+  const handleLogin = async () => {
+    try {
+      await signInWithPopup(auth, googleProvider); // Use modular signInWithPopup
+      navigate('/dashboard');
+    } catch (error) {
+      console.error("Erreur lors de la connexion : ", error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Page de connexion</h1>
+      <button onClick={handleLogin}>Se connecter avec Google</button>
+    </div>
+  );
+};
+
+export default LoginPage;

src/pages/LoginPage/firebase.js

@@ -0,0 +1,20 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyAmIEy4uzsBTzQGhGkn7srDONu8QUoUVHs",
+  authDomain: "servi-e6705.firebaseapp.com",
+  projectId: "servi-e6705",
+  storageBucket: "servi-e6705.appspot.com",
+  messagingSenderId: "201267205657",
+  appId: "1:201267205657:web:f38e37d16f376d68b73c88"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Authentication and get a reference to the service
+const auth = getAuth(app);
+const googleProvider = new GoogleAuthProvider();
+
+export { auth, googleProvider, signInWithPopup };