If I get currently authenticated user through auth.currentUser, is this an asynchronous cal and be handled as such?
Namely, I have this top-level App component in react with firebase on the backend.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MainNav from './layouts/Navbar.js';
import Homepage from './pages/Homepage';
import Login from './pages/Login';
import Register from './pages/Register';
import Profile from './pages/Profile';
import Question from './pages/Question';
import auth from 'auth/path/from/firebase-config'
function App() {
const user = auth.currentUser
return (
<>
<BrowserRouter>
<MainNav />
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/questions/:id" element={<Question />} />
<Route path="/users/:id" element={<Profile />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
I would like to know if there is an authenticated user and tell that to the . Depending on whether there is a user I want to show register, and login buttons or logout button (or something like that)
Is there maybe a way here to utilize firebase's onAuthStateChanged observer?
Firebase automatically restores the user credentials when the page/app reloads. This requires it to make a call to the server, so happens asynchronously. This call likely hasn't completed when your auth.currentUser runs, which means you get null for the current user.
The solution is indeed as you say to use an auth state listener, which fires for the first time after the asynchronous call has compelte.
Yes, you must wait onAuthStateChanged to get it ready.
In my app, I created a top-level component to handle this case.
This component blocks render, until firebase get ready.
import { useCallback, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchProfileDetails, handleAuthStateChanged } from '../../redux/actions/auth';
import { getAuth, onAuthStateChanged } from 'firebase/auth'
const auth = getAuth()
export default function AuthGate({ children }) {
const dispatch = useDispatch()
const authStatus = useSelector(state => state.auth.status) //idle (default, onAuthStateChanged not yet fired) || authenticated || unauthenticated
const profileStatus = useSelector(state => state.auth.profile.query.status) //idle || loading || succeeded || failed.
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, user => {
dispatch(handleAuthStateChanged(user)) // this line is responsible to change authStatus from `idle` to `authenticated` || `unauthenticated`
})
return () => {
unsubscribe()
}
}, [dispatch]);
useEffect(() => {
if (authStatus === 'authenticated') {
dispatch(fetchProfileDetails()) //fetch profile details from backend each user authenticated
} else {
// clear profile details each logout
}
}, [authStatus, dispatch]);
const renderChildren = useCallback(() => {
if (authStatus === 'idle' || profileStatus === 'idle' || profileStatus === 'loading') {
//show loading component
} else if (profileStatus === 'failed') {
//show error component
} else {
return children
}
}, [authStatus, children, profileStatus])
return renderChildren()
}
index.js
//...
ReactDOM.render(
//...
<AuthGate>
<App />
</AuthGate>
//...
,
document.getElementById('root')
);