Okta-react how to authenticate at startup

I’ve tried many methods of trying to authenticate (login) when a react app starts up. I’ve tried with okta-react 5.x and 6.0, but no luck. I only get authenticated when routing to a secure route.

Maybe there is some configuration setting to force login immediately? I didn’t see anything like that.

When I use “await oktaAuth.signInWithRedirect()” within useEffect in my parent app.js component, I just get a message that oktaAuth is null.

My next step is to place this signInWithRedirect logic below in my layout component, also referenced below.

// const oktaOidcConfig = buildOktaConfig(config.OKTA_CLIENT_ID, config.OKTA_ISSUER, config.OKTA_REDIRECT_PATH, config.OKTA_SCOPES);
const oktaOidcConfig = AuthService.buildOktaConfig(process.env.REACT_APP_OKTA_CLIENT_ID, process.env.REACT_APP_OKTA_ISSUER, process.env.REACT_APP_OKTA_REDIRECT_PATH, process.env.REACT_APP_OKTA_SCOPES);
const oktaAuth = new OktaAuth(oktaOidcConfig);

const App = () => {

  // Allow redirect to users entry page after authentication
  const history = useHistory();
  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
    history.replace(toRelativeUrl(originalUri, window.location.origin));

  const { _oktaAuth, authState } = useOktaAuth();
  useEffect(() => {
    if (!authState?.isAuthenticated) {
      const login = async () => {
        await _oktaAuth.signInWithRedirect();
  }, [authState?.isAuthenticated, _oktaAuth])

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <React.Suspense fallback={loadingSpinner}>
            <SecureRoute path="/" exact={true} component={Home} />
            <SecureRoute path="/profile" exact={true} component={Profile} />
            <Route path="/login/callback" component={LoginCallback} />

After some more reading, I’m thinking if I want to do this then there is no need for okta-react and just to use okta-auth-js. I’m going to experiment with that now and will update this thread.