Merge pull request #75 from UoaWDCC/VOL-9/user-authentication-google

User Authentication with Google SignIn popup

web/services/firebase.tsx

@@ -0,0 +1,22 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey:"AIzaSyBox7z0b2SBEnz0v6qmQjFx3QfUJcG099U",
+  authDomain:"volunteerclub-14b7a.firebaseapp.com",
+  projectId:"volunteerclub-14b7a",
+  storageBucket:"volunteerclub-14b7a.appspot.com",
+  messagingSenderId:"765497707892",
+  appId:"1:765497707892:web:d1fb4e8f77881366037021",
+  measurementId:"G-TLM9P3DCKS",
+  };
+
+const app = initializeApp(firebaseConfig);
+
+// Export Firebase authentication service
+export const auth = getAuth(app);
+
+export const handleGoogle = async () => {
+    const provider = await new GoogleAuthProvider();
+    return signInWithPopup(auth, provider);
+  }

web/src/components/Header.tsx

@@ -1,4 +1,5 @@
-import "../styles/componentStyles/Header.css"
+import "../styles/componentStyles/Header.css";
+import { handleGoogle } from "../../services/firebase.tsx";
 
 function Header() {
   return (
@@ -11,7 +12,7 @@ function Header() {
 
         <div className="header-right">
           <ul className="links">
-            <li className="button">Sign in</li>
+            <li onClick={ handleGoogle } className="button">Sign in</li>
           </ul>
         </div>
       </div>