isAuthenticated and user are null after login

[MuddyBootsCode]

Please do not report security vulnerabilities here. The Responsible Disclosure Program details the procedure for disclosing security issues.

Thank you in advance for helping us to improve this library! Please read through the template below and answer all relevant questions. Your additional work here is greatly appreciated and will help us respond as quickly as possible. For general support or usage questions, use the Auth0 Community or Auth0 Support. Finally, to avoid duplicates, please search existing Issues before submitting one here.

By submitting an Issue to this repository, you agree to the terms within the Auth0 Code of Conduct.

Description

When using Aut0/auth0-react and the useAuth0 hook:

const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0();

After logging in the application isAuthenticated is still false and user is undefined.

Reproduction

Add the package and follow direction on the Auth0 quick start page https://auth0.com/docs/quickstart/spa/react/01-login
login the application and get automatically redirected to the home page.

Where applicable, please include:

import {useAuth0} from "@auth0/auth0-react";

const NavBar = () => {
  const classes = useStyles();
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

  console.log(isAuthenticated);

  return (
    <div className={classes.root}>
      <AppBar position="static" className={classes.navBar}>
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Child Life Disaster Relief
          </Typography>

          <Button color="inherit" className={classes.button} onClick={logout}>Logout</Button>

          {!isAuthenticated &&
          <Button color="inherit" className={classes.button} onClick={loginWithRedirect}>Login</Button>
          }

        </Toolbar>
      </AppBar>
    </div>
  );
};

export default NavBar;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={process.env.REACT_APP_DOMAIN}
      clientId={process.env.REACT_APP_CLIENT_ID}
      redirectUri={window.location.origin}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

• Log files (redact/remove sensitive information)
• Application settings (redact/remove sensitive information)
• Screenshots

Environment

Versions:

"dependencies": {
    "@auth0/auth0-react": "^1.0.0",
    "@date-io/date-fns": "1.x",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.10.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "date-fns": "^2.15.0",
    "formik": "^2.1.5",
    "formik-material-ui": "^3.0.0-alpha.0",
    "formik-material-ui-pickers": "^0.0.11",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },

[narciero]

I am seeing this as well, although it only happens in Safari and not chrome

[anthonycole]

I'm seeing this as well. I commented on #82 and left some comments as to where I got to.

[adamjmcgrath]

Hi @MuddyBootsCode - thanks for raising this

The code in your NavBar looks fine, except the SDK needs to get your authentication state from the authorization server when the page loads so there will be an initial render where isAuthenticated is false and isLoading is true, then if you are logged in on your authorization server, the properties will resolve to isAuthenticated is true and isLoading is false.

If isAuthenticated is never resolving to true after a successful login there may be an issue with the way your tenant is configured. Could you check a couple of things for me:

• Could you try logging in to your app and look at your network panel in dev tools and tell me what response you get from the POST to oauth/token?
• Could you look at "Application Properties" in your application settings in your tenant and tell me what "Application Type" and "Token Endpoint Authentication Method" are set to (they should be Single Page Application and none respectively)
• Could you check your tenant logs for any errors

[MuddyBootsCode]

1. This is the request and response I'm receiving from the post request.
   Request

{
"redirect_uri":"http://localhost:3000",
"client_id:<MY_CLIENT_ID>,
"code_verifier":<CODE_VERIFIER>,
"grant_type":"authorization_code",
"code":<CODE>
}

Response:

{
  error: "access denied",
  error_description: "Unauthorized"
}

2. Here's a screen shot of the Application Properties. I'm unable to select "none" as an option for token endpoint authentication method as it's disabled.

3. Error log:

{
  "date": "2020-08-13T10:48:24.058Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "<CLIENT_ID>",
  "client_name": null,
  "ip": "186.120.54.222",
  "user_agent": "Firefox 78.0.0 / Mac OS X 10.15.0",
  "details": {
    "code": "*************WPk"
  },
  "hostname": "<MY_HOST>",
  "user_id": "",
  "user_name": "",
  "log_id": "90020200813104825530000232057429344015074644949263712274",
  "_id": "90020200813104825530000232057429344015074644949263712274",
  "isMobile": false
}

Logs:

[adamjmcgrath]

Thanks for the detailed response @MuddyBootsCode!

