如何将 Auth0 与 react-admin 一起使用？

Question

我正在尝试在 react-admin v3 应用程序中使用 Auth0 实现身份验证。我需要实现一个authProvider与 Auth0 对话的对象。这听起来像是应该在某处可用的东西，但我能找到的最接近的是https://github.com/alexicum/merge-admin/blob/master/src/Auth/index.js，它大约有 2 岁（从那时起，SDK 发生了变化）。

是否有 Auth0 authProvider 可以重用的地方，还是我必须自己实现？

谢谢！

Answer 1

作为参考，这里有一个将 react admin 与 auth0-react 包集成的示例

索引.js

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

ReactDOM.render(
  <Auth0Provider
    domain="XXXXX.auth0.com"
    clientId="XXXXX"
    audience="https://XXXXX"
    redirectUri={window.location.origin}
  >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Auth0Provider>,
  document.getElementById("root")
);

应用程序.js

import { withAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
import ApolloClient from "apollo-boost";

// I'm using Hasura w/ JWT Auth, so here's an example of how to set Authorization Header
async componentDidMount() {
    const token = await this.props.auth0.getAccessTokenSilently();

    const client = new ApolloClient({
      uri: "https://HASURA_URL/v1/graphql",
      headers: {
        Authorization: `Bearer ${token}`
      },
    });

    buildHasuraProvider({ client }).then((dataProvider) =>
      this.setState({ dataProvider })
    );
  }

export default withAuthenticationRequired(withAuth0(App));

Answer 2

使用 auth0 原生登录来包装react-admin应用程序会更方便，然后为react-admin提供dataProvider一个http客户端，该客户端读取auth0存储在本地存储中的jwt令牌。