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();
}
login()
}
}, [authState?.isAuthenticated, _oktaAuth])
return (
<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
<Layout>
<React.Suspense fallback={loadingSpinner}>
<Switch>
<SecureRoute path="/" exact={true} component={Home} />
<SecureRoute path="/profile" exact={true} component={Profile} />
<Route path="/login/callback" component={LoginCallback} />
</Switch>
</React.Suspense>
</Layout>
</Security>
);