ReactJS - Authenticate with React Router 4 - reactjs

Question

I am new to react and I am trying to create a secure area. My app's file structure is as follows:
build
node_modules
public
src
AboutScreen
AdminDash
ContactScreen
HomeScreen
LoginScreen
SignUpScreen
WorkRequestScreen
App.js
index.js
routes.js
serviceWorker.js
package.json
package-lock.json
My routing is done in App.js. This file looks like this:
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import Home from './HomeScreen/Home';
import WorkReq from './WorkRequestScreen/WorkReq';
import About from './AboutScreen/About';
import Contact from './ContactScreen/Contact';
import Login from './LoginScreen/Login';
import Signup from './SignUpScreen/Signup';
import adminDash from './AdminDash/AdminDash';
const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100)
},
signout(cb) {
this.isAuthenticated = false
setTimeout(cb, 100)
}
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
fakeAuth.isAuthenticated === true
? <Component {...props} />
: <Redirect to={{
pathname: '/login',
state: { from: props.location }
}} />
)} />
)
class App extends Component {
render() {
return (
<div>
<PrivateRoute path='/adminDash' component={adminDash} />
<Route exact path="/workReq" render={(props) => <WorkReq {...props}/>} />
<Route exact path="/about" component={About}/>
<Route exact path="/contact" component={Contact}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/" component={Home}/>
</div>
);
}
}
export default App;
My Login component looks like this:
import App from '../App';
class LoginScreen extends Component {
super(props);
this.state = {
redirectToReferrer: false,
};
login = () => {
App.fakeAuth.authenticate(() => {
this.setState(() => ({
redirectToReferrer: true
}))
})
}
render() {
const { from } = this.props.location.state || { from: { pathname: '/' } }
const { redirectToReferrer } = this.state
if (redirectToReferrer === true) {
return <Redirect to={from} />
}
return (
<div className='buttonCont'>
<button size='lg' type='button' onClick={this.login.bind(this)}>HIT IT!</button>
</div>
);
}
}
Currently this does not redirect the user to another page but will redirect them to AdminDev. The error I am getting is:
TypeError: Cannot read property 'authenticate' of undefined (login.js)
The prolem line is: App.fakeAuth.authenticate(() => {. The thing I would like to know is am I doing this right or am I missing the idea completly?
I have been following these two articles:
https://tylermcginnis.com/react-router-protected-routes-authentication/
https://auth0.com/blog/react-router-4-practical-tutorial/

Answer 1

You are getting this error beacause fakeAuth is not exported from App.js file. Put the fakeAuth object into a separate file i.e. auth.js and export it from there.
// auth.js
const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100)
},
signout(cb) {
this.isAuthenticated = false
setTimeout(cb, 100)
}
}
export { fakeAuth }
Then, import it in App.js and Login.js component like this.
import { fakeAuth } from './path-to-auth-js-file';