Auth not persisted when used inside of an <iframe>

[nandorojo]

Operating System

macOS 14.1

Browser Version

Chrome 119.0.6045.199

Firebase SDK Version

9.6.1

Firebase SDK Product:

Auth

Describe your project's tooling

Next.js

Describe the problem

Our website, beatgig.com uses firebase auth.

When we do <iframe src="https://beatgig.com" />, I expect the auth to persist inside of the iframe window. All other localStorage does indeed persist, other than firebase auth.

This used to work properly, though I'm not sure which version it worked on.

Steps and code to reproduce issue

Initialize Firebase Auth using browserLocalPersistence, sign in, and then open the same URL in a new tab. It will not persist the auth properly.

I think the issue is due to these lines:

firebase-js-sdk/packages/auth/src/platform_browser/persistence/local_storage.ts

Lines 36 to 39 in 15addde

	function _iframeCannotSyncWebStorage(): boolean {
	const ua = getUA();
	return _isSafari(ua) || _isIOS(ua);
	}

I'm going to see if a patch removing that fixes it.

[nandorojo]

I think this may be caused by newer browsers. I used lambdatest.com to test on Chrome 115 and it worked fine there...

Related links: privacycg/storage-access#102

The cause appears to be "storage partitioning".

I wonder if any non-local-storage approaches to auth could fix it? If so, I can use a different persistence method.

[nandorojo]

I tried indexedDBLocalPeristence too. No dice.

The only solution was to open chrome://flags/#third-party-storage-partitioning and disable storage partitioning.

I haven't found any info online that suggests this can be fixed programmatically.

Is there a cookies implementation of firebase auth persistence? Perhaps this would work?

[DellaBitta]

If the iframe domain differs from the main domain, then yes, I believe this is expected behavior. It's a browser feature to prevent other websites from reading your users persisted states.

I wonder if any non-local-storage approaches to auth could fix it? If so, I can use a different persistence method.

We have a guide to our persistence options here, but no, cookies persistence isn't one of the options.

[nandorojo]

I’d expect the content inside of the iframe to load as if it were in a new tab. This is the case on Chrome <= 115 it looks like. Now it comes with storage partitioning set as true by default, which unfortunately makes having the same experience in an iframe very difficult.

[DellaBitta]

Hi @nandorojo,

If the domains are different then I believe this is in the realm of browser behaviors that we can't affect, unfortunately. If there's something else we can do then please let us know. Thanks!

[nandorojo]

Yeah fair enough.

If anyone knows of an API like cookies that would work across iframe and tab let me know...

[nandorojo]

If the domains are different

@DellaBitta — the domains are not different. It’s just that browsers now have a setting that keeps local storage from being shared between an iframe and a normal tab of the same URL.

[spa5k]

@nandorojo were you able to find any solution to this problem?

[nandorojo]

Unfortunately not yet. I haven't tried cookies yet as an alternative. I'm not sure if there is a way around this with new browser versions. A bit frustrating on Chrome's part imo.

[DellaBitta]

Ok, I'm going to close this issue for now since I don't think we can do anything about the browser behavior.