如何使用Auth0-react SDK处理深度链接

Question

我使用的是Auth0-react sdk，这是react-auth0-spa.js的新版本。

在用户重定向到Auth0登录之前，我试图将用户重定向到浏览器中输入的原始URL。

过程如下:

1. 用户在浏览器中输入一个特定的url(例如https://example.com/products/list/items)并按enter
2. 网站将用户重定向到Auth0域登录
3. 用户输入凭据并成功登录
4. 在这个阶段，用户应该被重定向到https://example.com/products/list/items，而不是直接去https://example.com

我按照说明从Auth0官方网站设置SDK应用

下面是我的代码:

import { Auth0Provider } from "@auth0/auth0-react";
ReactDOM.render(
<Auth0Provider
domain="YOUR_DOMAIN"
clientId="YOUR_CLIENT_ID"
redirectUri={window.location.origin}
audience="YOUR_AUDIENCE_URL"
>
<App />
</Auth0Provider>,
document.getElementById("root")

虽然文档使用了一个可点击按钮登录的示例，但我有一个触发登录函数的组件:

import { useAuth0 } from '@auth0/auth0-react';
const LogIn = () => {
const { loginWithRedirect } = useAuth0();
React.useEffect(() => {
loginWithRedirect()
})
return false;
};
export default LogIn;

阅读一些文档，我发现handleRedirectCallback，理论上应该作为useAuth0内的方法可用。目前，上面的登录，不做深度链接重定向，我没有看到一个例子为auth0-react如何使用handleRedirectCallback。我想知道是否有人可以建议我可以使用React SDK。

提前感谢。乔

Answer 1

这可能不是你要找的，但是这个问题的答案帮助我解决了一个类似的问题(我在使用这个回调处理程序时得到了There are no query params available for parsing.)。

而不是告诉Auth0导航到/callback路由并处理那里的重定向(这导致了我的no query params问题)，解决方案是添加一个回调函数作为onRedirectCallbackprop到Auth0Provider组件，它将导航到您想要的任何地方。例如:

const onRedirectCallback = appState => {
navigate(appState?.returnTo || window.location.pathname, { replace: true });
};