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

Questions
1

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:

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.