Configure the Mylo login flow in Zephr, from requesting client configuration to redirecting the user after successful authentication.

1. Send a clientConfig GET request to Zephr with:

   • the startingUrl parameter

   • the x-referer header

   The startingUrl value is used by Zephr to redirect the user after a successful login.

2. Receive the response from Zephr containing:

   • clientId

   • loginRedirectUrl

   • state

3. Use the returned parameters to construct the Mylo login link.

   Mylo Login Example

   <div id="mylo-login-link">Loading Mylo Sign In link...</div>
   <script>
    function clientConfig() {
        var client = new (XMLHttpRequest || ActiveXObject)("MSXML2.XMLHTTP.3.0");
        client.open(
        "GET",
        `/plugins/public/mylo/clientConfig?startingUrl=${window.location.href}`,
        null
        );
        client.onload = function () {
        if (client.status === 200) {
        var response = JSON.parse(client.responseText);
        document.getElementById("mylo-login-link").innerHTML =
        '<a href="https://ciam-ui.kubestage.hearstapps.net/login?client_id=' +
        response.clientId +
        "&redirect_uri=" +
        encodeURIComponent(response.loginRedirectUrl) +
        "&state=" +
        response.state +
        '">Sign In</a>';
        } else {
        console.log("can not fetch client config");
        document.getElementById("mylo-login-link").innerHTML =
        "can not get Mylo Sign In link";
        }
        };
        client.setRequestHeader("Content-type", "application/json");
        client.setRequestHeader("X-Referer", "localhost");
        client.withCredentials = true;
        client.send();
    }
    clientConfig();
   </script>

4. When the user selects the Mylo login link, send a GET request to Mylo with:

   • client_id

   • redirect_uri

   • state

5. Authenticate the user through the Mylo login flow.
6. After successful authentication, Mylo sends a request to Zephr using loginRedirectUrl.
7. Zephr validates the request and creates the user session. If product synchronization is enabled, Zephr synchronizes Mylo subscriptions with Zephr products.
8. Zephr redirects the user to startingUrl.