How can I persist authentication across different applications and domains in a micro-frontend architecture?

Get Help
,
7

Hi again!

Thanks for all the additional info on the matter!

Just to see if I understood the scenarios correctly, when you are using the isAuthenticated condition (even if it does not behave correctly, does it successfully log in the user after they have authenticated through the embedded component or not?

Otherwise, as far as I know, in order for isAuthenticated to get set to true, the function in onRedirectCallback has to get called. If the redirectUri doesn’t load completely, the onRedirectCallback function will not get called. In this case, could you try something similar as outlined in this community post:

try {
    auth0.isAuthenticated().then(async function (authenticated) {
        if (!authenticated) {
            const query = window.location.search;
            const shouldParseResult = query.includes("code=") && query.includes("state=");
            if (shouldParseResult) {
                console.log("> Parsing redirect");
                try {
                    const result = await auth0.handleRedirectCallback();
                    console.log("Logged in!");
                } catch (err) {
                    console.log("Error parsing redirect:", err);
                }
                window.history.replaceState({}, document.title, "/");
            } else {
                auth0.loginWithRedirect({ redirect_uri: window.location.origin });
            }
        } else {
            auth0.getTokenSilently().then(function (token) {
                Ext.Ajax.setDefaultHeaders({ 'Authorization': 'Bearer ' + token });
            });
        }
    })
} catch (err) {
    console.log("Log in failed", err);
}

Let me know of the outcome and I will be coming back to you with an update as soon as possible!

Kind Regards,
Nik