I have a unique feature that opens a new tab on a different domain, and I want to ensure the cognito session remains active. To achieve this, I've implemented a hidden iframe with the same origin to transfer local storage data using the following code snippet:
const proxy = document.getElementById('proxyDashboard');
if (this.isIFrame(proxy) && proxy.contentWindow) {
Object.keys(localStorage).forEach(function(key){
proxy.contentWindow.postMessage(JSON.stringify({key, value: localStorage.getItem(key)}), 'http://localhost:4200');
});
console.log(this.dashboardUrl);
window.open(this.dashboardUrl, '_blank');
}
On the receiving end, I'm retrieving the tokens like so:
constructor(){
if (window.addEventListener) {
window.addEventListener('message', this.receiveMessage.bind(this), false);
} else {
(<any>window).attachEvent('onmessage', this.receiveMessage.bind(this));
}
}
receiveMessage: any = (event: any) => {
if (event.origin !== 'http://localhost:4201') {
return;
}
const payload = JSON.parse(event.data);
localStorage.setItem(payload.key, JSON.stringify(payload.value));
}
The challenge now lies in reinstating the Cognito session. It seems that an extra step is required for Amplify or Cognito to recognize the newly transferred tokens.
Here's the current list of items in storage: https://i.sstatic.net/PM0cI.png
Thank you