ReactJS and Auth0 problems in getting profile and EventsEmitter

Question

So, I was exploring auth0 for a pet project. I was able to configure the authentication for my app with the help of their documentation and the step by step guide provided in the website. The next step was getting the profile from auth0, it was successful too, but the problem was when I have to use the profile id to fetch the user data from my local DB. Since getUserProfile() is Asynchronous, the recommended way to get the profile is by firing an eventemitter in the helper class after setting it to local storage and catching it in the component. I've been trying different workarounds to avoid it but nothing is working. I tried doing this all day. Please help. I'll attach the relevant code here.

AuthService helper class

import Auth0Lock from 'auth0-lock'
  import {
      isTokenExpired
  }
  from './jwtHelper'
  import {
      EventEmitter
  }
  from 'events'

  export default class AuthService extends EventEmitter {
      constructor(clientId, domain) {
          // Configure Auth0
          this.lock = new Auth0Lock(clientId, domain, {

                  autoclose: true,
                  theme: {
                      logo: logo,
                      primaryColor: "#337ab7"
                  },
                  languageDictionary: {
                      title: "PHA"
                  },
                  auth: {
                      redirect: false,
                      responseType: 'token'
                  }
              })
              // Add callback for lock `authenticated` event
          this.lock.on('authenticated', this._doAuthentication.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')
          this.lock.getUserInfo(authResult.accessToken, function(error, profile) {
              if (error) {
                  console.log('Error loading the Profile - AuthService', error)
              } else {
                  console.log("got", profile.name);
                  localStorage.setItem('profile', JSON.stringify(profile))
                  this.emit('profile_updated', profile)
              }
          })
      }
      getProfile() {
          // Retrieves the profile data from local storage
          const profile = localStorage.getItem('profile')
          return profile ? JSON.parse(localStorage.profile) : {}
      }
  }

Also I get an error in the console that EventsEmitter is never used. What is it that I'm doing wrong.

This is my Home component.

class Homecontent extends React.Component{
 static contextTypes = {
   router : React.PropTypes.object
  }
 static propTypes = {
    auth: React.PropTypes.instanceOf(AuthService)
  }
constructor(props,context){

super(props);
this.state={
  profile: {},
  user : "",
  avatar: placeholder,
  family: [],
  nextappt: "0",
  diagnosis: [],
  medication:[],
  advise:[],
  tests:[],
  mainchartdata:[],
  piechartdata:[],
  filtertext: "",
  filtersource:"",
}
this.filtercallback= this.filtercallback.bind(this);
props.auth.on('profile_updated', (newProfile) => {
      console.log("updated profile");
      this.setState({profile: newProfile})
    })
 }

The App doesnt run when the below code is included.

 props.auth.on('profile_updated', (newProfile) => {
      this.setState({profile: newProfile})
    })

It's clearly a problem with EventsEmitter or this.emit().

Please help. }`

ReactJS and Auth0 problems in getting profile and EventsEmitter

Answers (1)

Related Questions