How to handle Log in errors through Redux in React application - reactjs

Question

I am learning React-Redux and trying to get more comfortable with it by implementing things in various ways. I have a login form where I want to display an error message if the username/password is invalid. I have created config file with the required user details. I am calling an authenticate api to generate a JWT token for the logged in user.So, the token you get as response of the authenticate api will have the logged in user details. I have done something like below but I see I am able to successfully login every time and not able to display any error message when I try to provide any random/wrong user name. I have commented out the componetWillreceiveProps function now but would like to understand what I am doing wrong.
My Log in Comp-
import React from "react";
import Header from "./header";
import Footer from "./footer";
import { connect } from "react-redux";
import { createLogIn, setAuthError } from "../actions/action";
const axios = require("axios");
import jwtdata from "../config/jwtdata";
class Login extends React.Component {
constructor() {
super();
this.state = {
account: { user: "", password: "" }
};
}
handleAccountChange = ({ target: input }) => {
const account = { ...this.state.account };
account[input.name] = input.value;
this.setState({ account });
};
handleLoginForm = e => {
e.preventDefault();
let postLoginData = {};
const userName = this.state.account.user;
// call to action
this.props.dispatch(createLogIn(postLoginData, userName));
this.props.dispatch(setAuthError())
this.props.history.push("/intro");
};
// componentWillReceiveProps(nextProps) {
// if (nextProps.authStatus){
// this.props.history.push("/intro");
// }
// }
render() {
const { account } = this.state;
return (
<div className="intro">
<Header />
<form onSubmit={this.handleLoginForm}>
<div className="content container">
<div className="profile" />
<div className="row">
<div className="col-xs-12">
<input
type="text"
autoFocus
placeholder="username"
name="user"
value={account.user}
onChange={this.handleAccountChange}
/>
<input
type="password"
placeholder="password"
name="password"
value={account.password}
onChange={this.handleAccountChange}
/>
<button
className={
"loginButton " +
(account.user && account.password
? "not-disabled"
: "disabled")
}
disabled={!account.user && !account.password ? true : false}
>
<span>Sign in</span>
</button>
</div>
{!this.props.authStatus ? (
<p className="login-error">
Authorization Failed. Please try again!
</p>
) : (
<p />
)}
</div>
</div>
</form>
<Footer />
</div>
);
}
}
const mapStateToProps = state => ({
authStatus: state.root.authStatus
});
export default connect(mapStateToProps)(Login);
Action creator-
export const createLogIn = (postLoginData, userName) => (dispatch) => {
console.log('>>> ', userName);
console.log('authenticating');
console.log(btoa(JSON.stringify(jwtdata)));
localStorage.setItem("UserData", btoa(JSON.stringify(jwtdata[userName])))
// dispatch({
// type: SET_AUTH_ERROR,
// payload: false
// })
axios({
method: "POST",
url: "/authenticateUrl",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: postLoginData
})
.then (response => {
dispatch({
type: API_LOG_IN,
payload: response.data
})
localStorage.setItem('AccessToken', response.data.jwt_token);
})
.catch( error => {
console.log("in catch block");
});
}
export const setAuthError = () => {
console.log('inside actions');
return {
type: SET_AUTH_ERROR,
payload: "Authorization Error"
}
}
Reducer-
const initialState = {
authStatus: true
}
const reducerFunc = (state = initialState, action) => {
switch (action.type) {
case API_LOG_IN:
console.log('reducers');
return {...state, logIn: action.payload}
case SET_AUTH_ERROR:
console.log('inside Auth reduccer');
return {...state,authStatus: action.payload}
default: return {...state}
}
}
export default reducerFunc;
I am trying to add a check inside componentWillReceiveProps but that doesn't seem to be working.Instead it always displays me the error message even when the user name is same as the config file.What I want is to display some message like "Authorization failed" if I try to hit the sign in button with wrong User credentials.

Answer 1

!this.props.authStatus ? (
Seems like this line is the problem. Since your authStatus is either "undefined" when no error occurred or "Authentication failed".