8o104 (8o104) asked a question.
I have created react application and using okta sample provided at below for login using okta.
https://developer.okta.com/code/react/okta_react/*add-an-openid-connect-client-in-okta
I am able to login to application successfully from my application by entering credentials explictly and click on login button.
but if i login to okta dev account and then if I navigate to my application my application is not recognizing the existing session.
import React, { useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import { useSelector, useDispatch } from "react-redux";
import OktaSignInWidget from '../../Shared/oktaSignInWidget/OktaSignInWidget';
import { useOktaAuth } from '@okta/okta-react';
import * as sharedActions from '../../Shared/data/actions';
const Login = ({ config }) => {
const { oktaAuth, authState } = useOktaAuth();
const dispatch = useDispatch();
useEffect(() => {
dispatch(sharedActions.setCurrentComponent('login'));
// console.log('authState.isPending :', authState.isPending);
// console.log('authState.isAuthenticated :', authState.isAuthenticated);
}, []);
useEffect(() => {
if (!authState.isPending) {
console.log(' authState.isPending :', authState.isPending);
console.log(' authState.isAuthenticated :', authState.isAuthenticated);
}
}, [authState]);
const onSuccess = (tokens) => {
console.log('tokens :', tokens);
oktaAuth.handleLoginRedirect(tokens);
};
const onError = (err) => {
console.log('error logging in', err);
};
if (authState.isPending) return null;
return authState.isAuthenticated ?
<Redirect to={{ pathname: '/' }} /> :
<OktaSignInWidget
config={config}
onSuccess={onSuccess}
onError={onError} />;
};
export default Login;
Hello,
When you login to your Okta Org the Okta session is set as a cookie for the domain you used to login (either a custom domain if setup, or the Okta domain *.okta.com / *.oktapreview.com)
For the Okta React SDK, the authState.isAuthenticated is true if both an id_token and access_token are present in the token store (local storage by default) and both are valid.
After logging into the Okta domain, you have the Okta session cookie, but when navigating to your React app there will be no tokens stored. To perform an SSO with your SPA application you would use the sessions API to check for the existence of an Okta session. For example in your oktaAuth instance you could check for the existence of a session when your application first loads, and do a getWithoutPrompt() if so
oktaAuth.session.exists()
.then(res => {
oktaAuth.token.getWithoutPrompt({
responseType: ['id_token', 'token']
})
.then(res => {
oktaAuth.tokenManager.setTokens(res.tokens);
})
.catch(err => {
console.log(err);
})
})
.catch(err => {
console.log(err);
})
Note the sessions API does require 3rd party cookies unless you are using a custom domain and the React app is running in the same domain as your Okta Org.
Hope this helps,