lambio

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?

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....