It looks like we have an issue with our tenant dashboard configuration. An "Application Type" of "Single Page Application" should not have "Token Endpoint Authentication Method" set to "POST" (it should be set to "None") - this is why you are getting 401 Unauthorized from the oauth/token endpoint.

Can you try and toggle the "Application Type" to something else, then back to "Single Page Application" and make sure that the settings look like:

In the meantime - I'll raise an issue internally to find out why you got that incorrect configuration in your tenant

Lastly can you confirm if this is your "Default App"?

[MuddyBootsCode]

I was able to change the Token Endpoint Authentication to "None", after changing the application type to another option. I can confirm that it is my default app. I made the change and that has allowed the App to work and login and out correctly.

[adamjmcgrath]

Thanks @MuddyBootsCode! I think a few users are effected by this, so I'm going to leave this issue open until we can resolve the dashboard configuration issue internally.

[skipjack]

"Token Endpoint Authentication Method" defaulted to POST for me as well. Following along some of the other threads (#82 and some of the others linked from there), I changed it to None by switching the application type, changing the method then switching application type back.

Oddly enough though, this wasn't the cause for isAuthenticated staying false for me after many successful logins. I had a Redirect in development and commenting that out fixed the issue (finally seeing isAuthenticated as true along with my user data)...

                    {/*<Redirect
                        exact={true}
                        from="/"
                        to={!inProduction ? '/rundown' : '/about'}
                    />*/}

@adamjmcgrath does it make sense that a redirect would break the auth flow? The component I'm logging from is always mounted (i.e. the redirect has no affect on it).

My session isn't persisting across refreshes either yet so I still need to figure that piece out (and reimplement the redirect). All this said, I'm still loving Auth0 and I appreciate the work that's been done on this package to make it (almost) seamless for react users.

[skipjack]

An update: sessions were persisting through refreshes just not with the default google connection. That thread seems to have a good resolution in terms of not using the dev keys, maybe those settings or the quick start docs can be updated to mention that limitation of the default google setup.

Haven't figured out the redirect issue yet, so any thoughts on that front would be still be useful. Happy to create a separate issue so as not to pollute this thread anymore if you'd like.

[DevonYarbrough]

Also experiencing this issue. After a successful universal login the user is redirected to the app
isloading is false
isAuthenticated is false
user is undefined

After page reload isAuthenticated is true and the user is properly fetched. Using "@auth0/auth0-react": "^1.1.0"

This occurs on both Safari and Chrome.

[vibaiher-qatium]

We are experimenting same issue than @DevonYarbrough. We are using passwordless (link) integration.

[adamjmcgrath]

Hi @vibaiher-qatium @DevonYarbrough - it looks like your client is misconfigured - have look at the advice in #93 (comment)

@skipjack feel free to raise a different issue if the problem you're having has not been resolved by #93 (comment)

[vibaiher-qatium]

I've checked the configuration, it looks like #93 comment. I think it's related with: auth0/auth0-spa-js#564 (comment), I can open a new issue if you want.

[DevonYarbrough]

Hi @adamjmcgrath,

Appreciate the response. The token endpoint authentication method is set to "None" in the dashboard (In fact, it is disabled and none is selected, so there is no option to change it to anything else. I'm assuming this is because it's a Single Page Application).

[pbonneville]

Also experiencing this issue. After a successful universal login the user is redirected to the app
isloading is false
isAuthenticated is false
user is undefined

After page reload isAuthenticated is true and the user is properly fetched. Using "@auth0/auth0-react": "^1.1.0"

This occurs on both Safari and Chrome.

Same thing is happening for me. Successful Universal Login via Google Social, redirects to my site using "@auth0/auth0-react": "^1.1.0", isAuthenticated is false. If I refresh my browser, isAuthenticated is true and my routing works.

[EddieGr]

Hi guys. Does anyone have a solution for this yet? Even after I refresh the page, isAuthenticated always stays false after 2 renders, no matter what I do for the single page application. I followed the tutorial on the site, and 'none' is ticked for the "Token Endpoint Authentication" Method in the settings. This is however not the default app.

[adamjmcgrath]

Hi @EddieGr - have a look at the FAQs on "User is not logged in after page refresh" https://github.com/auth0/auth0-react/blob/master/FAQ.md#1-user-is-not-logged-in-after-page-refresh

If you're still seeing an issue, please raise a new bug.

The issue in our Dashboard that required the workaround in #93 (comment) is now fixed, so I'm going to close this bug.