Uncaught TypeError: Cannot read property 'version' of undefined

[andreafalzetti]

I am using the auth0-react-sample/01-Login - with the only change in /utils/AuthService.js instead of using auth0-lock I am using auth0-lock-passwordless.

So my AuthService.js looks like this:

import { EventEmitter } from 'events'
import { isTokenExpired } from './jwtHelper'
import Auth0LockPasswordless from 'auth0-lock-passwordless'
import { browserHistory } from 'react-router'

export default class AuthService extends EventEmitter {
  constructor(clientId, domain) {
    super()
    // Configure Auth0
    this.lock = new Auth0LockPasswordless(clientId, domain, {
      auth: {
        redirectUrl: `${window.location.origin}/login`,
        responseType: 'token'
      }
    })
    // Add callback for lock `authenticated` event
    this.lock.on('authenticated', this._doAuthentication.bind(this))
    // Add callback for lock `authorization_error` event
    this.lock.on('authorization_error', this._authorizationError.bind(this))
    // binds login functions to keep this context
    this.login = this.login.bind(this)
    this.loginEmailCode = this.loginEmailCode.bind(this)
  }

  _doAuthentication(authResult){
    // Saves the user token
    this.setToken(authResult.idToken)
    // navigate to the home route
    browserHistory.replace('/home')
    // Async loads the user profile data
    this.lock.getProfile(authResult.idToken, (error, profile) => {
      if (error) {
        console.log('Error loading the Profile', error)
      } else {
        this.setProfile(profile)
      }
    })
  }

  _authorizationError(error){
    // Unexpected authentication error
    console.log('Authentication Error', error)
  }

  login() {
    // Call the show method to display the widget.
    this.lock.show()
  }

  loggedIn(){
    // Checks if there is a saved token and it's still valid
    const token = this.getToken()
    return !!token && !isTokenExpired(token)
  }

  loginEmailCode(){
    // Ask a user for an email address and send them a one-time passcode to authenticate
    // Here we are also setting the autoclose property to true, meaning once a user is authenticated the lock
    // modal will automatically close.
    this.lock.emailcode({autoclose: true}, this._doAuthentication.bind(this));
  }

  setProfile(profile){
    // Saves profile data to localStorage
    localStorage.setItem('profile', JSON.stringify(profile))
    // Triggers profile_updated event to update the UI
    this.emit('profile_updated', profile)
  }

  getProfile(){
    // Retrieves the profile data from localStorage
    const profile = localStorage.getItem('profile')
    return profile ? JSON.parse(localStorage.profile) : {}
  }

  setToken(idToken){
    // Saves user token to localStorage
    localStorage.setItem('id_token', idToken)
  }

  getToken(){
    // Retrieves the user token from localStorage
    return localStorage.getItem('id_token')
  }

  logout(){
    // Clear user token and profile data from localStorage
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
  }
}

In views/Login/Login.js I have the following:

import React, { PropTypes as T } from 'react'
import {ButtonToolbar, Button} from 'react-bootstrap'
import AuthService from 'utils/AuthService'
import styles from './styles.module.css'
import FontAwesome from 'react-fontawesome'

export class Login extends React.Component {
  static contextTypes = {
    router: T.object
  }

  static propTypes = {
    location: T.object,
    auth: T.instanceOf(AuthService)
  }

  render() {
    const { auth } = this.props
    return (
      <div className={styles.root}>
        <h2>Operations Dashboard</h2>
        <h3>Login with:</h3>
        <ButtonToolbar className={styles.toolbar}>
            <Button bsStyle="primary" onClick={auth.loginEmailCode.bind(this)}>Login</Button>
          </ButtonToolbar>        
      </div>
    )
  }
}

export default Login;

After installing auth0-lock-passwordless with npm install --save auth0-lock-passwordless I get the version 2.2.3 and I run npm start - Loading http://localhost:3000 I get a white screen with the following error stack

index.js?d406:149 Uncaught TypeError: Cannot read property 'version' of undefined
    at eval (eval at <anonymous> (app.js:3186), <anonymous>:149:72)
    at Object.<anonymous> (app.js:3186)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:3150), <anonymous>:13:30)
    at Object.<anonymous> (app.js:3150)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:3144), <anonymous>:14:20)
    at Object.<anonymous> (app.js:3144)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:3138), <anonymous>:14:15)
    at Object.<anonymous> (app.js:3138)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:660), <anonymous>:21:15)
    at Object.<anonymous> (app.js:660)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at Object.<anonymous> (app.js:587)
    at __webpack_require__ (app.js:556)
    at app.js:579
    at app.js:582
(anonymous) @ index.js?d406:149
(anonymous) @ app.js:3186
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous) @ AuthService.js?9b31:3
(anonymous) @ app.js:3150
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous) @ routes.js?f736:3
(anonymous) @ app.js:3144
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous) @ routes.js?3ca5:4
(anonymous) @ app.js:3138
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous) @ app.js?bd9c:10
(anonymous) @ app.js:660
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous) @ app.js:587
__webpack_require__ @ app.js:556
(anonymous) @ app.js:579
(anonymous) @ app.js:582
client.js?3ac5:62 [HMR] connected

Can you please look into this? Am I doing something wrong?

Thanks

[ciokan]

Same issue here. Did you solve it?

[andreafalzetti]

@ciokan yes I did. I figured it out only because I have created a thread in the auth0 forum and they have replied there, sorry if I forgot to paste their answer here, that would have been a good idea:

https://auth0.com/forum/t/lock-passwordless-module-returning-error/4940

In a nutshell, in order to use the lock-passwordless you have to downgrade the auth0-lock to a version lower than 10 (I am using "auth0-lock": "^9.0.1"). Check if they have updated the lock-passwordless before doing this, the issue might be solved now.

[elliotrock]

Ok thanks

[shime]

Facing the same issue, but with auth0-js. Downgrading to 6.8.0 fixes it.