added login with google authentication (#133)

* added login with google authentication

* updated snapshot tests

* fixed import error

Co-authored-by: allan <[email protected]>

src/App.jsx

@@ -48,7 +48,7 @@ function App() {
         <Route path="/roadmap" element={<RoadMaps />} />
         <Route path="/jobs" element={<CombiningFilterComponents />} />
         <Route path="/profile" element={<ProfilePage />} />
-        <Route path="/profile-edit" element={<ProfileEdit/>} />
+        <Route path="/profile-edit" element={<ProfileEdit />} />
         <Route path="/contact" element={<ContactPage />} />
       </Routes>
       <Footer />

src/components/Login/Login.jsx

@@ -1,10 +1,17 @@
 /* eslint-disable no-console */
+import { useNavigate, Link } from "react-router-dom";
 import { useForm } from "react-hook-form";
-import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { auth, google, signInWithPopup } from "../../firebase";
 
 function Login() {
+  const navigate = useNavigate();
+  const login = async (provider) => {
+    const result = await signInWithPopup(auth, provider);
+    console.log(result);
+    navigate("/");
+  };
   const {
     register,
     formState: { errors },
@@ -77,6 +84,7 @@ function Login() {
           <div>
             <button
               type="button"
+              onClick={() => login(google)}
               className=" text-black border-t-2 border-l-2 border-r-4 border-b-4 border-black py-0.5 px-8 rounded-lg bg-white hover:shadow-md"
             >
               <FontAwesomeIcon

src/components/Login/__test__/Login.test.js

@@ -1,6 +1,5 @@
 import renderer from "react-test-renderer";
 import { MemoryRouter } from "react-router-dom";
-
 import Login from "../Login";
 
 it("renders correctly when the component matches the snapshot", () => {

src/components/Login/__test__/__snapshots__/Login.test.js.snap

@@ -82,6 +82,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
       <div>
         <button
           className=" text-black border-t-2 border-l-2 border-r-4 border-b-4 border-black py-0.5 px-8 rounded-lg bg-white hover:shadow-md"
+          onClick={[Function]}
           type="button"
         >
           <svg

src/components/signup/SignUp.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-alert */
 /* eslint-disable no-console */
-import React from "react";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";

src/firebase.js

@@ -16,6 +16,8 @@ import {
 } from "firebase/firestore";
 import {
   getAuth,
+  GoogleAuthProvider,
+  signInWithPopup,
   createUserWithEmailAndPassword,
   updateProfile,
   onAuthStateChanged,
@@ -34,9 +36,12 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
+const google = new GoogleAuthProvider();
 const auth = getAuth();
 
 export {
+  signInWithPopup,
+  google,
   db,
   collection,
   getDocs,