diff --git a/firebase-google-auth.js b/firebase-google-auth.js new file mode 100644 index 0000000..a588a87 --- /dev/null +++ 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}!
+ 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 new file mode 100644 index 0000000..203121f --- /dev/null +++ b/googleauth.html @@ -0,0 +1,19 @@ + + + + + + Firebase Google Authentication + + + + + + +
+

Firebase Google Authentication

+ +

+
+ + diff --git a/style33.css b/style33.css new file mode 100644 index 0000000..c245868 --- /dev/null +++ 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; + } + \ No newline at end of file