Hello Everyone,
I am new to okta and trying to integrate okta in my application.
I am using below metioned version of okta
“@okta/okta-auth-js”: “6.7.2”,
“@okta/okta-react”: “^6.5.0”,
“@okta/okta-signin-widget”: “^6.4.2”
I am able to login through Okta successfully in the application after “/login/callback” I am redirecting to staff component that is my “/” path .
Below is the code of App.tsx
function App() {
const history = useHistory();
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
history.replace(toRelativeUrl(originalUri || “/”, window.location.origin));
};
const oktaAuthConfig = new OktaAuth(config);
const CALLBACK_PATH = “/login/callback”;
<div className="container">
<Security oktaAuth={oktaAuthConfig} restoreOriginalUri={restoreOriginalUri}>
<Switch>
<Route path={CALLBACK_PATH} exact component={LoginCallback} />
<SecureRoute path="/" exact component={Staff} />
</Switch>
</Security>
</div>
;}
export default App;
But on Staff component, routing is not working, when I click on any link it goes to blank screen. Here is the code of my staff component.
export function Staff() {
<div>
<div>
<ul>
<li>
<Link to="/topics">Topics</Link>
</li>
<li>
<Link to="/home">Home</Link>
</li>
</ul>
<hr />
<Switch>
<Route path="/topics">
<Topics />
</Route>
<Route path="/home">
<Home />
</Route>
</Switch>
</div>
</div>
}
export default Staff;
My main concern is to load the header and footer component only after the user is logged in, and navigation should work through the header part.
Even I tried using useOktaAuth hook on app.tsx to check isAuthenticated but it always returns undefined.
Request you to help me with this.
Thanks in advance.