React - Call class function from another component - 'Not a function' - reactjs

Question

I have an 'Auth' class with a 'signIn()' function that I'm trying to call from a 'Login' component, that returns the error 'not a function' when it attempts to use the callback in 'Login'.
I've tried referring to the Auth class/service via use of a prop (like this.props.auth.signIn()), and directly as via a call to the class in the Login component (like this.auth), but both result in the same error.
I'm trying to follow the method used in the official documentation for Auth0's react samples at https://github.com/auth0-samples/auth0-react-samples/blob/embedded-login/02-Custom-Login-Form/src/Login/Login.js.
Auth.js:
import auth0 from 'auth0-js';
import { auth_config } from './auth0-config';
import createHistory from 'history';
export default class Auth {
auth0 = new auth0.WebAuth({
...
})
constructor() {
this.signIn = this.signIn.bind(this);
}
signIn(username, password) {
this.auth0.login(
{
realm: auth_config.dbConnectionName,
username,
password
},
(err, authResult) => {
if (err) {
console.error('Authentication error at \'services/auth/Auth.js\' - signIn() method:', err);
alert(`Error: ${err.description}. Check the console for further details.`);
}
}
)
}
Login.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Auth from 'services/auth/Auth.js';
import { Dimmer, Modal, Header, Form, Button } from 'semantic-ui-react';
export default class LoginComponent extends React.Component {
constructor() {
super();
this.state = {
showModal: true,
username: null,
password: null,
authorised: false
}
}
componentDidMount() {
console.log('Login.props:', this.props);
}
hide = () => {
console.log('LoginComponent.hide()');
this.setState({
showModal: false
})
}
getLoginCredentials() {
return {
email: ReactDOM.findDOMNode(this.refs.email).value,
password: ReactDOM.findDOMNode(this.refs.password).value
}
}
signIn() {
// console.log('LoginComponent.signIn(\'' + this.state.username + '\', \'' + this.state.password + '\')');
const user = this.getLoginCredentials();
this.props.auth.signIn(user.email, user.password);
}

Answer 1

You will have to create the object of the class and then using that object you can call the function inside your Login.js,
signIn() {
const user = this.getLoginCredentials();
let signinObj = new Auth();
signinObj.signIn(user.email, user.password);
}
Edit: In the github page, in router.js file you can see the statment,
<Route path="/login" render={(props) => <Login auth={auth} {...props} />} />
auth is the object of this class which is passed to Login class as props.