Dispatch action on Auth0's lock.on('authenticated') event

Question

I want to implement the new Auth0 Lock 10 in my React/Redux app.

I've checked on the internet, but nothing matches my question. There's a tutorial here, but it uses the Popup mode instead of the Redirect (default now) mode. Another one parses the url, which is useless in Lock 10.

Here's the flow:

• The Auth0Lock gets instantiated when my app starts
• When the user clicks on the login button, it shows the Lock widget (lock.show()) and dispatches LOGIN_REQUEST
• The lock does its authentication on auth0.com (redirects out of my localhost)
• Redirect back to my localhost after successful login, the Auth0Lock get instantiated again
• I wait for an lock.on('authenticated') event to dispatch LOGIN_SUCCESS

And here is my actions/index.js code:

import Auth0Lock from 'auth0-lock'

export const LOGIN_REQUEST = 'LOGIN_REQUEST'
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const LOGIN_ERROR = 'LOGIN_ERROR'

function loginRequest() {
  return {
    type: LOGIN_REQUEST
  }
}

function loginSuccess(profile) {
  return {
    type: LOGIN_SUCCESS,
    profile
  }
}

function loginError(error) {
  return {
    type: LOGIN_ERROR,
    error
  }
}

// import AuthService to deal with all the actions related to auth
const lock = new Auth0Lock('secret', 'secret', {
  auth: {
    redirectUrl: 'http://localhost:3000/callback',
    responseType: 'token'
  }
})

lock.on('authenticated', authResult => {
  console.log('Im authenticated')
  return dispatch => {
    return dispatch(loginSuccess({}))
  }
})

lock.on('authorization_error', error => {
  return dispatch => dispatch(loginError(error))
})


export function login() {
  lock.show()
  return dispatch => {return dispatch(loginRequest())}
}

Now when I click on the login button, redux logger shows me LOGIN_REQUEST action dispatched, I see the lock widget, I can login, it redirects to auth0.com then back to my localhost:3000/callback with a pretty token. Everything is fine, I see the Im authenticated message in my console, but redux logger doesn't show me that the LOGIN_SUCCESS action has been dispatched.

I'm new to Redux, and I guess I'm missing one thing, but I cannot get grab of it. Thanks!

Answer 1

I finally put in inside actions.js, I created a new function called checkLogin()

// actions.js

const authService = new AuthService(process.env.AUTH0_CLIENT_ID, process.env.AUTH0_DOMAIN)

// Listen to authenticated event from AuthService and get the profile of the user
// Done on every page startup
export function checkLogin() {
  return (dispatch) => {
    // Add callback for lock's `authenticated` event
    authService.lock.on('authenticated', (authResult) => {
      authService.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error)
          return dispatch(loginError(error))
        AuthService.setToken(authResult.idToken) // static method
        AuthService.setProfile(profile) // static method
        return dispatch(loginSuccess(profile))
      })
    })
    // Add callback for lock's `authorization_error` event
    authService.lock.on('authorization_error', (error) => dispatch(loginError(error)))
  }
}

And in the constructor of my App component, I call it

import React from 'react'
import HeaderContainer from '../../containers/HeaderContainer'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.props.checkLogin() // check is Auth0 lock is authenticating after login callback
  }

  render() {
    return(
      <div>
        <HeaderContainer />
        {this.props.children}
      </div>
    )
  }
}

App.propTypes = {
  children: React.PropTypes.element.isRequired,
  checkLogin: React.PropTypes.func.isRequired
}

export default App

See here for full source code: https://github.com/amaurymartiny/react-redux-auth0-kit

Answer 2

My Reactjs knowledge is limited, but this was starting to be to long for a comment...

Should you not be calling store.dispatch(...) from the lock events?

Having those events return a function won't do anything unless someone invokes the function that is returned and to my knowledge Lock does not do anything with the return value of the callback function you pass as an event handler.