# AuthState is always null after Login is completed successfully

**URL:** <https://devforum.okta.com/t/authstate-is-always-null-after-login-is-completed-successfully/25126>\
**Category:** OAuth/OIDC\
**Created:** [August 23, 2023, 9:06pm UTC](https://devforum.okta.com/t/authstate-is-always-null-after-login-is-completed-successfully/25126 "2023-08-23T21:06:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jman2000](https://avatars.discourse-cdn.com/v4/letter/j/8baadc/32.png) [@jman2000](https://devforum.okta.com/u/jman2000)\
**Post date:** [August 23, 2023, 9:06pm UTC](https://devforum.okta.com/t/authstate-is-always-null-after-login-is-completed-successfully/25126/1 "2023-08-23T21:06:25Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![jman2000](https://avatars.discourse-cdn.com/v4/letter/j/8baadc/32.png) [@jman2000](https://devforum.okta.com/u/jman2000)\
**Post date:** [August 24, 2023, 1:19am UTC](https://devforum.okta.com/t/authstate-is-always-null-after-login-is-completed-successfully/25126/2 "2023-08-24T01:19:43Z")

</div>

`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.`

---

<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 15, 2024, 11:49pm UTC](https://devforum.okta.com/t/authstate-is-always-null-after-login-is-completed-successfully/25126/4 "2024-02-15T23:49:13Z")

</div>