React应用中Okta授权码（非PKCE）流实现问题求助

问题 #

在React应用中使用okta-react库实现**授权码（非PKCE）**授权类型登录时遇到问题，当前配置如下：

App.tsx 配置 #

const oktaAuth = new OktaAuth({
  issuer: 'https://xxxxxxxxxx.com/oauth2/default',
  clientId: 'xxxxxxxxxxxxx',
  redirectUri: window.location.origin + '/welcome-back',
  pkce: false,
  responseType: 'code',
  devMode: true
});

function App() {
  const history = useHistory();
  const restoreOriginalUri = async (_oktaAuth: any, originalUri: string) => {
    history.push(toRelativeUrl(originalUri || '/', window.location.origin));
  };
  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <NavigationDispatcher/>
    </Security>
  );
}

NavigationDispatcher 路由配置 #

<>
    <Route path="/" component={HomepageView}/>
    <SecureRoute path="/secure-view" component={SecureView}/>
    <Route path='/welcome-back' component={LoginCallback}/>
</>

当前现象：访问/secure-view时会正常跳转到Okta Hosted UI完成登录，但登录后跳转至/welcome-back页面时，通过useOktaAuth获取的authState全部为undefined，仿佛用户从未登录。跳转后的URL中存在code参数，可在Postman中通过该参数在授权服务器的/token端点成功获取访问令牌，但预期okta-auth-js库会自动处理完整授权流程。

需要解决两个问题：

1. 如何正确实现授权码流？
2. 用户登录后是否应该跳转回原本试图访问的页面，而非默认的重定向URI？

解决方案 #

1. 修复授权码流自动处理失效问题 #

authState为undefined的核心原因是：非PKCE模式的授权码流需要客户端密钥，但前端无法安全存储密钥，okta-auth-js默认不会在前端处理这种模式的code换token流程（避免密钥暴露风险）。

解决思路分两种：

• 若必须用非PKCE模式：需搭建后端服务，由后端完成code换token的请求（后端安全存储客户端密钥）。前端在/welcome-back页面把URL中的code传给后端，后端拿到令牌后返回给前端，前端再手动调用oktaAuth.handleLoginRedirect()或直接将令牌写入authState。
• 更推荐的方案：切换为PKCE模式（将配置中的pkce: false改为pkce: true）。这是前端应用的标准安全模式，okta-auth-js会自动完成code换token的全流程，无需额外后端，配置后LoginCallback组件会自动处理授权码并更新authState。

2. 登录后跳转回原访问页面 #

你的代码已经配置了restoreOriginalUri函数，这个函数的作用就是登录完成后跳转回用户原本试图访问的页面，只要确保两点即可正常工作：

• 在PKCE模式下，LoginCallback组件会自动触发restoreOriginalUri，读取跳转时携带的state参数（里面存了原页面地址），完成跳转。
• 若用非PKCE模式，后端完成令牌获取后，需要手动读取URL中的state参数，再跳转回原页面。

内容的提问来源于stack exchange，提问作者L_Cleo