Merge pull request #562 from Ojas-Arora/dev

Adding LinkedIn Authentication
SUGAM-ARORA · Jul 25, 2024 · fd9006c · fd9006c
2 parents c1fff34 + b6ffd78
commit fd9006c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/src/Components/Firebase/Firebase.js b/src/Components/Firebase/Firebase.js
@@ -8,7 +8,7 @@ import {
   GithubAuthProvider, 
   FacebookAuthProvider, 
   TwitterAuthProvider,
-  OAuthProvider, // Import OAuthProvider for Microsoft
+  OAuthProvider, // Import OAuthProvider for LinkedIn
   signInWithPopup, 
   RecaptchaVerifier, 
   signInWithPhoneNumber 
@@ -29,12 +29,14 @@ const firebaseConfig = {
 const firebaseApp = initializeApp(firebaseConfig);
 const analytics = getAnalytics(firebaseApp);
 const db = getFirestore(firebaseApp);
+const auth = getAuth(firebaseApp);
+
 const googleProvider = new GoogleAuthProvider();
 const githubProvider = new GithubAuthProvider();
 const facebookProvider = new FacebookAuthProvider();
 const twitterProvider = new TwitterAuthProvider();
 const microsoftProvider = new OAuthProvider('microsoft.com'); // Initialize Microsoft provider
-const auth = getAuth(firebaseApp);
+const linkedinProvider = new OAuthProvider('linkedin.com'); // Initialize LinkedIn provider
 
 export { 
   auth, 
@@ -43,10 +45,8 @@ export {
   githubProvider, 
   facebookProvider, 
   twitterProvider, 
-  microsoftProvider, // Export Microsoft provider
-  GithubAuthProvider, 
-  FacebookAuthProvider, 
-  TwitterAuthProvider, 
+  microsoftProvider, 
+  linkedinProvider, 
   RecaptchaVerifier, 
   signInWithPhoneNumber 
 };

diff --git a/src/Components/Login.js b/src/Components/Login.js
@@ -5,7 +5,7 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 import logImg from './Profile/log.svg';
 import registerImg from './Profile/register.svg';
 import homeIcon from './FreeLancer/homeicon.png';
-import { auth, googleProvider, githubProvider, facebookProvider, microsoftProvider } from './Firebase/Firebase.js';
+import { auth, googleProvider, githubProvider, facebookProvider, microsoftProvider, linkedinProvider } from './Firebase/Firebase.js';
 import {
   signInWithPopup,
   signInWithEmailAndPassword,
@@ -86,6 +86,19 @@ const LogIn = () => {
     }
   };
 
+  // New LinkedIn sign-in handler
+  const handleLinkedInSignIn = async () => {
+    try {
+      const result = await signInWithPopup(auth, linkedinProvider);
+      const user = result.user;
+      localStorage.setItem('user', JSON.stringify(user));
+      console.log('LinkedIn sign-in success:', user);
+      navigate('/');
+    } catch (error) {
+      console.error('LinkedIn sign-in error:', error);
+    }
+  };
+
   const handleLogin = async (e) => {
     e.preventDefault();
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
@@ -288,9 +301,9 @@ const LogIn = () => {
               <div onClick={handleGoogleSignIn} className="social-icon">
                 <i className="fab fa-google" style={{ color: 'darkturquoise' }}></i>
               </div>
-              <Link to="https://www.linkedin.com" className="social-icon">
+              <div onClick={handleLinkedInSignIn} className="social-icon">
                 <i className="fab fa-linkedin-in" style={{ color: 'darkturquoise' }}></i>
-              </Link>
+              </div>
               <div onClick={handleGitHubSignIn} className="social-icon">
                 <i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
               </div>
@@ -389,9 +402,9 @@ const LogIn = () => {
               <div onClick={handleGoogleSignIn} className="social-icon">
                 <i className="fab fa-google" style={{ color: 'darkturquoise' }}></i>
               </div>
-              <Link to="https://www.linkedin.com" className="social-icon">
+              <div onClick={handleLinkedInSignIn} className="social-icon">
                 <i className="fab fa-linkedin-in" style={{ color: 'darkturquoise' }}></i>
-              </Link>
+              </div>
               <div onClick={handleGitHubSignIn} className="social-icon">
                 <i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
               </div>