useAuth | simplest way to add authentication | Frontend Utils library

In your /AuthContext you can go ahead and add currentUser to your imports from firebase/auth like this: import { createUserWithEmailAndPassword, onAuthStateChanged, setPersistence, currentUser } from 'firebase/auth'

Then inside of AuthProvider you will want to load in the currentUser when the page first loads. We can use the newly imported currentUser inside of a useEffect to accomplish this, like so:

So I think for this you should create a wrapper component that does the check on it's own and then renders out stuff so that you don't need to repeat it for each page.

The initial currentUser state matches the unauthenticated state, so when the app initially renders, if you are accessing a protected route the redirection will occur because the currentUser state hasn't updated yet.

Since onAuthStateChanged returns null for unauthenticated users then I suggest using anything other than null for the initial currentUser state. undefined is a good indeterminant value. You can use this indeterminant value to conditionally render a loading indicator, or nothing at all, while the auth status is confirmed on the initial render.

AuthProvider

I'm guessing you have an issue with your initial user state and your PublicRoute component redirecting before the app has actually computed/resolved the user's auth status.

The issue is that your resolved/unauthenticated state is masked by your initial state value. You probably want to use an indeterminant initial state and conditionally render null or some loading indicator until the authentication status has been resolved.

Example:

The initial authUser state is undefined for the initial render so this is expected behavior. The onAuthStateChanged listener is instantiated at the end of the initial render cycle via the useEffect. If any part of your UI depends on this "indeterminant" authUser state it should handle it accordingly.

Additionally, you should also unsubscribe any auth status listeners when the component unmounts or the user object from firebase updates/changes.

Example:

Don't use strings "true" and "false" in lieu of actual boolean values. Non-empty strings are always truthy. Change your loading state from strings to booleans.

In the private route component, I need to stop the render for thoses two states:

• When the user come the first time to the login page, the value of isAuthenticated should be null and like that the private route is rendered when this value is false,

• When the user click in the login button, I need to set the isAuthenticating to true, in this case the state of the user is not yet known so i need also to block the render of private route

The username value from the route query is referenced in the useEffect fetching user data, it should be added to the useEffect hook's dependency array so when username value changes fetchData is called again with the new value.

Working with web-based technology, you need to get used to using browser developer tools. there you will see many errors regarding your empty pages.

these errors are mostly due to major version changes in react, react-router, react-router-dom, and partly how you try to install them with npm.

to solve your problem, first, make sure you have the 5th versions of these tools. trying to install without a version will result in the latest versions installed. switch to v6 when you are confident with your app's functioning but be ready for lots of changes.