Reactjs 如何使用okta idp启动登录成功登录应用程序

我已经创建了react应用程序，并使用下面提供的okta示例使用okta登录

通过明确输入凭据并单击登录按钮，我可以从我的应用程序成功登录到应用程序

但是，如果我登录到okta dev帐户，然后导航到我的应用程序，我的应用程序将无法识别现有会话

下面是我的登录组件

 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;

import React，{useffect}来自“React”；
从'react router dom'导入{Redirect}；
从“react-redux”导入{useSelector，useDispatch}；
从“../../Shared/OKTASIGNNWIDGET/OKTASIGNNWIDGET”导入OKTASIGNNWIDGET；
从“@okta/okta react”导入{useOktaAuth}；
从“../../Shared/data/actions”导入*作为sharedActions；
常量登录=（{config}）=>{
const{oktaAuth，authState}=useOktaAuth（）；
const dispatch=usedpatch（）；
useffect（（）=>{
分派（sharedActions.setCurrentComponent（'login'）；
//log（'authState.isPending:'，authState.isPending:'）；
//log（'authState.isAuthenticated:'，authState.isAuthenticated）；
}, []);
useffect（（）=>{
如果（！authState.isPending）{
log（'authState.isPending:'，authState.isPending:'）；
log（'authState.isAuthenticated:'，authState.isAuthenticated）；
}
}，[authState]）；
const onSuccess=（令牌）=>{
log（'tokens:'，tokens）；
oktaAuth.handleLoginDirect（代币）；
};
const onError=（err）=>{
log（'error loggin'，err）；
};
if（authState.isPending）返回null；
是否返回authState.isAuthenticated？
:
;
};
导出默认登录；

 useEffect(() => {

    // check to see if the user already has an okta session

    oktaAuth.session.exists().then((response) => {
        console.log(' response : ', response);

        setCheckingSession(false);

        if (response) {

            // oktaAuth.token.getWithRedirect();

            oktaAuth.token.getWithoutPrompt().then((response) => {
                console.log('response tokens : ', response);
                oktaAuth.tokenManager.setTokens(response.tokens);
            });

        }
    });

}, [oktaAuth.session, oktaAuth.token]);