I have landing page (LP) at www.landing.somedomain.
I have single page application (SPA) at www.spa.anotherdomain.
Domains are completly different and both use Auth0-lock.
On LP any user (anonymous) can read information. If anonymous user decides to sign up he will click on button => auth0-lock will be shown and on success => redirect will be performed to SPA.
For impoving customer experience I need to track anonymous user activity, and after user is logged in (signed up) I can assign “anonymous user activity” to “logged in user activity”. E.g. with this tracking library https://help.mixpanel.com/hc/en-us/articles/115004497803. That is why I need to make this assingment right before redirect or I need to pass anonymous user-generated id to SPA.
As a Front-end developer I can not control redirect, because it is performed at browser level with “Location” header.
My first thought was to pass anonymous user-generated id with state params https://auth0.com/docs/libraries/lock/v11/sending-authentication-parameters#state-string- - but this is impossible, because on SPA side I need to know this state for validation. Otherwise I will get state mismatch error.
Can I do my issue with Auth0 “redirect” workflow?
Second thought was to prevent redirect on LP https://auth0.com/docs/libraries/lock/v11/configuration#redirect-boolean- however I do not have auth0.resume() - function to make redirect from JS code.
What I did: build hash string on LP and manually perform redirect from LP to SPA:
const lock = new Auth0Lock(clientId, domain, { auth: { redirect: false } }); // other options omitted
lock.on('authenticated', onAuthenticationSuccess);
function onAuthenticationSuccess(authResult) {
const profile = authResult.idTokenPayload;
const userId = profile.user_id;
// perform anonymous assignment with Auth0 userId
...
// now I need to redirect to SPA
const hashKeys = ['accessToken', 'idToken', 'scope', 'expiresIn', 'tokenType', 'state'];
const originalKeys = {
'accessToken': 'access_token',
'idToken': 'id_token',
'scope': 'scope',
'expiresIn': 'expires_in',
'tokenType': 'token_type',
'state': 'state',
};
const hash = hashKeys.map(hKey => originalKeys[hKey] + '=' + authResult[hKey]).join('&');
window.location.assign('http://www.spa.anotherdomain' + '#' + hash);
}
But as you can see this solution is ugly, and this solution relies on your “private” key names and your private workflow that you can change at any time.
How to solve my issue?