Hi,
I would like some help implementing an auth0 solution for class components without Router.
I’m having a hard time, because my existing app didn’t have Router initially and I want to implement auth0.
Every documentation points to using Router, however, I just want to push history state when isAuthenticated returns true.
The main problem is that… isAuthenticated returns false every time, even though I managed to login. The Auth0 page recognizes the logins and keeps a count, but my app returns:
isAuthenticated: false
user: undefined
Does anyone know how to implement a Router-less approach? Are there any guides out there that can help me?
Here’s a piece of my code:
class App extends Component {
constructor(props) {
super(props);
this.state = initialState
}
componentDidMount() {
if (window.location.href.match(/(token-failed)/gi)) {
this.setState({
formChoice: ‘token-failed’
})
}
if (window.location.href.match(/(password-reset)/gi)) {
setTimeout(function() {
alert(“Password successfully reset!”);
}, 300);
this.setState({
formChoice: ‘login’
})
} else {
if (window.history.state === null) {
window.history.pushState({foo: “login”}, “login”, “/”);
}
}
this.onPopState((event) => {
if (this.state.login === false) {
window.history.pushState({foo: "login"}, "login", "/");
window.location.replace(this.state.selfServer);
}
if (event.state === null) {
this.setState(prevState => {
window.history.pushState({foo: prevState.formChoice}, prevState.formChoice, `/${prevState.formChoice}`);
return {
formChoice: prevState.formChoice
}
})
} else {
if (event.state.foo === 'login') {
window.history.pushState({foo: 'login'}, 'login', '/');
this.setState({
login: false,
formChoice: 'login'
})
} else {
this.setState({
formChoice: event.state.foo
})
}
}
})
this.activityIntervals();
this.idleLogout();
this.closeLogout();
}
componentWillUnmount() {
if (this.state.login === false || this.state.formChoice === ‘login’) {
this.destroyIntervals();
}
}
render() {
const { user, isLoading, isAuthenticated } = this.props.auth0;
console.log(user);
if (isLoading) {
return <Loading />;
}
if (!isAuthenticated) {
return (
<div className="animated bounceInUp bg-transparent mh7 mv4 pv4 ph3 br2 shadow-1 maxWidth minWidth center">
<LoginButton />
<LogoutButton />
</div>
)
} else {
if (this.state.formChoice === 'login') {
return (
<div className="animated bounceInUp bg-transparent mh7 mv4 pv4 ph3 br2 shadow-1 maxWidth minWidth center">
<Login loginSubmit={this.loginSubmit} errorLogin={this.errorLogin} formHandler={this.formHandler}
handleUsernameChange={this.handleUsernameChange} handlePasswordChange={this.handlePasswordChange}
username={this.state.username} password={this.state.password}
login={this.state.login} loginAlert={this.state.loginAlert} loginAlertMessage={this.state.loginAlertMessage}
socketOff={this.socketOff}
/>
</div>
)
}
}
}
}
export default withAuth0(App);