I have a react app with 2 components and a state that monitors whether or not the user has logged in or not. When the user has logged in successfully, the value of the state will change from "NotLoggedin" to the user's email, which will then display the user's information component and hide the "Login/Signin" component. When a user has successfully created their account, instead of being logged in automatically, they will have to manually log in. To achieve this, I try using the signOut() method right after the createUserWithEmailAndPassword. And while I successfully sign the user out, there is a brief moment where the user's information component is displayed before being replaced by the "signIn" component, which I don't want. Is there anyway we can avoid that brief transition? Thank you very much.
import MyAccountTitle from "./MyAccountTitle";
import classes from "./Style/MyAccount.component.module.css"
import Signin from "./SignIn"
import MyAccountDetailAccordion from "./MyAccountDetail.component";
import {useState, useEffect, useRef} from 'react'
import { auth } from "../../api/firebase.util";
import { createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, updateProfile} from "firebase/auth";
import { async } from "@firebase/util";
function MyAccount(props){
const [LoginorRegister, SetState] = useState("Login")
const [myAccountSelection, ChooseMenu] = useState("Personal Info")
const [accountState, setAccountState] = useState("NotLoggedin")
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [username, setUserName] = useState('')
useEffect(()=>{
auth.onAuthStateChanged(currentUser=>{
if (currentUser){
setAccountState(currentUser.email)
}
else{
setAccountState("NotLoggedin")
}
})
}, [])
const receivingEmailInput = (event)=>{
setEmail(event.target.value)
}
const receivingPasswordInput = (event)=>{
setPassword(event.target.value)
}
const receivingUserName = (event) =>{
setUserName(event.target.value)
}
const creatingNewUser = async ()=>{
await createUserWithEmailAndPassword(auth, email, password)
await updateProfile(auth.currentUser, {
displayName: username
})
await signOut(auth)
}
const signUserIn = async ()=>{
const user = await signInWithEmailAndPassword(auth, email, password)
}
const signUserOut = async (event)=>{
event.preventDefault()
await signOut(auth)
}
const onSelectingLogin = ()=>[
SetState("Login")
]
const onSelectingRegister = ()=>{
SetState("Register")
}
const onSelectingPersonalInfo = ()=>{
ChooseMenu("Personal Info")
}
const onSelectingAddressList = ()=>{
ChooseMenu("Address List")
}
const onSelectingPastOrders = ()=>{
ChooseMenu("Past Orders")
}
const selectionMenuNotLoggedIn = [{text: "Login", function: onSelectingLogin}, {text: "Register", function: onSelectingRegister}]
const selectionMenuLoggedIn = [{text: "Personal Info", function: onSelectingPersonalInfo}, {text: "Past Orders", function: onSelectingPastOrders}, {text: "Address List", function: onSelectingAddressList}, {text: "Sign Out", function: signUserOut}]
return (
<main className={classes.main} >
<MyAccountTitle userName = {auth.currentUser?.displayName} signOut={signUserOut} chosenMenu = {accountState != "NotLoggedin" ? myAccountSelection : null} accountState = {accountState} menu={accountState === "NotLoggedin" ? selectionMenuNotLoggedIn : selectionMenuLoggedIn}/>
{accountState === "NotLoggedin" ? <Signin receivingUserName={receivingUserName} receivingEmailInput={receivingEmailInput} receivingPasswordInput={receivingPasswordInput} creatingNewUser={creatingNewUser} signUserIn={signUserIn} currentState={LoginorRegister} /> : <MyAccountDetailAccordion userName = {auth.currentUser.displayName} currentState ={myAccountSelection}/> }
</main>
);
}
export default MyAccount
