@dfinity/auth-client sessionStorage

Developers JavaScript
1

I am using @dfinity/auth-client@0.11.1, and I want to store the authentication state in the browser’s session storage instead of local storage.

      const options: AuthClientCreateOptions = {
        storage: new LocalStorage(
          ‘myprefix-‘, window.sessionStorage
        ),
      };

      const authClient = await AuthClient.create(options);

This works fine in a single tab, but when opening links in a new tab, the user is no longer logged-in. When I look at the session storage in Chrome Dev Tools, I can see that it exists in the original tab, but not the new tab.

In contrast, if I do not specify a storage option, leaving the default to local storage, I stay logged-in across tabs, and I can see the authentication data in the local storage of all tabs using Chrome Dev Tools.

The motivation to use session storage is because all session data is lost when all tabs in the session are closed. This is preferred for security so that another user can not open the website later and continue the session.

Is session storage supported? If so, am I using the API correctly? Thanks.

2

From the MDN documentation:

Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.

The behavior - “when opening links in a new tab, the user is no longer logged-in” - you describe seems correct to me.

2 Likes
3

@peterparker Thank you for the response. In past SPA projects I was able to maintain session across tabs, but that was because of HTTP Only cookies/OAuth. I realize now that my expectations of sessionStorage were incorrect.

1 Like
4

It appears that session state which clears when tabs are closed is possible with some trickery. I’ll do some testing at least, as it would be nice for security purposes.

1 Like
5

We have a request from the security team to upgrade the default storage provider to use LocalDB and the WebCrypto API.

That may not serve the exact purposes you are looking for though, so I want you to be aware that you can create your own solution to pass in during the AuthClient.create args, as long as it implements the AuthClientStorage API

1 Like
6

Great to know this! Thank you Kyle.