如何使用Auth0-react SDK实现登录后跳转至原始深度链接

auth0-react 内部已经默认封装了handleRedirectCallback的执行逻辑，不需要你手动调用，只需要通过配置参数存储原始路径、配置回调跳转规则即可实现需求，具体修改步骤如下：

步骤1：修改自动登录组件，存储原始访问路径 #

调用loginWithRedirect时可以传入appState参数，SDK会自动将该状态存储到登录流程的上下文中，登录成功后可以在回调里取出：

import { useAuth0 } from '@auth0/auth0-react';

const LogIn = () => {
  const { loginWithRedirect } = useAuth0();

  React.useEffect(() => {
    loginWithRedirect({
      appState: {
        // 存储当前完整访问路径，包含查询参数、hash
        returnTo: window.location.pathname + window.location.search + window.location.hash
      }
    })
  }, [loginWithRedirect]); // 必须加依赖避免触发死循环

  return null;
};

export default LogIn;

步骤2：配置Auth0Provider的回调跳转逻辑 #

在Auth0Provider中新增onRedirectCallback属性，该方法会在登录回调完成后自动触发，可以直接拿到之前存储的appState执行跳转：

原生JS跳转示例 #

import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.render(
  <Auth0Provider
    domain="YOUR_DOMAIN"
    clientId="YOUR_CLIENT_ID"
    redirectUri={window.location.origin}
    audience="YOUR_AUDIENCE_URL"
    onRedirectCallback={(appState) => {
      // 优先跳转回之前存储的原始路径，兜底跳转到根路径
      window.location.replace(appState?.returnTo || window.location.origin);
    }}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

React Router v6跳转示例 #

如果你的项目用了React Router，可以用路由导航替换原生跳转，避免页面刷新：

import { BrowserRouter, useNavigate } from 'react-router-dom';

// 封装带路由导航的Auth0Provider
const Auth0ProviderWithRouter = ({ children }) => {
  const navigate = useNavigate();
  return (
    <Auth0Provider
      domain="YOUR_DOMAIN"
      clientId="YOUR_CLIENT_ID"
      redirectUri={window.location.origin}
      audience="YOUR_AUDIENCE_URL"
      onRedirectCallback={(appState) => {
        navigate(appState?.returnTo || '/', { replace: true });
      }}
    >
      {children}
    </Auth0Provider>
  );
};

// 根渲染调整为
ReactDOM.render(
  <BrowserRouter>
    <Auth0ProviderWithRouter>
      <App />
    </Auth0ProviderWithRouter>
  </BrowserRouter>,
  document.getElementById("root")
);

注意事项 #

• 需提前在Auth0后台的「Allowed Callback URLs」配置项中，把你使用的redirectUri地址（比如https://example.com）添加到白名单
• 如果是多环境部署，要保证不同环境的redirectUri都在白名单内
• LogIn组件建议放到受保护的路由逻辑中，避免未触发登录校验的情况

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