未捕获“身份验证”事件的React应用程序中的Auth0 Lock v11

Question

我试图在一个Lock v11应用程序中实现React，在用户登录之后，即使我点击了事件侦听器，事件类型是authenticated，回调函数也不会被调用来处理令牌。

这里是我的App.jsx，我在这里初始化Auth0 Lock并等待authenticated事件。知道我的听众为什么不工作吗？为了进一步澄清这一点，我在代码中添加了debugger。在成功的用户登录之后，我确实访问了第一个debugger，而不是第二个。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import Auth0Lock from 'auth0-lock';

// Actions
import * as appActions from '../actions/app-actions';

// Components
import Home from './home/Home';
import Public from './public/Public';

class App extends Component {

    lock = new Auth0Lock('my_auth0_client_id', 'my_domain.auth0.com', {
        auth: {
            audience: 'https://my_backend_api_url/',
            redirectUrl: 'http://localhost:3000',
            responseType: 'token id_token',
            sso: false
        }
      });

    constructor(props) {

        super(props);
        this.onAuthenticated = this.onAuthenticated.bind(this);
        this.isAuthenticated = this.isAuthenticated.bind(this);

        this.onAuthenticated();
    }

    onAuthenticated() {
        debugger; // After successful login, I hit this debugger
        this.lock.on('authenticated', (authResult) => {
            debugger; // But I never hit this debugger
            let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
            sessionStorage.setItem('access_token', authResult.accessToken);
            sessionStorage.setItem('id_token', authResult.idToken);
            sessionStorage.setItem('expires_at', expiresAt);

          });
    }

    isAuthenticated() {

        if(!sessionStorage.getItem("access_token") || !sessionStorage.getItem("id_token") || !sessionStorage.getItem("expires_at"))
            return false;

        const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
        return new Date().getTime() < expiresAt;
    }

    render() {

        const isAuthenticated = this.isAuthenticated();

        return (
            <div>
                <Switch>
                    <Route exact path="/" render={props => isAuthenticated ? <Home {...props} /> : <Redirect to="/public" />} />
                    <Route path="/public">
                        <Public lock={this.lock} />
                    </Route>
                </Switch>
            </div>
        );
    }
}

function mapStateToProps(state) {

    return {
        isAuthenticated: state.app.isAuthenticated
    };
}

function mapDispatchToProps(dispatch) {

    return {

        actions: bindActionCreators(appActions, dispatch)
    };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

Answer 1

我是康拉德，我是Auth0社区工程师，让我帮你！看看这篇关于Lock的文档及其第一段：

https://auth0.com/docs/libraries/lock/v11/configuration

您似乎需要初始化Lock in索引文件，并根据以下文档进行判断：

https://auth0.com/docs/libraries/lock/v11/api#on-

侦听器应该放在您初始化Lock的文件中。

Answer 2

authLock对象需要在类之外初始化，因此不仅可以在索引中声明它。

然而，要在多个页面/组件中使用注销，您需要公开它。比起全局变量，我更喜欢redux。

如果需要在单个位置使用对象，则为，

const authLockOptions: Auth0LockConstructorOptions = {
  allowSignUp: false,
  languageDictionary: { title: 'empty if you don't want title' },
  theme: {
    primaryColor: '#333435',
    logo: 'https://your-logo-url.com',
  },
};
const domain = process.env.AUTH0_DOMAIN || '';
const clientId = process.env.AUTH0_CLIENT_ID || '';
const authLock = new Auth0Lock(clientId, domain, authLockOptions);

export class LoginViewClass extends React.Component<LoginViewProps<BaseProps>, LoginViewState> {
  private authLock?: Auth0LockStatic;

  constructor(props: LoginViewProps<BaseProps>) {
    super(props);

    this.initializeAuthentication();
  }

  private initializeAuthentication = (): void => {
    authLock.on('authenticated', (authResult: any) => {
      // call authentication function;
    });

    authLock.show();
  };

  render(): React.ReactNode {
    return <div className='login'></div>;
  }
}

，或者，如果您需要从多个地方调用注销，

// if you are using TypeScript, Auth0LockStatic is the typeof authLock object
export type YourStore = {
  authLock: Auth0LockStatic;
  // ...
};

// start the authLock when creating the DefaultStore
export const DefaultStore: YourStore = {
  authLock: new Auth0Lock(clientId, domain, authLockOptions),
  // ...
};

// in case you use reducer
const rootReducer = combineReducers({
  // other reducers
  authLock: (state = {}) => state,
});

将其添加到redux存储区后，您可以连接反应-还原( mapStateToProps )或反应-还原( useSelector )，并按自己的意愿使用它。

  authLock.on('authenticated', (authResult: any) => {
    // add your authentication functionality like dispatching the authentication
  });

  authLock.show();