Hey Auth0 Community!
Many of us work in environments where users start their journey from a central Identity Provider (IDP) portal, like an Okta dashboard. While OpenID Connect (OIDC) is fundamentally Service Provider (SP) initiated, users often expect an “IDP-initiated” experience: click an app in Okta, and get seamlessly logged into the target application.
This post shows how you can achieve this seamless experience for a React application secured by Auth0, where Auth0 federates authentication to Okta using an Okta Workforce (or generic SAML/OIDC) enterprise connection. We’ll use the auth0-react
SDK.
The Goal:
A user clicks a bookmark app in their Okta dashboard and is logged into your React application without seeing any intermediate login prompts from Auth0 or re-entering credentials for Okta (assuming they have an active Okta session).
The Core Concept: The “SSO Initiation Route”
The trick is to create a dedicated route in your React application that, when accessed, automatically triggers the Auth0 login flow (loginWithRedirect
) and specifically tells Auth0 to use your pre-configured Okta enterprise connection.
Setup Overview:
- Okta Bookmark App:
- In your Okta admin console, create a “Bookmark App.”
- Set its URL to point to the special SSO initiation route in your React application (e.g.,
https://your-react-app.com/sso?connection={connection}
).
- Auth0 Enterprise Connection:
- In your Auth0 dashboard, ensure you have an enterprise connection set up for your Okta instance (e.g., “Okta Workforce” or a generic SAML/OIDC connection).
- Crucially, note the name of this connection (e.g.,
Okta
,okta-prod
). You’ll need it in your React app. - Ensure this connection is enabled for the Auth0 application that your React app uses.
- React App (
auth0-react
):
Auth0Provider
: Configure it as usual with your domain, client ID, andredirectUri
.- SSO Initiation Route Component: Create a React component for your special route (e.g.,
/sso
). This component will use theuseAuth0
hook.
The React SSO Initiation Component ( SSO.js
):
This is where the magic happens. When this component mounts, it calls loginWithRedirect
and passes the connection
parameter.
// src/SSO.jsx
import React, { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { Navigate } from 'react-router-dom';
// IMPORTANT: Replace with the actual name of your Okta Workforce connection in Auth0
const OKTA_CONNECTION_NAME = 'Okta'; // Example: 'okta-workforce-connection'
function OktaInitiateSSO() {
const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
const params = new URLSearchParams(window.location.search);
let connection = params.get("connection") || null;
useEffect(() => {
if (!isLoading && !isAuthenticated && !error) {
if (connection) {
loginWithRedirect({ authorizationParams: { connection: connection }});
} else {
loginWithRedirect();
}
}).catch(err => console.error("Login failed:", err));
}
}, [isLoading, isAuthenticated, loginWithRedirect, error]);
if (error) return <p>Error during login: {error.message}. Check connection name: {OKTA_CONNECTION_NAME}</p>;
if (isLoading) return <p>Loading SSO...</p>;
return <p>Initiating SSO...</p>; // User sees this briefly
}
export default SSO;
You’d then add this component to your React Router setup:
// In your App.js or router configuration
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/sso" element={<SSO />} />
</Routes>
The Flow Explained:
- User clicks the bookmark app in Okta.
- Okta redirects the browser to
https://your-react-app.com/sso?connection={connection}
. - The
SSO
component mounts and immediately callsloginWithRedirect
, specifyingconnection: {connection}
. - Auth0 receives the request and, due to the
connection
parameter, directly federates to your Okta instance (via the Okta Workforce connector). - Since the user has an active Okta session, Okta authenticates them seamlessly.
- Okta sends an authentication response back to Auth0.
- Auth0 validates the response, creates its own session for your React app, and redirects back to your app’s
/callback
URI. - The
auth0-react
SDK handles the callback, exchanges tokens, and the user is logged into your React app.
Benefits:
- Seamless User Experience: Achieves the desired IDP-initiated feel.
- Standard OIDC: Still uses the robust and secure SP-initiated OIDC flow under the hood, triggered automatically.
- Centralized Control: Leverages Auth0 for managing connections and application-specific OIDC details while respecting Okta as the primary IDP.
- Clear Routing: The
connection
parameter ensures Auth0 doesn’t need to prompt the user if multiple IDPs are configured.
This approach provides a clean way to integrate applications into an enterprise SSO environment where users expect to start from their primary IDP portal.