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

Knowledge Articles
1

Problem statement

Is it possible to login with SAML IdP-initiated SSO to an application using auth0-react?

Solution

It is possible to configure 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. Here is an example of a custom login route handler using auth0-react:
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({
                    authorizationParams: {
                            connection: connection
                    }    
            })
        } else {
            return loginWithRedirect()
            // You could optionally return an error since this endpoint should be specifically for IdP-Initiated flows.
        }
    }

    return redirectToAuthorize()
}

export default IdpLogin

Note that this example uses useSearchParams() which requires react-router-dom v6 .

  1. Configure the IdP-Initiated SSO settings for the connection . Go to the Dashboard > Authentication > Enterprise > SAML and go to the SAML connection’s setting page. Then go to the IdP-Initiated tab and 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