Using SAML IdP-initiated SSO with @auth0/auth0-react

Knowledge Articles
1

Last Updated: Dec 17, 2024

Overview

This article clarifies whether it is possible to log with SAML IdP-initiated SSO to an application using auth0-react.

Applies To

  • Auth0 React
  • SAML IdP-initiated
  • SSO

Solution

It is possible to configure an IdP-initiated login for a react app. There are two steps to configure this:

  1. Create a custom login route to handle this flow. The custom login route should check for and require a connection parameter, then parse the connection query string parameter and initiate a login specifying that connection. Below is an example of a custom login route handler using auth0-react. NOTE: This example uses useSearchParams(), which requires react-router-dom v6.
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
  1. Configure the IdP-Initiated SSO settings for the connection. Go to the Dashboard > Authentication > Enterprise > SAML and to the SAML connection’s settings page. Then go to the IdP-Initiated tab, set it to Accept Requests, and enter the Query String value. This should include a URL-encoded redirect_uri to the route that will handle the IdP-Initiated login request and a parameter with the connection name.

Related References