I am following the example given in 01-Login in the auth0-examples, and it turns out I can’t get basic login prompt working. Here I provide the error message and the source related and hope to get help so that I can start using Auth0. Could you please take a look at why I have such an error? Thanks in advance.
// ------src/login.js------
import ....
class Login extends React.Component {
static contextTypes = {
router: T.object
}
static propTypes = {
location: T.object,
auth: T.instanceOf(AuthService)
}
render() {
const { auth, location } = this.props;
console.log(location);
console.log(auth);
return (
<div className={styles.root}>
<h2>Login</h2>
<ButtonToolbar className={styles.toolbar}>
<Button bsStyle="primary" onClick={auth.login.bind(this)} >Login</Button>
</ButtonToolbar>
</div>
)
}
}
export default Login;
// ----- src/App.js ------
....
import AuthService from './utils/AuthService'
const auth = new AuthService('xxxxxx',
'experimentingreact.auth0.com');
// onEnter callback to validate authentication in private routes
const requireAuth = (nextState, replace) => {
if (!auth.loggedIn()) {
replace({ pathname: '/login' })
}
}
....
....
render() {
console.log('login added');
return (
<BrowserRouter auth={auth}>
<div >
<Navbar/>
<Switch>
<Redirect exact from='/' to='/feeds' />
<Route path='/feeds'
render={(props) => <Feeds {...props} posts={this.state.posts} />} />
<Route path="/compose"
render={(props) => <MyEditor {...props} addPost={this.addPost}/>} />
<Route exact path="/login" component={Login} auth={auth}/>
</ Switch>
</div>
</BrowserRouter>
);
}
// ---- src/utils/AuthService.js
import { EventEmitter } from 'events'
import { isTokenExpired } from './jwtHelper'
import Auth0Lock from 'auth0-lock'
import { browserHistory } from 'react-router'
export default class AuthService extends EventEmitter {
constructor(clientId, domain) {
super()
// Configure Auth0
this.lock = new Auth0Lock(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)
}
_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)
}
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')
}
}