add firebase and routing in client side

README.md

@@ -5,15 +5,27 @@
 npm install
 ```
 
-2. Create a `.env.local` file in the root directory and add in the firebase config data to connect to firebase : 
+2. Create a `.env.local` file in the server directory and add in the firebase config data to connect to firebase : 
 ```
-REACT_APP_FIREBASE_API_KEY=xxx
-REACT_APP_FIREBASE_AUTH_DOMAIN=xxx
-REACT_APP_FIREBASE_PROJECT_ID=xxx
-REACT_APP_FIREBASE_STORAGE_BUCKET=xxx
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID=xxx
-REACT_APP_FIREBASE_APP_ID=xxx
+FIREBASE_API_KEY=xxx
+FIREBASE_AUTH_DOMAIN=xxx
+FIREBASE_PROJECT_ID=xxx
+FIREBASE_STORAGE_BUCKET=xxx
+FIREBASE_MESSAGING_SENDER_ID=xxx
+FIREBASE_APP_ID=xxx
+
+```
+- Client-Side (if needed): If any of these variables are also needed on the client side, you'll need to duplicate them with the VITE_ prefix and place them in the .env file:
+```
+VITE_FIREBASE_API_KEY=xxx
+VITE_FIREBASE_AUTH_DOMAIN=xxx
+VITE_FIREBASE_PROJECT_ID=xxx
+VITE_FIREBASE_STORAGE_BUCKET=xxx
+VITE_FIREBASE_MESSAGING_SENDER_ID=xxx
+VITE_FIREBASE_APP_ID=xxx
 ```
+This way, your server-side environment variables remain secure, while the client-side variables are correctly exposed using Vite's import.meta.env method if needed.
+In Server-side make use of `dotenv` package and make sure to import config.js and use `process.env.FIREBASE_*` when needed.
 
 Contact any of the maintainers for the contents of the `.env.local` file
 

client/src/Landing.jsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import './App.css';
-
 function Landing() {
   const [count, setCount] = useState(0);
 
@@ -28,6 +27,7 @@ function Landing() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+      {/* <a href="profile">hehe</a> */}
     </>
   );
 }

server/Firebase.js

@@ -0,0 +1,28 @@
+// Import the environment variables
+import './config.js';
+
+// Import Firebase functions
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+import { getStorage } from 'firebase/storage';
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.FIREBASE_PROJECT_ID,
+  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.FIREBASE_APP_ID,
+  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore(app);
+const googleProvider = new GoogleAuthProvider();
+const storage = getStorage(app);
+
+export { auth, googleProvider, db, storage };

server/config.js

@@ -0,0 +1,4 @@
+import { config } from 'dotenv';
+
+// Load environment variables from .env.local
+config({ path: '.env.local' });