Failed Silent Auth on page reload

[charklewis]

Describe the problem

I have followed code example in The Complete Guide to React User Authentication with Auth0 and noticed the behaviour of the login state not persisting on reload. After trying this on different browsers I found it only works as expected on Firefox and Chrome.

I also raised this on stack overflow without my success: Auth0 does not persist login on page refresh for email/password

What was the expected behaviour?

When a user is logged in and opens a new tab or reloads the page, the Auth0Provider should make a silent auth call to log in the user without having to make them reloading again.

Reproduction

I used the example code from the blog post with a few changes.

AuthProvider.jsx

const AuthProvider = ({ children }) => {
  const history = useHistory()

  const onRedirectCallback = appState => {
    history.push(appState?.returnTo || window.location.pathname)
  }

  return (
    <Auth0Provider
      domain={process.env.REACT_APP_AUTH0_DOMAIN}
      clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  )
}

Routes.jsx

export default function Routes() {
  const { isLoading, isAuthenticated } = useAuth0()

  const getDashboard = () => {
    //determine which dashboard to return
  }

  if (isLoading) return <p>Loading...</p>

  if (isAuthenticated) {
    return (
      <Suspense fallback={<p>loading...</p>}>
        <Switch>
          <Route exact path="/">
            {getDashboard()}
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Suspense>
    )
  }

  return <SignInAndRegister />
}

SignInAndRegister.jsx

export default function SignInAndRegister() {
  const { loginWithRedirect } = useAuth0()
  return (
    <div className="p-4 max-w-screen-md h-screen overflow-hidden flex items-center align-center mx-auto">
      <div className="w-full">
        <h1 className="text-xl text-center mb-6">My Website</h1>
        <PrimaryButton onClick={loginWithRedirect} fullWidth={true}>
          Login
        </PrimaryButton>
        <div className="mb-3" />
      </div>
    </div>
  )
}

Steps to reproduce the error:

1. Run app (this app is using create-react-app), so yarn start
2. Navigate to localhost:3000
3. Click login (which will navigate you to the Lock UI)
4. Sign in with username/password
5. App is redirected back to / with ?code=<code>
6. isAuthencated value flips to true and Dashboard component is rendered
7. Reload the page
8. Silent auth call fails, making the user log in again

The failed Failed Silent Auth has the information:

{
  "date": "2020-08-27T07:38:48.043Z",
  "type": "fsa",
  "description": "Login required",
  "client_id": <client_id>,
  "client_name": <client_name>,
  "ip": <ip>,
  "user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
  "details": {
    "body": {},
    "qs": {
      "client_id": <client_id>,
      "redirect_uri": "http://localhost:3000",
      "scope": "openid profile email",
      "response_type": "code",
      "response_mode": "web_message",
      "state": <state>,
      "nonce": <nonce>,
      "code_challenge": <code_challenge>,
      "code_challenge_method": "S256",
      "prompt": "none",
      "auth0Client": <auth0Client>
    },
    "connection": null,
    "error": {
      "message": "Login required",
      "oauthError": "login_required",
      "type": "oauth-authorization"
    }
  },
  "hostname": "<my-app>.auth0.com",
  "audience": "https://<my-app>.auth0.com/userinfo",
  "scope": [
    "openid",
    "profile",
    "email"
  ],
  "auth0_client": {
    "name": "auth0-react",
    "version": "1.0.0"
  },
  "log_id": <log_id> ,
  "_id": <_id>,
  "isMobile": false
}

Environment

• "@auth0/auth0-react": "^1.0.0",
• "react": "^16.13.1"
• "react-scripts": "3.4.1",
• Firefox (works), Chrome (works), Brave (fails), Safari (fails)

I have verified my app is set up with

• Allowed Callback URLs: localhost:3000
• Allowed Logout URLs: localhost:3000
• Allowed Web Origins: localhost:3000
• Refresh Token Behavior: Non-Rotating
• Application Type: Single Page Application
• Token Endpoint Authentication Method: None

[adamjmcgrath]

Hi @charklewis - thanks for raising this

Brave and Safari have a feature called Intelligent Tracking Prevention (ITP). This feature prevents silent authentication with an iframe from working - which is why you're seeing this behaviour on page refresh.

You have 2 options:

1. Use Rotating Refresh Tokens (see https://auth0.com/docs/libraries/auth0-spa-js#use-rotating-refresh-tokens)
2. Use a Custom Domain (See https://auth0.com/docs/custom-domains)

[charklewis]

Thanks for the info @adamjmcgrath. From the link about rotating refresh tokens, it looks like the @auth0/auth0-react SDK is not on the supported list for this feature. Will this be supported in the future? If we want this behaviour, then we should be using the Auth0 Single Page App SDK?

I have noticed the document to set up this does not include the auth0-react SDK: https://auth0.com/docs/tokens/refresh-tokens/configure-refresh-token-rotation

[adamjmcgrath]

Hi @charklewis

auth0-react uses auth0-spa-js under the hood, so this feature is available. Just set useRefreshTokens=true and cacheLocation="localstorage" in your Auth0Provider props

[charklewis]

This worked like a charm @adamjmcgrath. Would it be possible to update the tutorials/doc using auth0-react to be more clear about how to solve this problem? I wasn't even aware I would pass additional props to the provider.

For example, I can't see anywhere on this page that tells you can provide those props: https://auth0.com/docs/quickstart/spa/react/01-login

[johnjacobkenny]

I had the same issue, and now it works for me.

[adamjmcgrath]

Thanks for the feedback @charklewis

For example, I can't see anywhere on this page that tells you can provide those props: https://auth0.com/docs/quickstart/spa/react/01-login

We try to keep our quickstarts as brief as possible, they should be the bare minimum you need to get up and running.

We cover this specific issue in our FAQs https://github.com/auth0/auth0-react/blob/master/FAQ.md#1-user-is-not-logged-in-after-page-refresh

And our docs list the full range of options to the Auth0Provider https://auth0.github.io/auth0-react/interfaces/auth0provideroptions.html

That said, we continually monitor feedback and will make adjustments when we think they're necessary

[weeksling]

@adamjmcgrath Understandable that the Quickstart is meant to be brief, but this appears to be quite a common issue. Would love to have some easily accessible reference in the dashboard somewhere — This issue appears to occur in most browsers, including chrome.

[delucca]

I was facing the same issue here in Firefox, and following @adamjmcgrath suggestion worked like a charm too!

[benkingcode]

@adamjmcgrath this really needs to be made more obvious in the documentation, lost a good few hours to this!

[adamjmcgrath]

Hi @dbbk - thanks for your feedback

It's our top FAQ https://github.com/auth0/auth0-react/blob/master/FAQ.md#1-user-is-not-logged-in-after-page-refresh which is linked to from the README

[neil-dev]

Even after turning refresh tokens on and setting up the configuration accordingly, this issue is occurring in Chrome incognito and Brave. Currently, the thing that happens is the page gets automatically refreshed again and again.