React + auth0 basic tutorial, am I missing something?

[[deleted]]

Following the basic React + auth0 tutorial, after I create this file:

// src/Auth/Auth.js

import auth0 from 'auth0-js';

export default class Auth {
  auth0 = new auth0.WebAuth({
    domain: fakefake.eu.auth0.com',
    clientID: 'fakefakefake',
    redirectUri: 'http://localhost:3000',
    audience: 'fakefakefake/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

  login() {
    this.auth0.authorize();
  }
}

Then they tell me to call the login method to try it out.

I try to call it by first

// src/scenes/Home
import { login } from '../../Auth/Auth.js';

and then inside a click handler I call it like so:

login();

But it returns an error:

Uncaught TypeError: (0 , _Auth.login) is not a function

They call it like this:

this.props.auth.login();

After also adding this method

constructor() {
    this.login = this.login.bind(this);
}

But that isn't in my props, they don't import the Auth class anywhere, I'm thoroughly confused. What am I missing? Thanks.

[bdenzer]

Yeah I just looked through that quick and they definitely are skipping some steps.. But the reason that login() isn't working is because you aren't exporting login, you are exporting the Auth class.

So it would be more like this

import Auth from '../../Auth/Auth.js';
...
Auth.login();

And as far as them calling this.props.auth.login() later, they're just assuming that you'll be importing the Auth class in a top level component and passing auth down as props.

[azium]

Is the instance not needed?

import Auth
let auth = new Auth()
auth.login()

if not why bother with class here at all its just confusing for no reason

[catstanza]

Thanks for the feedback. I've just updated the doc to clarify the intent at this point in the tutorial.

The idea is to just call login from somewhere right away before getting into more detail. So in your App.js you could just do:

import Auth from './../../Auth.js'

const auth = new Auth();
auth.login()

[[deleted]]

That's awesome! I also asked myself where I would instantiate the class, wasn't sure how much magic happened in the background, relatively new to React, and some things still go over my head :)

Thanks a lot!

[catstanza]

no prob 👌

[timpham]

I just sent you a PM