Notes

• Starting in (8) this is simply a regular OIDC sign-in flow, with an SP-initiated interaction with the SAML IdP.
• This example uses the implicit flow for the sake of simplicity, but the application can request any supported OIDC flow in step 8 (authorize code flow, PKCE, etc.).
• In (7) the application simply “throws away” the response from Auth0, reads the connection parameter from the request, and creates an internal state for the authentication transaction.
• (4) through (15) require no interaction from the user (with the possible exception of a consent prompt from Auth0).
• In (15) the application reads the state parameter returned in the response from Auth0. This state parameter must match the internal state generated in (7). This is a critical part of the OIDC security model.

Route Handler Implementation

The route handler should generally have a different URL than the standard /login endpoint. The endpoint should call the same login() method as the /login endpoint. The existing login() method may require an update to accept and relay the connection parameter to the Auth0 tenant.

The route handler must Parse the connection name from the query string and then Pass it to the login() method, which generates an appropriate /authorize request. This request includes the redirect_uri to the application and a connection parameter (the connection parameter is key to this solution).

Example Modification (Using auth0-spa-js SDK): The modified router to include a new /startlogin route handler:

const router = 
  "/": () => showContent("content-home"),
  "/profile": () =>
    requireAuth(() => showContent("content-profile"), "/profile"),
  "/login": () => login()
};

const login = async (targetUrl) => {
  try {
    const options = {
      redirect_uri: window.location.origin
    };

    if (targetUrl) {
      options.appState = { targetUrl };
    }
    await auth0.loginWithRedirect(options);
  } catch (err) {
    console.log("Log in failed", err);
  }
};

 

The new startlogin method to retrieve the connection parameter:

const router = {
  "/": () => showContent("content-home"),
  "/profile": () =>
    requireAuth(() => showContent("content-profile"), "/profile"),
  "/login": () => login(),
  "/startlogin": () => startlogin()
};

//new method to start login from idp-initiated callback
const startlogin = async () => {
  console.log(window.location.href)
  let myURL = new URL(window.location.href);
  let conn = myURL.searchParams.get("connection");
  return  login(null, conn);
}

/**
 * Starts the authentication flow
 */
const login = async (targetUrl, connection) => {
  try {
    console.log("Logging in", targetUrl);

    const options = {
      redirect_uri: window.location.origin,
    };

    if (connection) {
      options.connection = connection;
    }

    if (targetUrl) {
      options.appState = { targetUrl };
    }

    await auth0.loginWithRedirect(options);
  } catch (err) {
    console.log("Log in failed", err);
  }
};

Any implementation must Pass a state value to the /authorize URL for CSRF protection and Validate the state in the response from the Identity Provider (IdP).