Using Auth0 SPA with Brave/Safari/

[lvillacin]

@auth0/auth0-spa-js and other libraries based on it like @auth0/auth0-react have problems with persisting logins in multiple browsers like Brave, Safari and Firefox.

I am not very knowledgeable why or how these problems happen but I think it happens because of cross-site cookies or something. I can come back to this post when I have the knowledge and and time to explain but for now I’ll explain my fix.

There are fixes your users can do in order to make auth0 work but of course that’s bad UX and your webapps are expected to just work.

To fix this, I detect the user’s browser and switch Auth0’s cachlocation from memory to localstorage and by setting useRefreshTokens to false

To detect Safari and Firefox I use react-device-detect - npm

Brave cannot be detected properly by that library nor through the usual User Agent. Instead, I use this function which I lifted from somewhere in stackoverflow (I’ll link to it when I have the time).

const isBrave = async()=> {
  return (navigator.brave && await navigator.brave.isBrave() || false)
}

To wrap this all up, my code looks like this:

import {isSafari, isFirefox } from 'react-device-detect'

const isBrave ....

let useRefreshTokens = isSafari || isFirefox || isBrave ? true : false

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      ...
      useRefreshTokens={useRefreshTokens}
      cacheLocation={useRefreshTokens ? 'localstorage' : 'memory'}
     >
       <App />
     </Auth0Provider>
   </React.StrictMode>,
  document.getElementById('root')
);

Hope this helps

[dan.woda]

Hi @lvillacin,

These issues are usually related to third-party cookies. In Safari, Intelligent Tracking Prevention will block the cookies that Auth0 uses to persist the login between browser sessions (tabs, windows, etc.).

Our solution for this, as you have mentioned, is to use Refresh Token Rotation. You can use this for all of your Authentication sessions, regardless of browser, and don’t need to use it conditionally based on the browser/user-agent.

Thanks for the input and let me know if you have any questions!