# Why is authState (useOktaAuth react hook) seemingly undefined in useEffect?

**URL:** <https://devforum.okta.com/t/why-is-authstate-useoktaauth-react-hook-seemingly-undefined-in-useeffect/15209>\
**Category:** Questions\
**Tags:** reactjs\
**Created:** [July 21, 2021, 1:00am UTC](https://devforum.okta.com/t/why-is-authstate-useoktaauth-react-hook-seemingly-undefined-in-useeffect/15209 "2021-07-21T01:00:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![czbaker](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@czbaker](https://devforum.okta.com/u/czbaker)\
**Post date:** [July 21, 2021, 1:00am UTC](https://devforum.okta.com/t/why-is-authstate-useoktaauth-react-hook-seemingly-undefined-in-useeffect/15209/1 "2021-07-21T01:00:55Z")

</div>

This is a sort of follow-up to a previous question.

I’ve been working on building my first app with `@okta/okta-react` and TypeScript over the past few days…but I’ve run into an issue I don’t know how to solve.

I’ve followed the docs to “get user info” and set up the `useOktaAuth()` hook with `useEffect` and `useState`.

According to docs and this code I’ve written, I should be able to keep an eye on `authState` and `oktaAuth` from the appropriate hook and use the `oktaAuth` instance to set proper state when the user logs in.

However, even when the user logs into the app this does not happen, authState is **always** undefined according to `useEffect`, and I can’t get it to render the component (I’ve set up conditional rendering to omit the component if the user isn’t logged in.

What am I doing wrong here?

The only modifications I had to make are as follows:

- Authored a `UserInfo` interface with optional fields to hold the user info that comes from Okta, because I kept getting a `null` related error if I didn’t.
- Added a check for `!authState` to the beginning of `useEffect` because I would consistently get an error that stated the component was unable to find `isAuthenticated` on an undefined object.
- Set both the initial userInfo state AND unauthorized state (in the effect) to an empty object intsead of `null` to prevent errors.

Code I am currently using is as follows:

```auto
import React, { useState, useEffect } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import { Dropdown } from 'semantic-ui-react';

import { UserInfo } from '../../interfaces/UserInfo';

export const HeaderUserMenu = () => {

    // Okta and State hooks
    const { authState, oktaAuth } = useOktaAuth();
    const [userInfo, setUserInfo] = useState<UserInfo>({});

    // Log current user data
    const logUser = () => {
        console.log(userInfo);
    }

    // Watch the auth state and user info for changes, update state.
    useEffect(() => {
        if (!authState || !authState.isAuthenticated) {
            setUserInfo({});
        } else if (authState && authState.isAuthenticated) {
            oktaAuth.getUser((info: UserInfo) => { 
                console.log(info);
                setUserInfo(info); 
            })
        }
    }, [authState, oktaAuth]);

    // If we have an empty user object, return nothing, otherwise...
    if (Object.keys(userInfo).length === 0) {
        return null;
    } else {
        return (
            <Dropdown item text={userInfo.name}>
                <Dropdown.Item onClick={logUser}>Log User</Dropdown.Item>
            </Dropdown>
        )
    }

}

```

According to the docs and as far as I can tell, this should be working fine. The problem I keep having is that when the component renders, both `authState` and `oktaAuth` are undefined and even when logging in, `authState` stays undefined for all intents and purposes.

I have literally no idea what I could be doing wrong.

Would appreciate any guidance or advice. Thanks.

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [February 8, 2024, 6:49pm UTC](https://devforum.okta.com/t/why-is-authstate-useoktaauth-react-hook-seemingly-undefined-in-useeffect/15209/2 "2024-02-08T18:49:12Z")

</div>