Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Twitter Authentication #559

Merged
merged 2 commits into from
Jul 25, 2024
Merged

Adding Twitter Authentication #559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f98b9e
Adding Twitter Authentication
Ojas-Arora Jul 25, 2024
ebbfecb
Twitter Authentication
Ojas-Arora Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions src/Components/Firebase/Firebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider, GithubAuthProvider, FacebookAuthProvider, signInWithPopup, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import {
getAuth,
GoogleAuthProvider,
GithubAuthProvider,
FacebookAuthProvider,
TwitterAuthProvider, // Import TwitterAuthProvider
signInWithPopup,
RecaptchaVerifier,
signInWithPhoneNumber
} from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
Expand All @@ -22,8 +31,22 @@ const db = getFirestore(firebaseApp);
const googleProvider = new GoogleAuthProvider();
const githubProvider = new GithubAuthProvider();
const facebookProvider = new FacebookAuthProvider();
const twitterProvider = new TwitterAuthProvider(); // Initialize TwitterAuthProvider
const auth = getAuth(firebaseApp);

export { auth, signInWithPopup, githubProvider, googleProvider, facebookProvider, GithubAuthProvider, FacebookAuthProvider, RecaptchaVerifier, signInWithPhoneNumber };
export {
auth,
signInWithPopup,
githubProvider,
googleProvider,
facebookProvider,
twitterProvider, // Export twitterProvider
GithubAuthProvider,
FacebookAuthProvider,
TwitterAuthProvider, // Export TwitterAuthProvider
RecaptchaVerifier,
signInWithPhoneNumber
};

export { db, analytics, firebaseApp as app };
export default firebaseApp;
25 changes: 19 additions & 6 deletions src/Components/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
createUserWithEmailAndPassword,
RecaptchaVerifier,
signInWithPhoneNumber,
TwitterAuthProvider
} from 'firebase/auth';

const LogIn = () => {
Expand Down Expand Up @@ -60,6 +61,18 @@ const LogIn = () => {
console.error('Facebook sign-in error:', error);
}
};
const handleTwitterSignIn = async () => {
try {
const twitterProvider = new TwitterAuthProvider();
const result = await signInWithPopup(auth, twitterProvider);
const user = result.user;
localStorage.setItem('user', JSON.stringify(user));
console.log('Twitter sign-in success:', user);
navigate('/');
} catch (error) {
console.error('Twitter sign-in error:', error);
}
};

const handleLogin = async (e) => {
e.preventDefault();
Expand Down Expand Up @@ -257,9 +270,9 @@ const LogIn = () => {
<div onClick={handleFacebookSignIn} className="social-icon">
<i className="fab fa-facebook-f" style={{ color: 'darkturquoise' }}></i>
</div>
<Link to="https://www.twitter.com" className="social-icon">
<i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
</Link>
<div onClick={handleTwitterSignIn} className="social-icon">
<i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
</div>
<div onClick={handleGoogleSignIn} className="social-icon">
<i className="fab fa-google" style={{ color: 'darkturquoise' }}></i>
</div>
Expand Down Expand Up @@ -355,9 +368,9 @@ const LogIn = () => {
<div onClick={handleFacebookSignIn} className="social-icon">
<i className="fab fa-facebook-f" style={{ color: 'darkturquoise' }}></i>
</div>
<Link to="https://www.twitter.com" className="social-icon">
<i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
</Link>
<div onClick={handleTwitterSignIn} className="social-icon">
<i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
</div>
<div onClick={handleGoogleSignIn} className="social-icon">
<i className="fab fa-google" style={{ color: 'darkturquoise' }}></i>
</div>
Expand Down