Add Google Authentication to the Application swaraj-das#340

simmi-verma · Oct 16, 2024 · eb925fb · eb925fb
1 parent b4f2d49
commit eb925fb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/login/.env b/login/.env
@@ -0,0 +1,8 @@
+const firebaseConfig = {
+    apiKey: process.env.FIREBASE_API_KEY,
+    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+    projectId: process.env.FIREBASE_PROJECT_ID,
+    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.FIREBASE_APP_ID,
+};
diff --git a/login/auth.js b/login/auth.js
@@ -0,0 +1,33 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
+
+  import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
+
+  const firebaseConfig = {
+    apiKey: process.env.FIREBASE_API_KEY,
+    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+    projectId: process.env.FIREBASE_PROJECT_ID,
+    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.FIREBASE_APP_ID,
+};
+
+  const app = initializeApp(firebaseConfig);
+  const auth =getAuth(app);
+  auth.languageCode ="en"
+  const provider=new GoogleAuthProvider();
+  console.log("hello");
+  const googleLogin =document.getElementById('google-login-btn');
+  googleLogin.addEventListener('click', function(){
+    signInWithPopup(auth, provider)
+    .then((result) => {
+      const credential = GoogleAuthProvider.credentialFromResult(result);
+      const user = result.user;
+      console.log(user);
+      window.location.href="../index.html";
+
+    }).catch((error) => {
+      const errorCode = error.code;
+      const errorMessage = error.message;
+
+  });
+});
diff --git a/login/login.html b/login/login.html
@@ -9,6 +9,8 @@
     <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
     <link rel="stylesheet" href="login.css">
+    <script src="auth.js" defer type="module"></script>
+
 </head>
 <body>
     <div class="button-container">
@@ -39,7 +41,7 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
             </div>
             <div class="social-login">
                 <p>Or Login With</p>
-                <button type="button" class="social-button google">Login with Google</button>
+                <button id='google-login-btn' class="social-button google">Login with Google</button>
             </div>
         </div>
     </div>