Merge pull request #204 from Ojas-Arora/me

Adding Facebook Authentication
Abidsyed25 · Jul 28, 2024 · c3f7040 · c3f7040
2 parents c2e8d12 + f9b378c
commit c3f7040
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/app/Firebase/firebase.js b/app/Firebase/firebase.js
@@ -1,5 +1,5 @@
 import { initializeApp } from 'firebase/app';
-import { getAuth, GoogleAuthProvider, GithubAuthProvider } from 'firebase/auth';
+import { getAuth, GoogleAuthProvider, GithubAuthProvider, FacebookAuthProvider } from 'firebase/auth';
 
 const firebaseConfig = {
   apiKey: 'YOUR_API_KEY',
@@ -16,7 +16,9 @@ const app = initializeApp(firebaseConfig);
 // Initialize Firebase Authentication and get a reference to the service
 const auth = getAuth(app);
 
-// Initialize GitHub Auth Provider
+// Initialize Auth Providers
+const googleProvider = new GoogleAuthProvider();
 const githubProvider = new GithubAuthProvider();
+const facebookProvider = new FacebookAuthProvider();
 
-export { auth, GoogleAuthProvider, githubProvider };
+export { auth, googleProvider, githubProvider, facebookProvider };
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -6,6 +6,7 @@ import * as z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { getAuth, GoogleAuthProvider, signInWithPopup, GithubAuthProvider } from "firebase/auth";
 import { auth,githubProvider } from "../Firebase/firebase"; // Assuming you have a firebaseConfig file
+import { FacebookAuthProvider } from "firebase/auth";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FaXTwitter } from "react-icons/fa6";
 import { faEye, faEyeSlash, faHouse } from '@fortawesome/free-solid-svg-icons';
@@ -78,6 +79,17 @@ export default function SignInSignUp() {
       console.error("GitHub Sign-In error:", error);
     }
   };
+  const handleFacebookSignIn = async () => {
+    const provider = new FacebookAuthProvider();
+    try {
+      const result = await signInWithPopup(auth, provider);
+      const user = result.user;
+      console.log("Facebook Sign-In successful:", user);
+    } catch (error) {
+      console.error("Facebook Sign-In error:", error);
+    }
+  };
+
   const handleOnClick = (text: string) => {
     if (text !== type) {
       setType(text);
@@ -412,7 +424,7 @@ export default function SignInSignUp() {
           >
             <h1>Create Account</h1>
             <div className="social-container">
-              <a href="#" className="social">
+              <a href="#" className="social" onClick={handleFacebookSignIn}>
                 <i className="fab fa-facebook-f"></i>
               </a>
               <a href="#" className="social" onClick={handleGoogleSignIn}>
@@ -477,7 +489,7 @@ export default function SignInSignUp() {
           >
             <h1>Sign in</h1>
             <div className="social-container">
-              <a href="#" className="social">
+              <a href="#" className="social" onClick={handleFacebookSignIn}>
                 <i className="fab fa-facebook-f"></i>
               </a>
               <a href="#" className="social" onClick={handleGoogleSignIn}>