session carryover to new window lost

[QnalNandi]

Hello, I'll start with note that I am new to web domain and may be this query might sound silly... I would really appreciate it if you can help me to fix this Issue. (Most probably It is at my end 🤔)

file hierarchy:

1. base.html & base.js (base url)
2. data.html & data.js (another page, I am trying to open this in new window)

I have integrated fief, IDM works as expected in base url, and also if I open data.html in same window. But, when I open data.html in new window with my base url still open and having signed in user. I get const tokenResponse = window.fiefUserAuthentication.getTokenInfo(); is null. I see session is lost in data.html when it is open in new window, but it stays intact if I open data.html in same window as base url.

Is there a way to carry over the session to new window?

[fief-bailiff[bot]]

Hail, @QnalNandi 👋 Welcome to Fief's kingdom!

Our team will get back to you very soon to help.

In the meantime, take a minute to star our repository ⭐️

Farewell!

[frankie567]

From what I understand, you directly open the HTML file in your browser, right? If so, you won't be able to make the code work correctly, as browsers have specific restrictions for plain HTML files.

If you want to run the example for real, you need to serve it by running a web server on your local machine, like it would be done by a real server. There are a few ways to do it. For example, you can use http-server: https://github.com/http-party/http-server#readme

[QnalNandi]

thanks for the response @frankie567
I am using uvicorn web server, and I am trying to open it over hosted local web servber.
as I have mentioned base.html & base.js (base url) is the start page of my web portal and If I open data.html & data.js in same window it works absolutely fine, but if I open data.html & data.js in new window my logged in session is lost in data.html & data.js.

this is how I have anchored data.html & data.js

<base.html>
<a id="anchor_data" href="#">Navigate to Data</a>
<script>
var link = document.getElementById("anchor_data");
link.href = window.location.origin + "/data.html";
link.onclick = function () {
window.open(window.location.origin + "/data.html", "_self");
return false;
}
</script>

[frankie567]

Oh, okay, I understand now. The thing is, by default, our browser integration uses sessionStorage, which works only in a single window/page. It's not carried over a new window/tab. From MDN:

Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.

If you want to solve that, you can switch to localStorage, which is similar but keeps the data in memory even after the page is closed.

It's not built-in in our SDK, but since sessionStorage and localStorage have the same API, it can actually be done quite easily:

      const initialize = () => {
        const fiefClient = new fief.Fief({
          baseURL: 'https://example.fief.dev',
          clientId: 'YOUR_CLIENT_ID',
        });
        const fiefAuth = new fief.browser.FiefAuth(fiefClient);
        // Change the underlying storage
        fiefAuth.storage.storage = window.localStorage;

[QnalNandi]

Aha, I guess this is what I was looking for.
Appreciate it!