AuthState is always null after Login is completed successfully

Questions OAuth/OIDC
1

I using a react app with okta/okta-react: 6.7.0 I am having trouble making this work. I looked at a lot of posts and tried a lot of things but most seem older and do work for me. I am able to get to the Login Screen and login correctly. The Code calls my LoginCallbackPage but authState is always null.

Below is the code from my code: App.tsx, ProtectedRoute.tsx, and LoginCallbackPage.tsx:

App.tsx:
import oktaAuthConfig from “./okta.config”; // Import Okta configuration

interface Props {
baseUrl: string;
}

const App = (props: Props) => {
const { baseUrl } = props;

const useAuthRequired = () => {
    const navigate = useNavigate();
    navigate('/login');
};

const restoreOriginalUri = async (_oktaAuth:any, originalUri:any) => {
    return originalUri || "/claimlookup";
};

return (



<Route path=“/” element={} />
<Route path=“/childlookup” element={<ProtectedRoute originalUri=“/childlookup” element={} />} />
<Route path=“/login” element={} /> {/* Okta Login route /}
<Route path=“/login/callback” element={} /> {/ Okta Login callback route /}
<Route path=“/logout” element={} />
{/ Add more routes for other pages or components */}



);
};

ProtectedRoute.tsx:
import React, { useEffect, useState } from ‘react’;
import { useOktaAuth } from “@okta/okta-react”;
import { Route, Navigate } from ‘react-router-dom’;

interface Props {
originalUri: string;
element: React.ReactNode;
}

// Protected route component
const ProtectedRoute = (props: Props): JSX.Element => {
const {originalUri, element } = props;
const { oktaAuth, authState } = useOktaAuth();

useEffect(() => {
    if (authState?.isAuthenticated === false) {
        oktaAuth.setOriginalUri(originalUri);
        oktaAuth.signInWithRedirect();
    }
}, [oktaAuth, authState?.isAuthenticated])


if (authState?.isAuthenticated === true) {
    const token: string = authState.idToken?.idToken || "";
    localStorage.setItem("token", token);
    localStorage.setItem("originalUri", originalUri); // Store the original URI
    return element as JSX.Element;
}
else {
    localStorage.removeItem("token");
    localStorage.removeItem("originalUri");
    return <Navigate to="/login" />;
}

};
export default ProtectedRoute;
export { };

LoginCallbackPage.tsx:
import React, { useEffect } from ‘react’;
import { LoginCallback as OktaLoginCallback } from ‘@okta/okta-react’;
import oktaAuth from ‘…/…/okta.config’; // Import your Okta configuration
import { useOktaAuth } from “@okta/okta-react”;

const LoginCallbackPage = () => {
const { oktaAuth, authState } = useOktaAuth();

useEffect(() => {
    if (authState?.isAuthenticated === true) {
        
            // Redirect to the original URL or a default route
            const originalUri = oktaAuth.getOriginalUri() || "/";
            window.location.replace(originalUri);
    }
}, [oktaAuth, authState?.isAuthenticated]);

const token: string = localStorage.getItem("token") || "";
const originalUri: string = localStorage.getItem("originalUri") || "";
if (token.length > 0) {
    if (originalUri.length > 0) {
        window.location.replace(originalUri);
    } else {
        window.location.replace("/home");
    }
}
return <div>Loading...</div>;

};
export default LoginCallbackPage;

2

Well after more work on this, I discovered that I need to replace the line "return <div>Loading...</div>" with the line "return <OktaLoginCallback>;" This is correctly defined in the imports line in the existing code.