** I'm facing a challenge with integrating Facebook login into my ReactJS website. The Facebook login functionality works seamlessly across all systems and browsers, but I'm encountering an issue specifically with iPhones. When attempting to log in via an iPhone using Safari, the Facebook login popup appears briefly and then closes automatically, resulting in the error: **
import './App.css';
import React, { useState } from 'react';
import { auth, facebook } from "./firebaseConfig"; //importing the file which we created in step 6
import { signInWithPopup, signOut, FacebookAuthProvider } from "firebase/auth";
import { FacebookLoginButton } from "react-social-login-buttons";
import LogViewer from './LogViewer';
function App() {
const [isLogin, setIsLogin] = useState(false); // Manages whether the user is logged in or not
const [user, setUser] = useState(null); // Stores user data when logged in
const InitialState = () => (
<>
<h1>Login using facebook</h1>
<FacebookLoginButton
onClick={() => login(facebook)} // Calls the login function with Facebook provider
/>
</>
);
const LoginTrue = () => (
<>
<h1>Welcome!</h1>
<img src={user.photoURL} alt="" />
<p>
Welcome {user.displayName}! Your account {"user.email"} has been
successfully logged in at {user.metadata.lastSignInTime}
</p>
<FacebookLoginButton onClick={logout} >
<span> Logout </span>
</FacebookLoginButton>
</>
);
//Function to login user
const login = async (provider) => {
try {
//authenticate the user by calling a popup
const provider = new FacebookAuthProvider();
provider.setCustomParameters({ display: 'popup' });
const result = await signInWithPopup(auth, provider);
console.log("REsult ===>", result);
//fetch the user data
setUser(result.user); // Stores user data in the 'user' state
setIsLogin(true); // Sets the 'isLogin' state to true, indicating the user is logged in
} catch (e) {
if (error.code === 'auth/popup-closed-by-user') {
console.log('Popup was closed before completing the sign-in.');
return alert("Popup was closed before completing the sign-in., please try again..")
} else {
console.error(error.message);
}
console.log(`login error ${e}`);
setIsLogin(false); // Sets 'isLogin' to false on login failure
}
}
//Function to logout user
const logout = async () => {
try {
await signOut(auth); // Signs the user out through Firebase
setUser(null);// Resets the 'user' state to null
setIsLogin(false); // Sets 'isLogin' to false to indicate the user is logged out
} catch (e) {
console.log(e);
}
};
return (
<div>
{isLogin ? <LoginTrue /> : <InitialState />}
</div>
)
}
export default App;
** I would greatly appreciate any advice or insights on resolving this issue. If you have encountered a similar problem or have suggestions on how to handle the 'auth/popup-closed-by-user' error on iPhones, please let me know. Thanks in advance for your help! **