Use SPA SDK with Cross-Origin Embeder Policy

Get Help
1

Hi all, we are using auth0-spa-js 1.13.6 in our application.

We require the SharedArrayBuffer in our application and therefore we need to set the Browser to cross-origin isolated by adding the following headers:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

See Making your website "cross-origin isolated" using COOP and COEP

This breaks the Auth0 SPA SDK, because there is a /authorize request running in an iframe. This iframe does not have any Cross-Origin Resource Policy set.

How could we solve this?

Thanks for any inputs,
Markus

Please include the following information in your post:

  • Which SDK this is regarding:
    auth0-spa-js

  • SDK Version:
    1.13.6

  • Platform Version: e.g. Node 12.19.0

  • Code Snippets/Error Messages/Supporting Details/Screenshots:

Is this a feature request or bug report? If so, please create an issue directly in the corresponding GitHub repo. The Community SDK category is for general discussion and support.

2

Hi Markus,

We are experiencing the exact same issue, also using a SharedArrayBuffer. Did you find a way to let auth0 include these two CORP headers in the /authorize endpoint?

3

Hey siebe,

No, but we’ve built a workaround with their change in Disable iframe fallback if browser is in crossOriginIsolated mode · Issue #703 · auth0/auth0-spa-js · GitHub

If we get a login_required exception, e.g., on getTokenSilently(), we do a loginWithRedirect().

4

Thanks a lot for the quick reply, Markus.

This indeed seems like a workaround we could use as well. I guess the downside is that you’re never really able to ‘silently’ fetch the token any more? e.g. every time the page is loaded, a redirect to the login page (and back to the main app) happens?

I guess another option would be to set up some proxy service for the authentication, which doesn’t run in isolated mode and

  • either runs on the same origin
  • or adds the necessary CORP headers to the response

But this obviously has some security implications if not implemented well…

Quite a pity that auth0 doesn’t support these CORP settings. Doesn’t seem like a hard thing to do.

5

(post deleted by author)

6

100% agree.

depending on your security restrictions, you could e.g., do something with a refresh token in localstorage to improve UX. but take care, there are obvious security issues with this!

  cacheLocation: 'localstorage',
  useRefreshTokens: true,
7

Indeed. Thanks a lot for the help!

8

Hey there @siebe welcome to the community!

Thanks a bunch for sharing your workaround @markus.baumgartner. I did a quick search and it doesn’t look like this exists as feedback yet - It could be worth adding here in order to get it in front of other community members to up vote.

Cheers!