I am building a django react-redux based application. I am using Django rest framework's token authentication for authentication and using react-redux. My login is working perfect, after a user log's in his token is saved in the local storage. So if a user reloads his page or comes again, he doesn't need to login again. My login is working perfectly. But the saved auth token check method is not working. As per code after AUTH_TOKEN_CHECK_START, it should dispatch AUTH_TOKEN_CHECK_SUCCESS or AUTH_TOKEN_CHECK_FAIL but nothing is happening
Check the below image, to understand more Actions.js
export const authTokenCheckStart = () => {
return {
type: actionTypes.AUTH_TOKEN_CHECK_START,
payload: {
loading: true,
isAuthenticated: false,
token: null,
}
}
};
export const authFail = (type:string) => {
return {
type: type,
payload: {
loading: false,
isAuthenticated: false,
token: null,
user: null,
error: null
}
}
};
export const authTokenCheck = (token:string) => (dispatch:any) => {
dispatch(authTokenCheckStart());
Axios.get(authSignupAPI, {
headers:{
Authorization: `Token ${token}`
}
}).then((res)=>{
console.log(actionTypes.AUTH_LOGIN_SUCCESS);
dispatch({
type:actionTypes.AUTH_TOKEN_CHECK_SUCCESS,
payload:{
token: token,
loading: false,
isAuthenticated:true,
user:res.data,
error: null,
}
})
}).catch((error)=>{
localStorage.removeItem('Token');
dispatch(authFail(actionTypes.AUTH_TOKEN_CHECK_FAIL))
})
};
Reducer.js
const authReducer = (state=initialState, action:any) =>{
switch (action.type) {
case actionTypes.AUTH_LOGIN_START:
return {
...state,
loading: action.payload.loading,
isAuthenticated: action.payload.isAuthenticated,
token: action.payload.token,
error: action.payload.error,
};
case actionTypes.AUTH_LOGIN_SUCCESS:
return {
...state,
loading: action.payload.loading,
isAuthenticated: action.payload.isAuthenticated,
token: action.payload.token,
error: action.payload.error,
user: action.payload.user
};
case actionTypes.AUTH_LOGIN_FAIL:
return {
...state,
loading: action.payload.loading,
isAuthenticated: action.payload.isAuthenticated,
token: action.payload.token,
error: action.payload.error,
user: action.payload.user
};
case actionTypes.AUTH_TOKEN_CHECK_START:
return {
...state,
loading: action.payload.loading,
isAuthenticated: action.payload.isAuthenticated,
token: action.payload.token,
error: action.payload.error,
user: action.payload.user
};
case actionTypes.AUTH_TOKEN_CHECK_SUCCESS:
return {
...state,
loading: action.payload.loading,
isAuthenticated: action.payload.isAuthenticated,
token: action.payload.token,
error: action.payload.error,
user: action.payload.user
};
case actionTypes.AUTH_TOKEN_CHECK_FAIL:
return {
...state,
loading: false,
isAuthenticated: action.payload.isAuthenticated,
token: action.payload.token,
error: action.payload.error,
user: action.payload.user
};
case actionTypes.AUTH_LOGOUT:{
return initialState
}
default:
return state
}
};
Login Component
const Login =(props:any) =>{
const [state, setState] = useState({
Email:'',
Password:''
});
const inputOnChange = (e:any) => {
setState({
...state,
[e.target.name]: e.target.value
})
};
useEffect(()=>{
const token = localStorage.getItem('Token');
if(token !== null) {
props.authTokenCheck()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
},[localStorage.getItem('Token')]) ;
const loginButtonEvent = (e:any) => {
props.authLogin(state.Email, state.Password)
};
return(
<div>
{props.auth.isAuthenticated?
<div>
<h1>I am authenticated</h1>
<h2>{`${props.auth.isAuthenticated}`}</h2>
</div>:
<div>
<div>
{props.auth.loading?
<div><h1>Loading</h1></div>
:
<div>
<input placeholder={'Email Address'}
name={'Email'} onChange={(e)=>{inputOnChange(e)}}
type="text"/>
<input placeholder={'Password'}
name={'Password'}
onChange={(e)=>{inputOnChange(e)}}
type="password"/>
<button onClick={(e)=>{loginButtonEvent(e)}}>Login</button>
</div>
}
</div>
</div>}
</div>
};
const mapStateToProps = (state:any) =>({
auth: state.auth
});
const mapDispatchToProps = (dispatch:any) => {
return {
// dispatching actions returned by action creators
authLogin: (email:string,password:string) => dispatch(authLogin(email,password)),
authTokenCheck: () => dispatch(authTokenCheck()),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Login)
