authStateManager shows authenticated, but authStateManager._authState does not?

Hi all,

Couple things to unpack here - I am using okta-react in a React application, all my log-in stuff is working and whatnot.

In my app, I want to grab the groups my user is in and store them in state (which I am successfully able to do using the claims scope with API, and using oktaAuth.getUser(). Btw, if anyone has a Typescript typing for the response that comes out of getUser(), please let me know).

Currently I check to see if my user is authenticated in order to allow my useEffect hook to go through.

clientID and issuer hidden for obvious reasons

const oktaAuth = new OktaAuth({
    issuer: 'https://URL.okta.com/oauth2/default',
    clientId: 'clientid',
    redirectUri: window.location.origin + '/callback',
    pkce: true
  });

const App = (): JSX.Element => {

   const loggedIn = oktaAuth.authStateManager._authState.isAuthenticated
    console.log(loggedIn)

    useEffect(() => {
        if (!loggedIn) {
        // When user isn't authenticated, forget any user info
         // setUserData(false) blah blah
        } else {
        console.log('getting user data in app.tsx')
        oktaAuth.getUser().then((info: any) => {
            //console.log(info)
           // ... doing stuff with user info
            });
          }
        }, [loggedIn]);

currently, even if I am logged in, I am getting false for isAuthenticated. The weird thing is, if I simply console.log authState, or authStateManager, I can actually see inside that ._authState.isAuthenticated is true. Not sure why it is suddenly changing when after it gets to ._authState

I also am not sure if this is the best way for me to check if i am authenticated in the app level.

any help is greatly appreciated!

here is an image showing the console.log of the following 3 things

  1. oktaAuth.authStateManager._authState.isAuthenticated
  2. oktaAuth.authStateManager._authState
  3. oktaAuth.authStateManager

Okay, I kind of solved my issue but doing this instead -

useEffect(() => {
        oktaAuth.isAuthenticated().then( response => {
            setLoggedIn(response)
        })
        if (!loggedIn) {
        // When user isn't authenticated, forget any user info
        // setData(false) blah blah
        } else {
        console.log('getting user data in app.tsx')
        oktaAuth.getUser().then((info: any) => {

would be great to still get insight as to my earlier issue, and also make sure im doing things right.

Thanks!!

Also, in case anyones wondering, use this for oktaAuth.getUser() response

import { UserClaims } from ‘@okta/okta-auth-js/lib/types/UserClaims’

Cheers!