From a8d74fcb25dab466a0d1835c5a3aec7d64db096d Mon Sep 17 00:00:00 2001
From: NOOB-3301 <sepic466@gmail.com>
Date: Tue, 31 Dec 2024 12:05:46 +0530
Subject: [PATCH 1/3] added firebase auth

---
 .vscode/settings.json |   2 +
 index2.html           |  27 +++++
 login.html            | 223 ++++++++++++++++++++++++++++++++++++---
 register.html         | 239 +++++++++++++++++++++++++++++++++++++++---
 4 files changed, 463 insertions(+), 28 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/index2.html b/index2.html
index eaff25e..515d8c1 100644
--- a/index2.html
+++ b/index2.html
@@ -301,6 +301,33 @@ <h3>${job['Job Title']}</h3>
         }
     </script>
     
+    <!-- script for checking if user is logged in or not -->
+     <script type="module" >
+        import { getAuth,  onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+
+        const fbConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+
+        const app = initializeApp(fbConfig)
+        const auth = getAuth(app);
+
+        onAuthStateChanged(auth, (user) => {
+            if (user) {
+                console.log("User is signed in:", user);
+            } else {
+                console.log("No user signed in");
+                window.location.href="/login.html"
+            }
+        });
+     </script>
     
 </body>
 </html>
diff --git a/login.html b/login.html
index 3692fd1..8272f50 100644
--- a/login.html
+++ b/login.html
@@ -234,44 +234,237 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
         <form id="loginForm">
             <div class="input-group">
                 <i class="fas fa-user icon"></i>
-                <input type="text" placeholder="Username" name="username" required>
+                <input type="text" id="email" placeholder="Email" name="email" required>
+                <span id="errorMessage"></span>
             </div>
             <div class="input-group">
                 <i class="fas fa-lock icon"></i>
                 <input type="password" id="password" placeholder="Password" name="password" required>
                 <i class="fas fa-eye toggle-password" id="togglePassword"></i>
+                <span id="errorMessage"></span>
             </div>
             <button type="submit" class="login-btn">Login</button>
             <a href="register.html" class="register-link">Don’t have an account? Register here</a>
         </form>
         <div class="social-media">
-            <a href="https://www.facebook.com" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-            <a href="https://twitter.com" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-            <a href="https://www.google.com" class="social-icon" aria-label="Google"><i class="fab fa-google"></i></a>
-            <a href="https://www.linkedin.com" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
-            <a href="https://github.com" class="social-icon" aria-label="GitHub"><i class="fab fa-github"></i></a>
+            <button class="social-icon" id="google" aria-label="Google" >
+                <i class="fab fa-google"></i>
+            </button>
+            <button class="social-icon" id="github" aria-label="GitHub">
+                <i class="fab fa-github"></i>
+            </button>
+            <button class="social-icon" id="facebook" aria-label="Facebook">
+                <i class="fab fa-facebook-f"></i>
+            </button>
+            <button class="social-icon" aria-label="Twitter">
+                <i class="fab fa-twitter"></i>
+            </button>
+            <button class="social-icon" aria-label="LinkedIn">
+                <i class="fab fa-linkedin-in"></i>
+            </button>
         </div>
     </div>
 
-    <script>
+    <script type="module">
+        import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+    
+        // Initialize Firebase
+        const firebaseConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+    
+        const app = initializeApp(firebaseConfig);
+        const auth = getAuth(app);
+        
+        onAuthStateChanged(auth, (user) => {
+            if (user) {
+                console.log("User is signed in:", user);
+                window.location.href="/index2.html"
+            } else {
+                console.log("No user signed in");
+            }
+        });
+
+
         // Toggle password visibility
-        document.getElementById('togglePassword').addEventListener('click', function() {
+        document.getElementById('togglePassword').addEventListener('click', function () {
             const passwordField = document.getElementById('password');
             const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
             passwordField.setAttribute('type', type);
             this.classList.toggle('fa-eye-slash');
         });
-
+        // const errorElement = document.getElementById("errorElement")
         // Handle form submission
-        document.getElementById('loginForm').addEventListener('submit', function(event) {
+        document.getElementById('loginForm').addEventListener('submit', function (event) {
             event.preventDefault(); // Prevent the default form submission
-            
-            // Add your validation logic here
-            // For demonstration, we'll assume the login is always successful
+    
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            const errorElement = document.getElementById('errorMessage');
+    
+            // Clear previous error message
+            errorElement.textContent = "";
+    
+            if (!email || !password) {
+                errorElement.textContent = "Please fill in all fields.";
+                errorElement.style.color = "red";
+                return;
+            }
+    
+            // Firebase Sign-In Function
+            signInWithEmailAndPassword(auth, email, password)
+                .then((userCredential) => {
+                    // Sign-in successful
+                    const user = userCredential.user;
+                    console.log("User signed in:", user);
+                    // Redirect to another page
+                    window.location.href = 'index2.html';
+                })
+                .catch((error) => {
+                    // Handle Errors
+                    const errorCode = error.code;
+                    const errorMessage = error.message;
+                    console.error(`Error signing in: ${errorCode} - ${errorMessage}`);
+                    errorElement.textContent = errorMessage;
+                    errorElement.style.color = "red";
+                });
+        });
+    </script>
+    
+    <!-- for google and github auth -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+        import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
+        import {GithubAuthProvider} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
+        const fbConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+
 
-            // Redirect to index2.html after successful login
-            window.location.href = 'index2.html';
+        const fauth = getAuth();
+        const provider = new GoogleAuthProvider();
+
+        // Monitor the authentication state
+        onAuthStateChanged(fauth, (user) => {
+            if (user) {
+                console.log("User is signed in:", user);
+                window.location.href="/index2.html"
+            } else {
+                console.log("No user signed in");
+            }
         });
+
+        const googleBtn = document.getElementById("google");
+        //for google 
+        googleBtn.addEventListener("click", () => {
+            signInWithPopup(fauth, provider)
+                .then((result) => {
+                    const credential = GoogleAuthProvider.credentialFromResult(result);
+                    const token = credential.accessToken;
+                    const user = result.user;
+                    console.log("User signed in:", user);
+                })
+                .catch((error) => {
+                    const errorCode = error.code;
+                    const errorMessage = error.message;
+                    const email = error.customData.email;
+                    const credential = GoogleAuthProvider.credentialFromError(error);
+                    console.error("Error signing in:", errorCode, errorMessage);
+                });
+        });
+
+        //for github
+        const githubBtn = document.getElementById("github")
+        githubBtn.addEventListener("click",()=>{
+            signInWithPopup(fauth, new GithubAuthProvider())
+            .then((result) => {
+                    const credential = GoogleAuthProvider.credentialFromResult(result);
+                    const token = credential.accessToken;
+                    const user = result.user;
+                    console.log("User signed in:", user);
+                })
+                .catch((error) => {
+                    const errorCode = error.code;
+                    const errorMessage = error.message;
+                    const email = error.customData.email;
+                    const credential = GoogleAuthProvider.credentialFromError(error);
+                    console.error("Error signing in:", errorCode, errorMessage);
+                });
+        }) 
+    
+        
+    </script>
+
+        <!-- for facebook auth -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+        import {FacebookAuthProvider,getAuth, signInWithPopup, onAuthStateChanged} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
+        const FBConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+
+
+        const FBauth = getAuth();
+
+        // Monitor the authentication state
+        onAuthStateChanged(FBauth, (user) => {
+            if (user) {
+                console.log("User is signed in:", user);
+                window.location.href="/index2.html"
+            } else {
+                console.log("No user signed in");
+            }
+        });
+
+        const FBbutton = document.getElementById("facebook")
+        FBbutton.addEventListener("click",()=>{
+            signInWithPopup(FBauth, new FacebookAuthProvider())
+            .then((result) => {
+                // The signed-in user info.
+                const user = result.user;
+    
+                // This gives you a Facebook Access Token. You can use it to access the Facebook API.
+                const credential = FacebookAuthProvider.credentialFromResult(result);
+                const accessToken = credential.accessToken;
+    
+                // IdP data available using getAdditionalUserInfo(result)
+                // ...
+                window.location.href = "/index2.html1"
+            })
+            .catch((error) => {
+                // Handle Errors here.
+                const errorCode = error.code;
+                const errorMessage = error.message;
+                // The email of the user's account used.
+                const email = error.customData.email;
+                // The AuthCredential type that was used.
+                const credential = FacebookAuthProvider.credentialFromError(error);
+    
+                // ...
+            });
+
+        })
+    
     </script>
+
 </body>
 </html>
diff --git a/register.html b/register.html
index 5568f65..79d06c6 100644
--- a/register.html
+++ b/register.html
@@ -229,30 +229,64 @@ <h2><i class="fas fa-play-circle"></i> Start with Ajivika</h2>
         <form id="registerForm">
             <div class="input-group">
                 <i class="fas fa-user icon"></i>
-                <input type="text" placeholder="Username" id="username" name="username" required>
+                <input type="text" placeholder="Username" id="username" name="username">
+                <span id="errorelem" ></span>
             </div>
             <div class="input-group">
                 <i class="fas fa-envelope icon"></i>
-                <input type="email" placeholder="Email" id="email" name="email" required>
+                <input type="email" placeholder="Email" id="email" name="email" >
+                <span id="errorelemEmail" ></span>
             </div>
             <div class="input-group">
                 <i class="fas fa-lock icon"></i>
-                <input type="password" placeholder="Password" id="password" name="password" required>
+                <input type="password" placeholder="Password" id="password" name="password">
                 <i class="fas fa-eye toggle-password" id="togglePassword"></i>
+                <span id="errorelemPass" ></span>
             </div>
             <button type="submit" class="register-btn">Register</button>
             <a href="login.html" class="login-link">Already have an account? Login here</a>
         </form>
         <div class="social-media">
-            <a href="https://www.facebook.com" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-            <a href="https://twitter.com" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-            <a href="https://www.google.com" class="social-icon" aria-label="Google"><i class="fab fa-google"></i></a>
-            <a href="https://www.linkedin.com" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
-            <a href="https://github.com" class="social-icon" aria-label="GitHub"><i class="fab fa-github"></i></a>
+            <button class="social-icon" id="google" aria-label="Google" >
+                <i class="fab fa-google"></i>
+            </button>
+            <button class="social-icon" id="github" aria-label="GitHub">
+                <i class="fab fa-github"></i>
+            </button>
+            <button class="social-icon" id="facebook" aria-label="Facebook">
+                <i class="fab fa-facebook-f"></i>
+            </button>
+            <button class="social-icon" aria-label="Twitter">
+                <i class="fab fa-twitter"></i>
+            </button>
+            <button class="social-icon" aria-label="LinkedIn">
+                <i class="fab fa-linkedin-in"></i>
+            </button>
         </div>
+
     </div>
 
-    <script>
+    <!-- script for firebase email pass auth -->
+    <script type="module">
+        import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+
+        const firebaseConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+
+        const app = initializeApp(firebaseConfig);
+
+        const auth = getAuth(app);
+    
+        console.log("Firebase initialized");
+    
         // Toggle password visibility
         document.getElementById('togglePassword').addEventListener('click', function() {
             const passwordField = document.getElementById('password');
@@ -261,16 +295,195 @@ <h2><i class="fas fa-play-circle"></i> Start with Ajivika</h2>
             this.classList.toggle('fa-eye-slash');
         });
 
-        // Handle form submission
+
+        //getting the error elems
+        const erreelement = document.getElementById("errorelem");
+        const erreelementEmail = document.getElementById("errorelemEmail")
+        const erreelementPass = document.getElementById("errorelemPass")
+            
+            
         document.getElementById('registerForm').addEventListener('submit', function(event) {
             event.preventDefault(); // Prevent the default form submission
+            
+            const form = event.target;
+            const email = form.email.value; // Get the value of the email field
+            const password = form.password.value; // Get the value of the password field
+            const username = form.username.value; // Get the value of the username field
+            
+            // Clear previous error message
+            erreelement.innerHTML = "";
+            erreelementEmail.innerHTML=""
+            erreelementPass.innerHTML=""
+
+
+    // Validation 
+    if (!email || !password || !username) {
+        erreelement.innerHTML = "<span style='color: red;'>Please fill in all fields.</span>";
+        return;
+    }
 
-            // Add your validation logic here if needed
-            // For demonstration, we'll assume the registration is always successful
+    // Email validation
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    if (!emailPattern.test(email)) {
+        erreelementEmail.innerHTML = "<span style='color: red;'>Please enter a valid email address.</span>";
+        return;
+    }
+    //pass valdation
+    if (password.length < 6) {
+        erreelementPass.innerHTML = "<span style='color: red;'>Password must be at least 6 characters long.</span>";
+        return;
+    }
 
+    console.log(email, password, username);
+
+    // Create a new user with Firebase Authentication
+    createUserWithEmailAndPassword(auth, email, password)
+        .then((userCredential) => {
+            // Successfully signed up
+            const user = userCredential.user;
+            console.log("User created:", user);
             // Redirect to index2.html after successful registration
-            window.location.href = 'index2.html';
+            window.location.href = '/index2.html';
+        })
+        .catch((error) => {
+            // Handle errors from Firebase
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            console.error(`Error: ${errorCode} - ${errorMessage}`);
+
+            // Display error message in the errorelem container
+            erreelement.innerHTML = `<span style='color: red;'>${errorMessage}</span>`;
+        });
+    });
+
+    </script>
+    <!-- script for google and github authentication -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+        import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
+        import {GithubAuthProvider} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
+        const fbConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+
+
+        const fauth = getAuth();
+        const provider = new GoogleAuthProvider();
+
+        // Monitor the authentication state
+        onAuthStateChanged(fauth, (user) => {
+            if (user) {
+                console.log("User is signed in:", user);
+                window.location.href="/index2.html"
+            } else {
+                console.log("No user signed in");
+            }
+        });
+
+        const googleBtn = document.getElementById("google");
+        //for google 
+        googleBtn.addEventListener("click", () => {
+            signInWithPopup(fauth, provider)
+                .then((result) => {
+                    const credential = GoogleAuthProvider.credentialFromResult(result);
+                    const token = credential.accessToken;
+                    const user = result.user;
+                    console.log("User signed in:", user);
+                })
+                .catch((error) => {
+                    const errorCode = error.code;
+                    const errorMessage = error.message;
+                    const email = error.customData.email;
+                    const credential = GoogleAuthProvider.credentialFromError(error);
+                    console.error("Error signing in:", errorCode, errorMessage);
+                });
+        });
+
+        //for github
+        const githubBtn = document.getElementById("github")
+        githubBtn.addEventListener("click",()=>{
+            signInWithPopup(fauth, new GithubAuthProvider())
+            .then((result) => {
+                    const credential = GoogleAuthProvider.credentialFromResult(result);
+                    const token = credential.accessToken;
+                    const user = result.user;
+                    console.log("User signed in:", user);
+                })
+                .catch((error) => {
+                    const errorCode = error.code;
+                    const errorMessage = error.message;
+                    const email = error.customData.email;
+                    const credential = GoogleAuthProvider.credentialFromError(error);
+                    console.error("Error signing in:", errorCode, errorMessage);
+                });
+        }) 
+    
+        
+    </script>
+
+    <!-- for facebook auth -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+        import {FacebookAuthProvider,getAuth, signInWithPopup, onAuthStateChanged} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
+        const FBConfig = {
+            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
+            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
+            projectId: "sdcprofile-8b7e8",
+            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
+            messagingSenderId: "868479552814",
+            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
+            measurementId: "G-0LE04MEMNY"
+        };
+
+
+        const FBauth = getAuth();
+
+        // Monitor the authentication state
+        onAuthStateChanged(FBauth, (user) => {
+            if (user) {
+                console.log("User is signed in:", user);
+                window.location.href="/index2.html"
+            } else {
+                console.log("No user signed in");
+            }
         });
+
+        const FBbutton = document.getElementById("facebook")
+        FBbutton.addEventListener("click",()=>{
+            signInWithPopup(FBauth, new FacebookAuthProvider())
+            .then((result) => {
+                // The signed-in user info.
+                const user = result.user;
+    
+                // This gives you a Facebook Access Token. You can use it to access the Facebook API.
+                const credential = FacebookAuthProvider.credentialFromResult(result);
+                const accessToken = credential.accessToken;
+    
+                // IdP data available using getAdditionalUserInfo(result)
+                // ...
+                window.location.href = "/index2.html1"
+            })
+            .catch((error) => {
+                // Handle Errors here.
+                const errorCode = error.code;
+                const errorMessage = error.message;
+                // The email of the user's account used.
+                const email = error.customData.email;
+                // The AuthCredential type that was used.
+                const credential = FacebookAuthProvider.credentialFromError(error);
+    
+                // ...
+            });
+
+        })
+  
     </script>
+    
 </body>
 </html>

From 366236c724c1b08236ce44d6463745e69459e3d4 Mon Sep 17 00:00:00 2001
From: NOOB-3301 <sepic466@gmail.com>
Date: Tue, 31 Dec 2024 14:30:04 +0530
Subject: [PATCH 2/3] supabse auth

---
 index2.html   |  51 +++++++++--------
 login.html    |  83 ++++++++++++++-------------
 register.html | 153 +++++++++++++++++++++++++-------------------------
 3 files changed, 145 insertions(+), 142 deletions(-)

diff --git a/index2.html b/index2.html
index 515d8c1..cb750ad 100644
--- a/index2.html
+++ b/index2.html
@@ -302,32 +302,35 @@ <h3>${job['Job Title']}</h3>
     </script>
     
     <!-- script for checking if user is logged in or not -->
-     <script type="module" >
-        import { getAuth,  onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-
-        const fbConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
-
-        const app = initializeApp(fbConfig)
-        const auth = getAuth(app);
-
-        onAuthStateChanged(auth, (user) => {
-            if (user) {
-                console.log("User is signed in:", user);
+    <script type="module">
+        import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
+    
+        // Supabase configuration
+        const supabaseUrl = "https://bcacdgnguwazukrwggtn.supabase.co"; // Replace with your Supabase URL
+        const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJjYWNkZ25ndXdhenVrcndnZ3RuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU2MzQxNzQsImV4cCI6MjA1MTIxMDE3NH0.IrKTh109PlnSYqpLU6z8m5RH-YnU9XuAuzFe1od8f-E"; // Replace with your Supabase anon key
+        const supabase = createClient(supabaseUrl, supabaseKey);
+    
+        // Check authentication state
+        async function checkAuthState() {
+            const { data: { session }, error } = await supabase.auth.getSession();
+    
+            if (error) {
+                console.error("Error fetching session:", error);
+                return;
+            }
+    
+            if (session && session.user) {
+                console.log("User is signed in:", session.user);
             } else {
-                console.log("No user signed in");
-                window.location.href="/login.html"
+                console.log("No user signed in. Redirecting to login page...");
+                window.location.href = "/login.html"; // Redirect to login page
             }
-        });
-     </script>
+        }
+    
+        // Run the auth state check on page load
+        checkAuthState();
+    </script>
+    
     
 </body>
 </html>
diff --git a/login.html b/login.html
index 8272f50..53308e0 100644
--- a/login.html
+++ b/login.html
@@ -265,34 +265,30 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
         </div>
     </div>
 
+
+    <!-- added supabase auth -->
     <script type="module">
-        import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+        import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
     
-        // Initialize Firebase
-        const firebaseConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
+        // Supabase configuration
+        const supabaseUrl = "https://bcacdgnguwazukrwggtn.supabase.co"; // Replace with your Supabase URL
+        const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJjYWNkZ25ndXdhenVrcndnZ3RuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU2MzQxNzQsImV4cCI6MjA1MTIxMDE3NH0.IrKTh109PlnSYqpLU6z8m5RH-YnU9XuAuzFe1od8f-E"; // Replace with your Supabase anon key
+        const supabase = createClient(supabaseUrl, supabaseKey);
     
-        const app = initializeApp(firebaseConfig);
-        const auth = getAuth(app);
-        
-        onAuthStateChanged(auth, (user) => {
-            if (user) {
+        console.log("Supabase initialized");
+    
+        // Check if a user is already logged in
+        supabase.auth.getUser().then(({ data: { user }, error }) => {
+            if (error) {
+                console.error("Error fetching user:", error);
+            } else if (user) {
                 console.log("User is signed in:", user);
-                window.location.href="/index2.html"
+                window.location.href = "/index2.html";
             } else {
                 console.log("No user signed in");
             }
         });
-
-
+    
         // Toggle password visibility
         document.getElementById('togglePassword').addEventListener('click', function () {
             const passwordField = document.getElementById('password');
@@ -300,9 +296,9 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
             passwordField.setAttribute('type', type);
             this.classList.toggle('fa-eye-slash');
         });
-        // const errorElement = document.getElementById("errorElement")
+    
         // Handle form submission
-        document.getElementById('loginForm').addEventListener('submit', function (event) {
+        document.getElementById('loginForm').addEventListener('submit', async function (event) {
             event.preventDefault(); // Prevent the default form submission
     
             const email = document.getElementById('email').value;
@@ -318,28 +314,31 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
                 return;
             }
     
-            // Firebase Sign-In Function
-            signInWithEmailAndPassword(auth, email, password)
-                .then((userCredential) => {
-                    // Sign-in successful
-                    const user = userCredential.user;
-                    console.log("User signed in:", user);
-                    // Redirect to another page
-                    window.location.href = 'index2.html';
-                })
-                .catch((error) => {
-                    // Handle Errors
-                    const errorCode = error.code;
-                    const errorMessage = error.message;
-                    console.error(`Error signing in: ${errorCode} - ${errorMessage}`);
-                    errorElement.textContent = errorMessage;
-                    errorElement.style.color = "red";
+            try {
+                // Supabase Sign-In Function
+                const { data, error } = await supabase.auth.signInWithPassword({
+                    email,
+                    password,
                 });
+    
+                if (error) {
+                    throw error;
+                }
+    
+                console.log("User signed in:", data.user);
+                // Redirect to another page
+                window.location.href = 'index2.html';
+            } catch (error) {
+                console.error("Error signing in:", error.message);
+                errorElement.textContent = error.message;
+                errorElement.style.color = "red";
+            }
         });
     </script>
     
+    <!-- for now only google authentication works. have to add app id , url in github and facebook to make it work . so total 3auth works google,github,facebook -->
     <!-- for google and github auth -->
-    <script type="module">
+    <!-- <script type="module">
         import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
         import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
         import {GithubAuthProvider} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
@@ -406,10 +405,10 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
         }) 
     
         
-    </script>
+    </script> -->
 
         <!-- for facebook auth -->
-    <script type="module">
+    <!-- <script type="module">
         import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
         import {FacebookAuthProvider,getAuth, signInWithPopup, onAuthStateChanged} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
         const FBConfig = {
@@ -464,7 +463,7 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
 
         })
     
-    </script>
+    </script> -->
 
 </body>
 </html>
diff --git a/register.html b/register.html
index 79d06c6..0272c5b 100644
--- a/register.html
+++ b/register.html
@@ -266,99 +266,100 @@ <h2><i class="fas fa-play-circle"></i> Start with Ajivika</h2>
 
     </div>
 
-    <!-- script for firebase email pass auth -->
+    <!-- script for supabase email pass auth -->
     <script type="module">
-        import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-
-        const firebaseConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
-
-        const app = initializeApp(firebaseConfig);
-
-        const auth = getAuth(app);
+        import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
+    
+        // Supabase configuration
+        const supabaseUrl = "https://bcacdgnguwazukrwggtn.supabase.co"; // Replace with your Supabase URL
+        const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJjYWNkZ25ndXdhenVrcndnZ3RuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU2MzQxNzQsImV4cCI6MjA1MTIxMDE3NH0.IrKTh109PlnSYqpLU6z8m5RH-YnU9XuAuzFe1od8f-E"; // Replace with your Supabase anon key
+        const supabase = createClient(supabaseUrl, supabaseKey);
     
-        console.log("Firebase initialized");
+        console.log("Supabase initialized");
     
         // Toggle password visibility
-        document.getElementById('togglePassword').addEventListener('click', function() {
+        document.getElementById('togglePassword').addEventListener('click', function () {
             const passwordField = document.getElementById('password');
             const type = passwordField.type === 'password' ? 'text' : 'password';
             passwordField.type = type;
             this.classList.toggle('fa-eye-slash');
         });
-
-
-        //getting the error elems
+    
+        // Getting the error elements
         const erreelement = document.getElementById("errorelem");
-        const erreelementEmail = document.getElementById("errorelemEmail")
-        const erreelementPass = document.getElementById("errorelemPass")
-            
-            
-        document.getElementById('registerForm').addEventListener('submit', function(event) {
+        const erreelementEmail = document.getElementById("errorelemEmail");
+        const erreelementPass = document.getElementById("errorelemPass");
+    
+        document.getElementById('registerForm').addEventListener('submit', async function (event) {
             event.preventDefault(); // Prevent the default form submission
-            
+    
             const form = event.target;
             const email = form.email.value; // Get the value of the email field
             const password = form.password.value; // Get the value of the password field
             const username = form.username.value; // Get the value of the username field
-            
+    
             // Clear previous error message
             erreelement.innerHTML = "";
-            erreelementEmail.innerHTML=""
-            erreelementPass.innerHTML=""
-
-
-    // Validation 
-    if (!email || !password || !username) {
-        erreelement.innerHTML = "<span style='color: red;'>Please fill in all fields.</span>";
-        return;
-    }
-
-    // Email validation
-    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
-    if (!emailPattern.test(email)) {
-        erreelementEmail.innerHTML = "<span style='color: red;'>Please enter a valid email address.</span>";
-        return;
-    }
-    //pass valdation
-    if (password.length < 6) {
-        erreelementPass.innerHTML = "<span style='color: red;'>Password must be at least 6 characters long.</span>";
-        return;
-    }
-
-    console.log(email, password, username);
-
-    // Create a new user with Firebase Authentication
-    createUserWithEmailAndPassword(auth, email, password)
-        .then((userCredential) => {
-            // Successfully signed up
-            const user = userCredential.user;
-            console.log("User created:", user);
-            // Redirect to index2.html after successful registration
-            window.location.href = '/index2.html';
-        })
-        .catch((error) => {
-            // Handle errors from Firebase
-            const errorCode = error.code;
-            const errorMessage = error.message;
-            console.error(`Error: ${errorCode} - ${errorMessage}`);
-
-            // Display error message in the errorelem container
-            erreelement.innerHTML = `<span style='color: red;'>${errorMessage}</span>`;
+            erreelementEmail.innerHTML = "";
+            erreelementPass.innerHTML = "";
+    
+            // Validation
+            if (!email || !password || !username) {
+                erreelement.innerHTML = "<span style='color: red;'>Please fill in all fields.</span>";
+                return;
+            }
+    
+            // Email validation
+            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+            if (!emailPattern.test(email)) {
+                erreelementEmail.innerHTML = "<span style='color: red;'>Please enter a valid email address.</span>";
+                return;
+            }
+    
+            // Password validation
+            if (password.length < 6) {
+                erreelementPass.innerHTML = "<span style='color: red;'>Password must be at least 6 characters long.</span>";
+                return;
+            }
+    
+            console.log(email, password, username);
+    
+            // Create a new user with Supabase Authentication
+            try {
+                const { data, error } = await supabase.auth.signUp({
+                    email,
+                    password,
+                    options: {
+                        data: { username }, // Custom user metadata
+                    },
+                });
+    
+                if (error) {
+                    throw error;
+                }
+    
+                console.log("User created:", data);
+    
+                // Check if the user needs to confirm their email
+                if (data.user && !data.session) {
+                    // If email confirmation is required
+                    erreelement.innerHTML = "<span style='color: green;'>Registration successful! Please check your email to confirm your account.</span>";
+                } else if (data.session) {
+                    // If the user is already signed in
+                    console.log("User session created:", data.session);
+                    window.location.href = '/index2.html'; // Redirect to the main page
+                }
+            } catch (error) {
+                console.error("Error:", error.message);
+                // Display error message in the errorelem container
+                erreelement.innerHTML = `<span style='color: red;'>${error.message}</span>`;
+            }
         });
-    });
-
     </script>
+    
+    
     <!-- script for google and github authentication -->
-    <script type="module">
+    <!-- <script type="module">
         import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
         import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
         import {GithubAuthProvider} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
@@ -425,10 +426,10 @@ <h2><i class="fas fa-play-circle"></i> Start with Ajivika</h2>
         }) 
     
         
-    </script>
+    </script> -->
 
     <!-- for facebook auth -->
-    <script type="module">
+    <!-- <script type="module">
         import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
         import {FacebookAuthProvider,getAuth, signInWithPopup, onAuthStateChanged} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
         const FBConfig = {
@@ -483,7 +484,7 @@ <h2><i class="fas fa-play-circle"></i> Start with Ajivika</h2>
 
         })
   
-    </script>
+    </script> -->
     
 </body>
 </html>

From 05012a74967cd0e836f17be1ca6162fcf543b328 Mon Sep 17 00:00:00 2001
From: NOOB-3301 <sepic466@gmail.com>
Date: Tue, 31 Dec 2024 16:29:39 +0530
Subject: [PATCH 3/3] added supabase google,github

---
 login.html    | 187 ++++++++++++++++++++------------------------------
 register.html | 184 ++++++++++++++++++++-----------------------------
 2 files changed, 148 insertions(+), 223 deletions(-)

diff --git a/login.html b/login.html
index 53308e0..0ab4c77 100644
--- a/login.html
+++ b/login.html
@@ -338,132 +338,95 @@ <h2><i class="fas fa-lock"></i> Ajivika Access</h2>
     
     <!-- for now only google authentication works. have to add app id , url in github and facebook to make it work . so total 3auth works google,github,facebook -->
     <!-- for google and github auth -->
-    <!-- <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-        import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
-        import {GithubAuthProvider} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
-        const fbConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
-
-
-        const fauth = getAuth();
-        const provider = new GoogleAuthProvider();
-
+    <script type="module">
+        import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
+    
+        // Supabase configuration
+        const supabaseUrl2 = "https://bcacdgnguwazukrwggtn.supabase.co"; // Replace with your Supabase URL
+        const supabaseKey2 = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJjYWNkZ25ndXdhenVrcndnZ3RuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU2MzQxNzQsImV4cCI6MjA1MTIxMDE3NH0.IrKTh109PlnSYqpLU6z8m5RH-YnU9XuAuzFe1od8f-E"; // Replace with your Supabase anon key
+    
+        const supabase2 = createClient(supabaseUrl2, supabaseKey2);
+    
         // Monitor the authentication state
-        onAuthStateChanged(fauth, (user) => {
-            if (user) {
-                console.log("User is signed in:", user);
-                window.location.href="/index2.html"
+        supabase2.auth.onAuthStateChange((event, session) => {
+            if (session) {
+                console.log("User is signed in:", session.user);
+                window.location.href = "/index2.html";
             } else {
                 console.log("No user signed in");
             }
         });
-
+    
+        // For Google sign-in
         const googleBtn = document.getElementById("google");
-        //for google 
-        googleBtn.addEventListener("click", () => {
-            signInWithPopup(fauth, provider)
-                .then((result) => {
-                    const credential = GoogleAuthProvider.credentialFromResult(result);
-                    const token = credential.accessToken;
-                    const user = result.user;
-                    console.log("User signed in:", user);
-                })
-                .catch((error) => {
-                    const errorCode = error.code;
-                    const errorMessage = error.message;
-                    const email = error.customData.email;
-                    const credential = GoogleAuthProvider.credentialFromError(error);
-                    console.error("Error signing in:", errorCode, errorMessage);
+        googleBtn.addEventListener("click", async () => {
+            try {
+                const { data, error } = await supabase2.auth.signInWithOAuth({
+                    provider: "google",
                 });
+                if (error) throw error;
+                console.log("User signed in with Google:", data);
+            } catch (error) {
+                console.error("Error signing in with Google:", error.message);
+            }
         });
-
-        //for github
-        const githubBtn = document.getElementById("github")
-        githubBtn.addEventListener("click",()=>{
-            signInWithPopup(fauth, new GithubAuthProvider())
-            .then((result) => {
-                    const credential = GoogleAuthProvider.credentialFromResult(result);
-                    const token = credential.accessToken;
-                    const user = result.user;
-                    console.log("User signed in:", user);
-                })
-                .catch((error) => {
-                    const errorCode = error.code;
-                    const errorMessage = error.message;
-                    const email = error.customData.email;
-                    const credential = GoogleAuthProvider.credentialFromError(error);
-                    console.error("Error signing in:", errorCode, errorMessage);
+    
+        // For GitHub sign-in
+        const githubBtn = document.getElementById("github");
+        githubBtn.addEventListener("click", async () => {
+            try {
+                const { data, error } = await supabase2.auth.signInWithOAuth({
+                    provider: "github",
                 });
-        }) 
+                if (error) throw error;
+                console.log("User signed in with GitHub:", data);
+            } catch (error) {
+                console.error("Error signing in with GitHub:", error.message);
+            }
+        });
+    </script>
     
-        
-    </script> -->
 
         <!-- for facebook auth -->
-    <!-- <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-        import {FacebookAuthProvider,getAuth, signInWithPopup, onAuthStateChanged} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
-        const FBConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
-
-
-        const FBauth = getAuth();
-
-        // Monitor the authentication state
-        onAuthStateChanged(FBauth, (user) => {
-            if (user) {
-                console.log("User is signed in:", user);
-                window.location.href="/index2.html"
+        <script type="module">
+            import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
+        
+            // Supabase configuration
+            const supabaseUrl3 = "https://your-supabase-instance.supabase.co"; // Replace with your Supabase project URL
+            const supabaseKey3 = "your-supabase-anon-key"; // Replace with your Supabase anon key
+            const supabase3 = createClient(supabaseUrl3, supabaseKey3);
+        
+            console.log("Supabase initialized");
+        
+            // Facebook button event listener
+            const FBbutton = document.getElementById("facebook");
+        
+            FBbutton.addEventListener("click", async () => {
+                try {
+                    const { data, error } = await supabase3.auth.signInWithOAuth({
+                        provider: "facebook", // Specify the provider
+                        options: {
+                            redirectTo: "https://your-domain.com/index2.html" // Replace with your redirect URI
+                        }
+                    });
+        
+                    if (error) throw error;
+        
+                    console.log("Redirecting to Facebook sign-in page:", data);
+                } catch (error) {
+                    console.error("Facebook sign-in error:", error.message);
+                }
+            });
+        
+            // Check authentication state
+            const session = await supabase3.auth.getSession();
+            if (session.data.session) {
+                console.log("User is signed in:", session.data.session.user);
+                window.location.href = "/index2.html";
             } else {
                 console.log("No user signed in");
             }
-        });
-
-        const FBbutton = document.getElementById("facebook")
-        FBbutton.addEventListener("click",()=>{
-            signInWithPopup(FBauth, new FacebookAuthProvider())
-            .then((result) => {
-                // The signed-in user info.
-                const user = result.user;
-    
-                // This gives you a Facebook Access Token. You can use it to access the Facebook API.
-                const credential = FacebookAuthProvider.credentialFromResult(result);
-                const accessToken = credential.accessToken;
-    
-                // IdP data available using getAdditionalUserInfo(result)
-                // ...
-                window.location.href = "/index2.html1"
-            })
-            .catch((error) => {
-                // Handle Errors here.
-                const errorCode = error.code;
-                const errorMessage = error.message;
-                // The email of the user's account used.
-                const email = error.customData.email;
-                // The AuthCredential type that was used.
-                const credential = FacebookAuthProvider.credentialFromError(error);
-    
-                // ...
-            });
-
-        })
-    
-    </script> -->
-
+        </script>
+        
 </body>
 </html>
diff --git a/register.html b/register.html
index 0272c5b..761b641 100644
--- a/register.html
+++ b/register.html
@@ -359,132 +359,94 @@ <h2><i class="fas fa-play-circle"></i> Start with Ajivika</h2>
     
     
     <!-- script for google and github authentication -->
-    <!-- <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-        import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
-        import {GithubAuthProvider} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
-        const fbConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
-
-
-        const fauth = getAuth();
-        const provider = new GoogleAuthProvider();
-
+    <script type="module">
+        import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
+    
+        // Supabase configuration
+        const supabaseUrl2 = "https://bcacdgnguwazukrwggtn.supabase.co"; // Replace with your Supabase URL
+        const supabaseKey2 = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJjYWNkZ25ndXdhenVrcndnZ3RuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU2MzQxNzQsImV4cCI6MjA1MTIxMDE3NH0.IrKTh109PlnSYqpLU6z8m5RH-YnU9XuAuzFe1od8f-E"; // Replace with your Supabase anon key
+    
+        const supabase2 = createClient(supabaseUrl2, supabaseKey2);
+    
         // Monitor the authentication state
-        onAuthStateChanged(fauth, (user) => {
-            if (user) {
-                console.log("User is signed in:", user);
-                window.location.href="/index2.html"
+        supabase2.auth.onAuthStateChange((event, session) => {
+            if (session) {
+                console.log("User is signed in:", session.user);
+                window.location.href = "/index2.html";
             } else {
                 console.log("No user signed in");
             }
         });
-
+    
+        // For Google sign-in
         const googleBtn = document.getElementById("google");
-        //for google 
-        googleBtn.addEventListener("click", () => {
-            signInWithPopup(fauth, provider)
-                .then((result) => {
-                    const credential = GoogleAuthProvider.credentialFromResult(result);
-                    const token = credential.accessToken;
-                    const user = result.user;
-                    console.log("User signed in:", user);
-                })
-                .catch((error) => {
-                    const errorCode = error.code;
-                    const errorMessage = error.message;
-                    const email = error.customData.email;
-                    const credential = GoogleAuthProvider.credentialFromError(error);
-                    console.error("Error signing in:", errorCode, errorMessage);
+        googleBtn.addEventListener("click", async () => {
+            try {
+                const { data, error } = await supabase2.auth.signInWithOAuth({
+                    provider: "google",
                 });
+                if (error) throw error;
+                console.log("User signed in with Google:", data);
+            } catch (error) {
+                console.error("Error signing in with Google:", error.message);
+            }
         });
-
-        //for github
-        const githubBtn = document.getElementById("github")
-        githubBtn.addEventListener("click",()=>{
-            signInWithPopup(fauth, new GithubAuthProvider())
-            .then((result) => {
-                    const credential = GoogleAuthProvider.credentialFromResult(result);
-                    const token = credential.accessToken;
-                    const user = result.user;
-                    console.log("User signed in:", user);
-                })
-                .catch((error) => {
-                    const errorCode = error.code;
-                    const errorMessage = error.message;
-                    const email = error.customData.email;
-                    const credential = GoogleAuthProvider.credentialFromError(error);
-                    console.error("Error signing in:", errorCode, errorMessage);
-                });
-        }) 
     
-        
-    </script> -->
-
-    <!-- for facebook auth -->
-    <!-- <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-        import {FacebookAuthProvider,getAuth, signInWithPopup, onAuthStateChanged} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
-        const FBConfig = {
-            apiKey: "AIzaSyAfc1HOijgOlE7qRv8G3xcJ56OLM8EFk5M",
-            authDomain: "sdcprofile-8b7e8.firebaseapp.com",
-            projectId: "sdcprofile-8b7e8",
-            storageBucket: "sdcprofile-8b7e8.firebasestorage.app",
-            messagingSenderId: "868479552814",
-            appId: "1:868479552814:web:e5ab7e4b09c0c3aaba7ebf",
-            measurementId: "G-0LE04MEMNY"
-        };
-
-
-        const FBauth = getAuth();
-
-        // Monitor the authentication state
-        onAuthStateChanged(FBauth, (user) => {
-            if (user) {
-                console.log("User is signed in:", user);
-                window.location.href="/index2.html"
-            } else {
-                console.log("No user signed in");
+        // For GitHub sign-in
+        const githubBtn = document.getElementById("github");
+        githubBtn.addEventListener("click", async () => {
+            try {
+                const { data, error } = await supabase2.auth.signInWithOAuth({
+                    provider: "github",
+                });
+                if (error) throw error;
+                console.log("User signed in with GitHub:", data);
+            } catch (error) {
+                console.error("Error signing in with GitHub:", error.message);
             }
         });
+    </script>
 
-        const FBbutton = document.getElementById("facebook")
-        FBbutton.addEventListener("click",()=>{
-            signInWithPopup(FBauth, new FacebookAuthProvider())
-            .then((result) => {
-                // The signed-in user info.
-                const user = result.user;
+    <!-- for facebook auth have to add client id-->
+    <script type="module">
+        import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
     
-                // This gives you a Facebook Access Token. You can use it to access the Facebook API.
-                const credential = FacebookAuthProvider.credentialFromResult(result);
-                const accessToken = credential.accessToken;
+        // Supabase configuration
+        const supabaseUrl3 = "https://your-supabase-instance.supabase.co"; // Replace with your Supabase project URL
+        const supabaseKey3 = "your-supabase-anon-key"; // Replace with your Supabase anon key
+        const supabase3 = createClient(supabaseUrl3, supabaseKey3);
     
-                // IdP data available using getAdditionalUserInfo(result)
-                // ...
-                window.location.href = "/index2.html1"
-            })
-            .catch((error) => {
-                // Handle Errors here.
-                const errorCode = error.code;
-                const errorMessage = error.message;
-                // The email of the user's account used.
-                const email = error.customData.email;
-                // The AuthCredential type that was used.
-                const credential = FacebookAuthProvider.credentialFromError(error);
+        console.log("Supabase initialized");
     
-                // ...
-            });
-
-        })
-  
-    </script> -->
+        // Facebook button event listener
+        const FBbutton = document.getElementById("facebook");
+    
+        FBbutton.addEventListener("click", async () => {
+            try {
+                const { data, error } = await supabase3.auth.signInWithOAuth({
+                    provider: "facebook", // Specify the provider
+                    options: {
+                        redirectTo: "https://your-domain.com/index2.html" // Replace with your redirect URI
+                    }
+                });
+    
+                if (error) throw error;
+    
+                console.log("Redirecting to Facebook sign-in page:", data);
+            } catch (error) {
+                console.error("Facebook sign-in error:", error.message);
+            }
+        });
+    
+        // Check authentication state
+        const session = await supabase3.auth.getSession();
+        if (session.data.session) {
+            console.log("User is signed in:", session.data.session.user);
+            window.location.href = "/index2.html";
+        } else {
+            console.log("No user signed in");
+        }
+    </script>
     
 </body>
 </html>