Authentication using auth0

Asked by At

I am implementing auth0 authorization for my reactjs app

I have created my auth0 account, passed the parameters in my Auth.js file

My Index.js and main.js code is given below.

The problem I am facing is I am unable to get the this.props.auth value. It throws an error into my onClick event in the button to call Auth0:

TypeError: Cannot read property 'login' of undefined.

import auth0  from 'auth0-js';

export default class Auth {

     auth0 = new auth0.WebAuth({
     domain:"xxxxx.auth0.com",
     clientID:"xxxxxxxxxxxx",
     redirectUri:"http://localhost:3000/Callback",

     audience:"https://xxxx.auth0.com/userinfo",
     responseType:"token id_token",
     scope:"openid"

    });

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

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from "react-router-dom";
import Auth from './Auth';


const auth= new Auth();
let state = {};
window.setState=(changes)=>{
  state = Object.assign({},state,changes);

};

/* eslint no-restricted-globals : 0 */
let initialState = {
  name :"user1",
  location :location.pathname.replace(/^\/?|\/$/g,""),
  auth

};

ReactDOM.render(
  <Router {...state}>
    <App />
  </Router>,
  document.getElementById("root")
);
window.setState(initialState);


serviceWorker.unregister();

main.js

import React, { Component } from "react";

export default class Main extends Component{
    render(){
        return(
            <div>

        <div>
            <h1> Please login here user </h1>
            <button onClick={this.props.auth.login}>Login</button>
            </div>
        </div>

        )
    }
}

0 Answers