isAuthenticated and isLoading from useFusionAuth() is always false

lambio

I am using the React SDK from FusionAuth with React-Router-Dom (not sure if the latter matters). I further use the hosted log in page that ships with FusionAuth. My App successfully redirects to the hosted login page. After a successful log in, the hosted log in page redirects me back to my application. And that is where the trouble starts. I am caught in an endless loop because const {isAuthenticated, isLoading} = useFusionAuth(); always returns false, for both (isAuthenticated, isLoading). This causes a redirect back to the hosted log in page of FusionAuth, which probably realizes 'He, the user is logged in already', redirecting me back to my App, which again redirects me back to the hosted log in page (because const {isAuthenticated, isLoading} = useFusionAuth(); is again false), and so forth....

What I see upon each redirect to from the hosted log in to my application page happening is the code in the URL bar changing

http://localhost:3000/foo?code=LKJHSDGKJHFDG83LKSD...&locale=en&userState=Authenticated

So upon every redirect from the hosted log in page this part code=LKJHSDGKJHFDG83LKSD... changes.

Not sure if this matters, but this is my setup

// index.tsx
root.render(
    <>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <FusionAuthProvider {...fusionAuthConfig}>
                    <RouterProvider router={router}/>
                </FusionAuthProvider>
            </PersistGate>
        </Provider>
    </>
);

And in this component, the endless redirect occurs

//ProtectedRoute.tsx
const ProtectedRoute = () => {
    const {isAuthenticated, isLoading} = useFusionAuth();

    if (isLoading) return <Spinner />
    if (!isAuthenticated) window.location.replace(https://.../oauth2/authorize?client_id=...&response_type=code&redirect_uri=http://localhost:3000/landing-page)
    return isAuthenticated && <>
        <Navigation/>
        <Outlet/>
    </>
    return <Error />
}

This is fusionAuthConfig

export const fusionAuthConfig = {
    clientID: "...",
    redirectUri: "http://localhost:3000/landing-page",
    serverUrl: "...."
}

In the admin interface GUI of FusionAuth of my application , I added the redirect-uri in the dialog in the for the application (when you click edit).

"react-router-dom": "^6.18.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@fusionauth/react-sdk": "^0.26.0",

Why is const {isAuthenticated, isLoading} = useFusionAuth(); always returning false?

dan

@lambio hmmm. That code value changing seems to indicate that the authorization code grant isn't completing. This might cause the behavior you are seeing (because the tokens never get stored in the browser).

Are you running both systems on localhost? Are you using docker?

Sharing a bit more about what the system looks like would be helpful.

Another thing you can do is enable debugging in your fusionauth application configuration (go to the admin panel, edit your application, enable debugging) and then viewing the event log (go to system -> event log) as you try a login. That might be helpful info to share as well.