I have an existing app using Auth0Provider from @auth0/auth0-react (^1.9.0).
This app is functioning properly with normal auth0 logins, now I am attempting to use the SAML Enterprise login. I have SSO working properly, but when it comes back to my SPA’s page, it loops directly back to the login page as if it is not authorized.
I made a separate route for IDP Login, but it is doing the same thing.
So, it appears I am struggling with two items:
- How do I accept POST requests to React SPA (or do I need to)?
- When I enter the Query String in “IdP-initiated SSO Behavior” under the Enterprise Connection, it appears to be completely ignoring this.
I feel like once I’m able to get it to POST to the proper route, I should be able to direct traffic from there.
The current “am I logged in?” flow I have is:
const { user, isAuthenticated, isLoading, loginWithRedirect, logout } = useAuth0();
const location = useLocation();
if (!isLoading && !isAuthenticated) {
loginWithRedirect({ appState: { targetUrl: "/auth" } });
} else {
if (isAuthenticated && !isLoading) {
/// user logged in, do stuff for them.
}
}
The IDP Login flow I have is:
import { useAuth0 } from "@auth0/auth0-react";
import { useSearchParams } from "react-router-dom";
const IdpLogin = () => {
const { loginWithRedirect } = useAuth0();
let [searchParams] = useSearchParams();
const redirectToAuthorize = () => {
const connection = searchParams.get("connection");
if (connection) {
return loginWithRedirect({
connection: connection,
});
} else {
return loginWithRedirect();
// You could optionaly return an error since this endpoint should be specifically for IdP-Initiated flows.
}
};
return redirectToAuthorize();
};
export default IdpLogin;
The route setup I have is:
<ThemeProvider theme={theme}>
<BrowserRouter>
<div className="wrapper">
<Header sessionUser={sessionUser} setSessionUser={setSessionUser} />
<Routes>
<Route path="/idplogin" element={<IdpLogin />} />
<Route path="/" element={<MainApp />}>
<Route path="/actions" element={<Actions />} />
<Route path="/action/:id" element={<Action />} />
.... other routes
Then at bottom of the index, I have:
<Auth0Provider {...providerConfig}>
<App />
</Auth0Provider>,
rootElement
);
