I'm logging in a user using signInWithEmailAndPassword() in Firebase version 9.
I'm also setting a user context after a user is logged in:
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
useEffect(() => {
const unsubscribe = onAuthStateChanged( auth, (user) => {
setCurrentUser(user)
});
return () => {
unsubscribe()
}
}, []);
return (
<AuthContext.Provider
value={{
currentUser
}}
>
{children}
</AuthContext.Provider>
);
};
Finally I'm wrapping my app and routes on the auth context:
import { AuthProvider } from "./Auth";
const App = () => {
return (
<AuthProvider>
<Router>
<div>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={SignUp} />
</div>
</Router>
</AuthProvider>
);
};
export default App;
Everything works fine. I am able to log in and navigate through any private/protected pages. I can access the user context from any page. I can refresh the page in the browser and I am still logged in. I can log out using Firebase signOut() and log back in. All is good.
HOWEVER... where does Firebase and React store the user login? I read that Firebase stores it in Session Storage by default. But when checking Session Storage or Local Storage in the console, there isn't anything saved.
My guess is that Firebase handles it all through onAuthStateChanged() but it is still very mysterious to me... I'm not certain if my code is secure for authentication.
