Auth0 Home Blog Docs

Can't get Login page and prompt displayed, `Uncaught TypeError: Cannot read property 'login' of undefined`

auth0js
auth0-lock

#1

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')
  }
}

#2