feat: add firebase google authentication

Express_js_Server/index.js

@@ -87,7 +87,6 @@ app.get("/allData", async (req, res) => {
     ("[email protected]", "priyansh!", "priyansh mishra", "5347658679", "2567","some feedback");`;
 
 
-
     let output = await db.all(bringAllData);
     console.log("table created");
 

package.json

@@ -2,17 +2,16 @@
   "homepage": ".",
   "name": "website",
   "version": "0.1.0",
-
-
   "proxy": "https://umatter.onrender.com",
-
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
+    "dotenv": "^16.3.1",
+    "firebase": "^10.1.0",
     "framer-motion": "^10.12.16",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",

src/Components/Signin/SigninElements.js

@@ -168,6 +168,7 @@ export const FormContainer = styled.div`
 export const SignInContainer = styled.div`
   width: 55%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100%;
@@ -193,7 +194,7 @@ export const RightContainer = styled.div`
 
 export const SignInForm = styled.form`
   min-width: 100%;
-  height: 100%;
+  height: 70%;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/Components/Signin/index.js

@@ -3,22 +3,15 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 // import DarkMode from '../DarkMode/DarkMode';
+import { signInWithPopup } from "firebase/auth";
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { auth, provider } from "../../firebase-config";
+import SignInImg from "../../images/SignIn.webp";
 import {
-  NewContainer,
-  FormContainer,
-  SignInContainer,
-  RightContainer,
-  SignInForm,
-  SignInButton,
-  RightHeading,
-  RightPara,
-  SignInInput,
-  SignInLabel,
-  SignInh1,
   CheckBox,
-  RememberMe,
   ForgotPassword,
-  PasswordContainer,
+  FormContainer,
   Image
   // Icons,
   // FormButton,
@@ -29,10 +22,120 @@ import {
   // FormLabel,
   // FormWrap,
   // Text,
+  ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  NewContainer,
+  PasswordContainer,
+  RememberMe,
+  RightContainer,
+  RightHeading,
+  RightPara,
+  SignInButton,
+  SignInContainer,
+  SignInForm,
+  SignInInput,
+  SignInLabel,
+  SignInh1
 } from "./SigninElements";
-import SignInImg from "../../images/SignIn.webp";
-import { useState } from "react";
-import { NavLink } from "react-router-dom";
 // import Navbar from "../Navbar";
 
 const SignIn = () => {
@@ -98,6 +201,17 @@ const SignIn = () => {
     );
   };
 
+  // Firebase google authentication
+  const handleGoogleLogin = async () => {
+    try {
+      const user = await signInWithPopup(auth, provider);
+      localStorage.setItem("authorizationToken", user.user.accessToken);
+      localStorage.setItem("username", user.user.email);
+    } catch (err) {
+      console.log(err.message);
+    }
+  }
+
   return (
     // <>
     // 	{/* <DarkMode/> */}
@@ -197,7 +311,7 @@ const SignIn = () => {
     <NewContainer>
       <FormContainer>
         <SignInContainer>
-          <SignInForm onSubmit={sendPostRequest} action="#">
+          <SignInForm onSubmit={sendPostRequest}>
             <SignInh1>Sign in</SignInh1>
             <SignInLabel htmlFor="email">Email</SignInLabel>
             <SignInInput
@@ -216,7 +330,7 @@ const SignIn = () => {
                 placeholder="at least 8 characters"
                 require
               />
-			  {passwordType === "password" ? (
+              {passwordType === "password" ? (
                 <i
                   className="fa-solid fa-eye-slash"
                   id="eye"
@@ -254,12 +368,17 @@ const SignIn = () => {
             <NavLink to="/signin/forgotPassword">
               <ForgotPassword>Forgot password?</ForgotPassword>
             </NavLink>
-            <label style={{ fontSize: '14px', marginLeft: '-25px',marginTop: '10px', display: 'block' ,  color: 'green'}}>Don't have an account ? </label>
-            <NavLink to="/signup" style={{ fontSize: '14px', marginTop: '-20px' ,marginLeft: '200px' }}>
+            <label style={{ fontSize: '14px', marginLeft: '-25px', marginTop: '10px', display: 'block', color: 'green' }}>Don't have an account ? </label>
+            <NavLink to="/signup" style={{ fontSize: '14px', marginTop: '-20px', marginLeft: '200px' }}>
               SignUp
-            </NavLink>         
-           </SignInForm>
+            </NavLink>
+          </SignInForm>
+          <div className='flex relative mt-10 w-[80%] md:w-[60%]' onClick={handleGoogleLogin}>
+            <button className='py-3 rounded-xl text-black font-semibold w-[100%] border-2 border-black'>Sign in with Google</button>
+            <img src={require('../../assests/googleLogo.png')} className='w-10 absolute top-1.5 left-4' alt='google' />
+          </div>
         </SignInContainer>
+
         <RightContainer>
           <RightHeading>Hello, Friend!</RightHeading>
           <RightPara>Enter your details and let's get started.</RightPara>

src/Components/Signup/index.js

@@ -39,6 +39,8 @@ const SignUp = () => {
   const [data, setData] = useState({});
   const [trackState, setTrackState] = useState(false);
 
+
+
   // Use for internation country code selector
   const [value, setValue] = useState();
 

src/firebase-config.js

@@ -0,0 +1,24 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider } from "firebase/auth";
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+    apiKey: `${process.env.REACT_APP_APIKEYURL}`,
+    authDomain: `${process.env.REACT_APP_AUTHDOMAIN}`,
+    projectId: `${process.env.REACT_APP_PROJECTID}`,
+    storageBucket: `${process.env.REACT_APP_STORAGEBUCKET}`,
+    messagingSenderId: `${process.env.REACT_APP_MESSAGEINGSENDERID}`,
+    appId: `${process.env.REACT_APP_APIID}`,
+    measurementId: `${process.env.REACT_APP_MEASUREMENTID}`,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider();