0

** 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! **

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.