Merge pull request #19 from Robert-M-Lucas/dev-SCRUM-26

Dev scrum 26
Robert-M-Lucas · Apr 19, 2024 · 108c8a0 · 108c8a0
2 parents 48b9b3c + 4e9f214
commit 108c8a0
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@firebase/auth": "^1.7.1",
     "bootstrap": "^5.3.3",
     "firebase": "^10.11.0",
-    "firebase-tools": "^13.7.3",
+    "googleapis": "^134.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",

diff --git a/src/pages/index/IndexPage.tsx b/src/pages/index/IndexPage.tsx
@@ -3,52 +3,53 @@ import {Footer} from "../../components/Footer.tsx";
 
 import "./IndexPage.scss"
 import {Link} from "react-router-dom";
+import { signInWithGoogle } from '../../utils/authentication';
 
 interface Props {
     user?: string
 }
 
 function IndexPage({ user }: Props) {
     return (<>
-            <div className="d-flex vh-100 flex-column">
-                <Header user={user}/>
-                <div className="row vw-100" style={{flexGrow: 1, maxWidth: "99vw"}}>
-                    <div className="col-6 p-0 d-flex justify-content-center align-items-center">
-                        <div className="text-center">
-                            <h1 className="fw-bold" style={{fontSize: "80px"}}>Budget-19</h1>
-                            <p className="text-muted">Budgeting. Made difficult.</p>
-                        </div>
+        <div className="d-flex vh-100 flex-column">
+            <Header user={user}/>
+            <div className="row vw-100" style={{flexGrow: 1, maxWidth: "99vw"}}>
+                <div className="col-6 p-0 d-flex justify-content-center align-items-center">
+                    <div className="text-center">
+                        <h1 className="fw-bold" style={{fontSize: "80px"}}>Budget-19</h1>
+                        <p className="text-muted">Budgeting. Made difficult.</p>
                     </div>
-                    <div className="p-0 m-0" style={{
-                        position: "absolute",
-                        top: "30%",
-                        height: "50%",
-                        left: "50%",
-                        transform: "translate(-50%, 0)",
-                        width: "1px",
-                        backgroundColor: "grey",
-                    }}></div>
-                    <div className="col-6 p-0 d-flex justify-content-center align-items-center">
-                        <div className="text-center">
-                            <h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
-                            <div className="row">
-                                <div className="col p-2">
-                                    <Link to="/login-page">
-                                        <button type="button" className="login-with-google-btn">Sign in with Google
-                                        </button>
-                                    </Link>
-                                </div>
-                                <div className="col p-2">
-                                    <Link to="/login-page">
-                                        <button type="button" className="login-with-ms-btn text-nowrap">Sign in with Microsoft
-                                        </button>
-                                    </Link>
-                                </div>
+                </div>
+                <div className="p-0 m-0" style={{
+                    position: "absolute",
+                    top: "30%",
+                    height: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, 0)",
+                    width: "1px",
+                    backgroundColor: "grey",
+                }}></div>
+                <div className="col-6 p-0 d-flex justify-content-center align-items-center">
+                    <div className="text-center">
+                        <h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
+                        <div className="row">
+                            <div className="col p-2">
+                                <button type="button" className="login-with-google-btn" onClick={signInWithGoogle}>
+                                    Sign in with Google
+                                </button>
+                            </div>
+                            <div className="col p-2">
+                                <Link to="/login-page">
+                                    <button type="button" className="login-with-ms-btn text-nowrap">Sign in with
+                                        Microsoft
+                                    </button>
+                                </Link>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
         <Footer/>
     </>);
 }

diff --git a/src/utils/authentication.ts b/src/utils/authentication.ts
@@ -0,0 +1,18 @@
+import { GoogleAuthProvider } from "firebase/auth";
+import {auth} from "./firebase.ts";
+import { signInWithPopup } from "firebase/auth";
+
+// Initialize a new Google Auth Provider
+const googleProvider = new GoogleAuthProvider();
+
+// Function to sign in with Google
+export const signInWithGoogle = async () => {
+    try {
+        const result = await signInWithPopup(auth, googleProvider);
+        const user = result.user;
+        console.log(user);
+        // Do something with the user object (e.g. save to state)
+    } catch (error) {
+        console.error(error);
+    }
+};
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
@@ -1,12 +1,9 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
-
-// Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
+import { getAuth } from "firebase/auth";
 
 // Your web app's Firebase configuration
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
     apiKey: "AIzaSyD70wqk2KYojBO_fAEiWEhDbiz4lo8vw2s",
     authDomain: "budget-19.firebaseapp.com",
@@ -19,4 +16,5 @@ const firebaseConfig = {
 
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig);
-export const analytics = getAnalytics(app);
+export const analytics = getAnalytics(app);
+export const auth = getAuth(app); // Initialize Firebase Authentication