Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isAuthenticated and user are null after login #93

Closed
MuddyBootsCode opened this issue Aug 12, 2020 · 17 comments
Closed

isAuthenticated and user are null after login #93

MuddyBootsCode opened this issue Aug 12, 2020 · 17 comments

Comments

@MuddyBootsCode
Copy link

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
Copy link

narciero commented Aug 12, 2020

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

@anthonycole
Copy link

anthonycole commented Aug 12, 2020

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

@adamjmcgrath
Copy link
Contributor

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
Copy link
Author

MuddyBootsCode commented Aug 13, 2020

  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"
}
  1. 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.

Screen Shot 2020-08-13 at 6 53 43 AM

  1. 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:
Screen Shot 2020-08-13 at 7 13 24 AM

@adamjmcgrath
Copy link
Contributor

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:

image

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
Copy link
Author

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
Copy link
Contributor

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
Copy link

"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
Copy link

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
Copy link

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
Copy link

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

@adamjmcgrath
Copy link
Contributor

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
Copy link

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
Copy link

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
Copy link

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
Copy link

EddieGr commented Oct 26, 2020

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants