You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on May 1, 2019. It is now read-only.
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
The text was updated successfully, but these errors were encountered:
@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:
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.
I am using the auth0-react-sample/01-Login - with the only change in
/utils/AuthService.js
instead of usingauth0-lock
I am usingauth0-lock-passwordless
.So my AuthService.js looks like this:
In
views/Login/Login.js
I have the following:After installing auth0-lock-passwordless with
npm install --save auth0-lock-passwordless
I get the version 2.2.3 and I runnpm start
- Loading http://localhost:3000 I get a white screen with the following error stackCan you please look into this? Am I doing something wrong?
Thanks
The text was updated successfully, but these errors were encountered: