Merge pull request #71 from Monilprajapati/main

Done with Google Auth Login and Register

client/.env.example

@@ -1,2 +1,12 @@
 VITE_CLIENT_ID=githubclientid
 VITE_URL=http://localhost:3001
+
+# Firebase environment variables
+
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
+VITE_FIREBASE_STORAGE_BUCKET=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+VITE_FIREBASE_APP_ID=
+

client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "firebase": "^10.10.0",
     "flowbite-react": "^0.6.0",
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",

client/src/components/Google.jsx

@@ -1,9 +1,12 @@
 import React from "react";
 import { FcGoogle } from "react-icons/fc";
+import { handleGoogleAuth } from "../services/auth";
 
 const GoogleButton = ({ children }) => {
   return (
-    <button className="flex my-4 gap-4 w-5/6 max-w-xs text-lg md:text-xl justify-center items-center  text-black  outline-none border-2 border-lightSlate px-2 md:w-[400px] h-16 rounded-xl">
+    <button className="flex my-4 gap-4 w-5/6 max-w-xs text-lg md:text-xl justify-center items-center  text-black  outline-none border-2 border-lightSlate px-2 md:w-[400px] h-16 rounded-xl"
+    onClick={handleGoogleAuth}
+    >
       <FcGoogle className="" />
       <span>{children}</span>
     </button>

client/src/pages/home/Home.jsx

@@ -35,7 +35,7 @@ const Home = () => {
       getRandom();
     }
   }, [allCategories]);
-
+  console.log(featured);  
   return (
     <div className="overflow-x-hidden w-full">
       <NavBar />

client/src/services/auth.jsx

@@ -1,3 +1,4 @@
+import { authWithGoogle } from "./firebase";
 const URL = import.meta.env.VITE_URL;
 
 const register = async (userData) => {
@@ -33,6 +34,44 @@ const login = async (userData, setLoggedIn, setToken) => {
   }
 };
 
+const handleGoogleAuth = (e) => {
+  e.preventDefault();
+
+  authWithGoogle()
+    .then((user) => {
+      let serverRoute = "google-auth";
+      let formData = {
+        access_token: user.accessToken,
+      };
+      console.log(formData)
+      fetch(`${URL}/user/register/${serverRoute}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      })
+        .then((res) => {
+          if (res.status === 200) {
+            return res.json();
+          } else {
+            return console.log("Google auth failed");
+          }
+        })
+        .then((data) => {
+          console.log(data);
+          localStorage.setItem("token", data.access_token);
+          window.location.href = "/";
+        })
+        .catch((err) => {
+          return console.log(err);
+        });
+    })
+    .catch((err) => {
+      return console.log(err);
+    });
+};
+
 const logout = async () => {
   try {
     localStorage.removeItem("token");
@@ -42,4 +81,4 @@ const logout = async () => {
   }
 };
 
-export { register, login, logout };
+export { register, login, logout, handleGoogleAuth };

client/src/services/firebase.jsx

@@ -0,0 +1,31 @@
+import { initializeApp } from "firebase/app";
+import { GoogleAuthProvider,signInWithPopup,getAuth } from "firebase/auth";
+
+const firebaseConfig = {
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  };
+
+const app = initializeApp(firebaseConfig);
+
+const provider = new GoogleAuthProvider();
+
+const auth = getAuth();
+
+const authWithGoogle = async () => {
+  try {
+    const result = await signInWithPopup(auth, provider);
+    const user = result.user;
+    console.log(user)
+    return user
+  } catch (error) {
+    console.log(error);
+    return err
+  }
+};
+
+export { authWithGoogle };

server/.env.example

@@ -1,4 +1,18 @@
 MONGODB_URI=mongodb://127.0.0.1:27017/blackmarket
 JWT_SECRET=jwt_secret
 CLIENT_ID=github_client_id
-CLIENT_SECRET=github_secret
+CLIENT_SECRET=github_secret
+
+# Firebase environment variables
+
+TYPE=
+PROJECT_ID=
+PRIVATE_KEY_ID=
+PRIVATE_KEY=
+FIREBASE_CLIENT_EMAIL=
+FIREBASE_CLIENT_ID=
+AUTH_URI=
+TOKEN_URI=
+AUTH_PROVIDER_X509_CERT_URL=
+CLIENT_X509_CERT_URL=
+UNIVERSE_DOMAIN=

server/config.js

@@ -21,5 +21,4 @@ if (NODE_ENV === "production") {
 }
 
 console.log(corsUrls);
-
 export { MONGODB_URI, JWT_PRIVATE_KEY, CLIENT_ID, CLIENT_SECRET, corsUrls };

server/firebase-sdk.js

@@ -0,0 +1,13 @@
+export const serviceAccountKey = {
+  type: process.env.TYPE,
+  project_id: process.env.PROJECT_ID,
+  private_key_id: process.env.PRIVATE_KEY_ID,
+  private_key: process.env.PRIVATE_KEY,
+  client_email: process.env.FIREBASE_CLIENT_EMAIL,
+  client_id: process.env.FIREBASE_CLIENT_ID,
+  auth_uri: process.env.AUTH_URI,
+  token_uri: process.env.TOKEN_URI,
+  auth_provider_x509_cert_url: process.env.AUTH_PROVIDER_X509_CERT_URL,
+  client_x509_cert_url: process.env.CLIENT_X509_CERT_URL,
+  universe_domain: process.env.UNIVERSE_DOMAIN,
+};

server/index.js

@@ -4,8 +4,9 @@ import cors from "cors";
 import mongoose from "mongoose";
 import bodyParser from "body-parser";
 import cookieParser from "cookie-parser";
+import admin from "firebase-admin";
+import {serviceAccountKey} from "./firebase-sdk.js";
 import { MONGODB_URI, corsUrls, JWT_PRIVATE_KEY } from "./config.js";
-
 import { userRouter } from "./src/routes/userRoute.js";
 import { productRouter } from "./src/routes/productRoute.js";
 import { cartRouter } from "./src/routes/cartRoute.js";
@@ -19,6 +20,12 @@ const corsOptions = {
   optionSuccessStatus: 200,
 };
 
+// firebase admin
+admin.initializeApp({
+  credential: admin.credential.cert(serviceAccountKey),
+});
+
+
 app.use(cors(corsOptions));
 app.use(express.json());