# Using Auth0 SPA with Brave/Safari/

**URL:** <https://community.auth0.com/t/using-auth0-spa-with-brave-safari/65658>\
**Category:** Get Help\
**Tags:** auth0-spa-js, browser, react, auth0\
**Created:** [July 6, 2021, 11:23am UTC](https://community.auth0.com/t/using-auth0-spa-with-brave-safari/65658 "2021-07-06T11:23:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lvillacin](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/lvillacin/32/12977_2.png) [@lvillacin](https://community.auth0.com/u/lvillacin)\
**Post date:** [July 6, 2021, 11:23am UTC](https://community.auth0.com/t/using-auth0-spa-with-brave-safari/65658/1 "2021-07-06T11:23:04Z")

</div>

`@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](https://www.npmjs.com/package/react-device-detect)

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).

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

```

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

```auto
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

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [July 6, 2021, 5:00pm UTC](https://community.auth0.com/t/using-auth0-spa-with-brave-safari/65658/3 "2021-07-06T17:00:42Z")

</div>

Hi @lvillacin,

These issues are usually related to third-party cookies. In Safari, [Intelligent Tracking Prevention](https://webkit.org/blog/7675/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](https://auth0.com/docs/tokens/refresh-tokens/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!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [July 21, 2021, 5:00pm UTC](https://community.auth0.com/t/using-auth0-spa-with-brave-safari/65658/4 "2021-07-21T17:00:52Z")

</div>

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.