amaurymartiny amaurymartiny - 1 month ago 15
React JSX Question

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

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

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

Comments