如何实现Auth0登录后重定向回React用户初始访问的页面？

核心思路 #

不再硬编码固定回调URL，而是在用户触发登录跳转时动态获取当前访问的路径，将其作为Auth0登录的redirectUri参数，登录完成后Auth0会自动跳回该路径。

具体实现步骤 #

1. 改造Auth0RedirectWrapper组件

利用React Router的useLocation获取当前路径，结合Auth0-react的loginWithRedirect方法传递动态回调地址：

import { useLocation } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import { ReactElement, ReactFragment } from 'react';

function Auth0RedirectWrapper({ children }: { children: ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment; }) {
  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
  const location = useLocation();

  // 等待Auth0认证状态加载完成
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 未认证时，携带当前路径跳转至Auth0登录页
  if (!isAuthenticated) {
    // 拼接完整的回调地址：域名+当前路径+查询参数（如果有的话）
    const redirectUri = `${window.location.origin}${location.pathname}${location.search}`;
    loginWithRedirect({ redirectUri });
    return null;
  }

  // 已认证则渲染受保护的路由内容
  return <>{children}</>;
}

2. 配置Auth0控制台允许动态回调路径

登录Auth0控制台，找到你的应用，在应用设置的Allowed Callback URLs中添加支持通配符的路径，比如：

• 开发环境：http://localhost:3000/user/*
• 生产环境：https://你的域名/user/*

Auth0支持通配符匹配，这样所有/user/开头的路径都能作为合法回调地址。

额外说明 #

• 如果需要保留用户访问时的查询参数，代码中已经包含了location.search的拼接，确保跳转后参数不丢失。
• 必须处理isLoading状态，避免在Auth0还未返回认证状态时出现不必要的渲染错误。

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