在反应应用程序中初始化 Auth0 锁的位置

Question

我正在我的 React 应用程序中实现 Auth0 Lock 11。该应用程序还使用 Redux 和 react-router-dom。

我正在尝试按照文档 here 进行操作，但无法正确初始化 Lock。我也对如何检查用户是否经过身份验证感到困惑。在我使用 Lock v9 之前，事情似乎更直观。

我试图实现的一般行为是这样的：

除了 Public 组件
如果用户试图访问受保护的部分，我将 Redirect 用户访问 Public

这是我目前所拥有的。这个文件是我保存所有 Auth0 代码的地方：

import Auth0Lock from 'auth0-lock';

export default class Auth { 

    lock = new Auth0Lock('my_client_id', 'mydomain.auth0.com', {

            auth: {
                audience: 'https://myapi.com',
                redirectUrl: 'http://localhost:3000',
                responseType: 'token id_token',
                params: {
                    scope: 'openid email profile'
                }
            }
        }
    ).on('authenticated', function(authResult) {

        if (authResult && authResult.accessToken && authResult.idToken) {
            this.setSession(authResult);
            // use authResult.idTokenPayload for profile information
        }
    });

    setSession(authResult) {

        debugger
    }

    login() {

        this.lock.show()
    }
}

所以，这是我的问题：

我在哪里初始化Lock？在 App.js?
如果用户未通过身份验证，他将被重定向到 Public 组件。如何从 Public 访问 login() 函数？我知道我可以简单地在组件中引用它，但是不会重新初始化 Lock 吗？

Answer 1

对于这种情况，我的首选方法是将 App 组件包装在提供 AuthContext 的 AuthWrapper 组件中。像这样：

import Auth from "./Auth"

const AuthContext = React.createContext({})

class AuthWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.auth = new Auth()
  }

  login = () => {
    this.auth.login()
  }

  render() {
    return (
      <AuthContext.Provider value={{ login: this.login }}>
        {this.props.children}
      </AuthContext.Provider>
    )
  }
}

const SomeComponent = () => {
  const { login } = useContext(AuthContext)
  return <button onClick={login}>Show Auth</button>
}

如果不清楚请告诉我。

在反应应用程序中初始化 Auth0 锁的位置

Where to initialize Auth0 lock in a react app

reactjs

auth0

auth0-lock