Add Google Client ID

frontend/package.json

@@ -18,6 +18,7 @@
     "@mui/material": "^5.14.15",
     "axios": "^1.5.1",
     "bootstrap": "^5.3.2",
+    "dotenv": "^16.3.1",
     "gapi-script": "^1.2.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",

frontend/pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   bootstrap:
     specifier: ^5.3.2
     version: 5.3.2(@popperjs/core@2.11.8)
+  dotenv:
+    specifier: ^16.3.1
+    version: 16.3.1
   gapi-script:
     specifier: ^1.2.0
     version: 1.2.0
@@ -1552,6 +1555,11 @@ packages:
       csstype: 3.1.2
     dev: false
 
+  /dotenv@16.3.1:
+    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
+    engines: {node: '>=12'}
+    dev: false
+
   /electron-to-chromium@1.4.567:
     resolution: {integrity: sha512-8KR114CAYQ4/r5EIEsOmOMqQ9j0MRbJZR3aXD/KFA8RuKzyoUB4XrUCg+l8RUGqTVQgKNIgTpjaG8YHRPAbX2w==}
     dev: true

frontend/sample.env

@@ -0,0 +1 @@
+VITE_GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID

frontend/src/components/login.jsx

@@ -10,6 +10,9 @@ import axiosapi from '../api/axiosapi';
 import { useNavigate } from 'react-router-dom';
 import { GoogleLogin } from 'react-google-login';
 
+
+const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
+
 const useStyles = makeStyles((theme) => ({
     // Styles for various elements
     paper: {
@@ -144,7 +147,7 @@ export default function Login() {
                 </form>
 
                 <GoogleLogin
-                    clientId="YOUR_GOOGLE_CLIENT_ID"
+                    clientId={GOOGLE_CLIENT_ID}
                     buttonText="Login"
                     onSuccess={responseGoogle}
                     onFailure={responseGoogle}