How to simulate IDP-Initiated SSO with an OIDC Connection

Blog Discussions
, , , ,
1

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:

  1. 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}).
  1. 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.
  1. React App ( auth0-react ):
  • Auth0Provider : Configure it as usual with your domain, client ID, and redirectUri.
  • SSO Initiation Route Component: Create a React component for your special route (e.g., /sso). This component will use the useAuth0 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:

  1. User clicks the bookmark app in Okta.
  2. Okta redirects the browser to https://your-react-app.com/sso?connection={connection}.
  3. The SSO component mounts and immediately calls loginWithRedirect, specifying connection: {connection}.
  4. Auth0 receives the request and, due to the connection parameter, directly federates to your Okta instance (via the Okta Workforce connector).
  5. Since the user has an active Okta session, Okta authenticates them seamlessly.
  6. Okta sends an authentication response back to Auth0.
  7. Auth0 validates the response, creates its own session for your React app, and redirects back to your app’s /callback URI.
  8. The auth0-react SDK handles the callback, exchanges tokens, and the user is logged into your React app.

bookmark app arch
bookmark app arch2560×1028 154 KB

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.

1 Like