Auth0 lock.on event dispatch action ('authenticated')

Question

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

I checked online, but nothing matches my question. There's a tutorial there , but it uses Popup mode instead of Redirect mode (default). The other one parses a URL that is useless in Lock 10.

Here's the thread:

• Auth0Lock gets an instance when the application starts
• When the user presses the login button, he shows the Lock widget ( lock.show() ) and sends LOGIN_REQUEST
• The lock does its authentication on auth0.com (redirects from my localhost)
• Transfer back to my local host after successful login, create an Auth0Lock instance again
• I am waiting for the lock.on('authenticated') event to send LOGIN_SUCCESS

And here are 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, the regressing logger shows me the logical action LOGIN_REQUEST sent, I see the lock widget, I can log in, it redirects to auth0.com and then back to my localhost:3000/callback with a nice token . Everything is fine, I see the Im authenticated message in my console, but the logger registry does not show me that the LOGIN_SUCCESS action was sent.

I'm new to Redux, and I think I'm missing one thing, but I can't grab it. Thanks!

Answer 1

I finally inserted 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 `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 `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 full text: https://github.com/amaurymartiny/react-redux-auth0-kit

Answer 2

My Reactjs knowledge is limited, but it has become long for comment ...

Should you not call store.dispatch(...) from lock events?

When these events return, the function will do nothing unless someone calls the returned function and, as far as I know, Lock does nothing with the return value of the callback function that you pass as the event handler.

Answer 3

I think what happens when auth0 redirects the browser window to the authorization center (auth0 itself, Facebook, Google, etc.), then redirects you back to your application, which reloads your page, essentially destroying all state. Thus, your sending is sent, then the page is reloaded, which wipes your state. Login appears if you use localStorage instead of redux state, but I'm not sure how this will affect all other states that I need to put in my application.