Add files via upload

Nexulen · Dec 22, 2024 · fe1a882 · fe1a882
1 parent ded5726
commit fe1a882
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 0 deletions.
diff --git a/firebase-google-auth.js b/firebase-google-auth.js
@@ -0,0 +1,40 @@
+// Import necessary Firebase modules
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
+import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js";
+
+// Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyB0srpcLeNF8nR6DF_fP7_FsemKY4--4wU",
+  authDomain: "nexulen-f8790.firebaseapp.com",
+  projectId: "nexulen-f8790",
+  storageBucket: "nexulen-f8790.appspot.com", // Fixed incorrect URL
+  messagingSenderId: "718749886008",
+  appId: "1:718749886008:web:df0563c31aaff0c2e628cd"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+// Google Sign-In provider
+const provider = new GoogleAuthProvider();
+
+// Function to handle Google Sign-In
+document.getElementById('googleSignInButton').addEventListener('click', async () => {
+  try {
+    // Sign in with Google using a popup window
+    const result = await signInWithPopup(auth, provider);
+    const user = result.user;
+
+    // Display the user information in the status message
+    document.getElementById('statusMessage').innerHTML = `
+      Welcome, ${user.displayName}!<br>
+      Email: ${user.email}
+    `;
+    document.getElementById('statusMessage').style.color = 'green';
+  } catch (error) {
+    // Handle any error
+    document.getElementById('statusMessage').innerHTML = `Error: ${error.message}`;
+    document.getElementById('statusMessage').style.color = 'red';
+  }
+});
diff --git a/googleauth.html b/googleauth.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Firebase Google Authentication</title>
+  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
+  <script type="module" src="firebase-google-auth.js"></script>
+  <link rel="stylesheet" href="style33.css"> <!-- Link to CSS file -->
+</head>
+<body>
+  <div>
+    <h2>Firebase Google Authentication</h2>
+    <button id="googleSignInButton" class="authButton">Sign In with Google</button>
+    <p id="statusMessage"></p>
+  </div>
+</body>
+</html>
diff --git a/style33.css b/style33.css
@@ -0,0 +1,62 @@
+/* Reset some default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Body styling */
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    text-align: center;
+  }
+
+  /* Container styling */
+  div {
+    background-color: #fff;
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 400px;
+  }
+
+  /* Heading styling */
+  h2 {
+    color: #333;
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+
+  /* Common button styling */
+  .authButton {
+    background-color: #4285F4;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    font-size: 16px;
+    margin-top: 10px; /* Spacing */
+    transition: background-color 0.3s ease;
+  }
+
+  /* Hover effect for buttons */
+  .authButton:hover {
+    background-color: #357ae8;
+  }
+
+  /* Status message */
+  #statusMessage {
+    margin-top: 20px;
+    color: #333;
+    font-size: 16px;
+  }
+