I am checking the login via jquery using this methods:
module.exports = {
login: function(username, pass, cb) {
if (localStorage.token) {
if (cb) cb(true)
return
}
this.getToken(username, pass, (res) => {
if (res.authenticated) {
localStorage.token = res.token
if (cb) cb(true)
} else {
if (cb) cb(false)
}
})
},
logout: function() {
delete localStorage.token
},
loggedIn: function() {
return !!localStorage.token
},
getToken: function(username, pass, cb) {
$.ajax({
type: 'POST',
url: '/obtain-auth-token/',
data: {
email_or_username: username,
password: pass
},
success: function(res){
cb({
authenticated: true,
token: res.token
})
}
})
},
}
My login validation is working correctly, if the user and password are correct it redirects to app page. But if is incorrect I receive this message at terminal:
POST http://url_base/obtain-auth-token/ 400 (Bad Request)
and this element:
<p>Bad login information</p>
Does not appears at my login page.
I think that the problem is this error from jQuery but I don't know how to solve this.
I am using this repository how reference: https://github.com/reactjs/react-router/blob/master/examples/auth-flow/auth.js
Here is my LoginPage:
'use strict'
import React from 'react'
import { Router, browserHistory } from 'react-router'
import '../../../css/login.css'
import '../../../css/animation.css'
import Logo from '../icons/Logo'
import auth from './auth'
class LoginPage extends React.Component{
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
error: false,
loggedIn: auth.loggedIn()
}
}
handleSubmit(ev) {
ev.preventDefault()
var username = this.refs.username.value
var pass = this.refs.pass.value
auth.login(username, pass, (loggedIn) => {
if (loggedIn) {
const { location } = this.props
if (location.state && location.state.nextPathname) {
browserHistory.push(location.state.nextPathname)
} else {
browserHistory.push('app')
}
}
else{
this.setState({error:true});
}
})
}
render() {
return (
<div id="login" className="login">
<div className="login-content">
<div id="login-content-container" className="login-content-container">
<Logo svgClass="login-content-container-logo" width="270" height="35"/>
<form className="login-content-container-form" onSubmit={this.handleSubmit}>
<input className="login-content-container-form-input" type="text" ref="username" placeholder="username"/>
<input className="login-content-container-form-input" type="password" ref="pass" placeholder="password"/>
<button className="login-content-container-form-button">login</button>
</form>
{this.state.error && (
<p>Bad login information</p>
)}
</div>
</div>
</div>
);
}
}
export default LoginPage
It simply because you haven't handled the ajax error callback in getToken
getToken: function(username, pass, cb) {
$.ajax({
type: 'POST',
url: '/obtain-auth-token/',
data: {
email_or_username: username,
password: pass
},
success: function(res){
cb({
authenticated: true,
token: res.token
})
},
error: function () { cb({authenticated: false}); }
})
},
Related
I am using Redux with ReactJS. I also am utilizing devise-JWT for auth. Upon a refresh of the page, my state is changed and loggedIn becomes "false". I also get 400 Bad Request error upon posting data through fetch. I can login just fine and be redirected.
My user reducer:
import {
SIGNUP_USER,
LOGIN_USER,
LOGOUT_USER,
STORE_TOKEN
} from '../actions/types'
const INITIAL_STATE = {
loggedIn: false,
currentUser: {}
}
export default (state = INITIAL_STATE, action) => {
switch(action.type){
case SIGNUP_USER:
return {
...state,
loggedIn: true,
currentUser: action.payload
}
case LOGIN_USER:
return {
...state,
loggedIn: true,
currentUser: action.payload
}
case LOGOUT_USER:
return {
...state,
user: state.users.filter(user => user.id !== action.payload.id),
loggedIn: false
}
case STORE_TOKEN:
return {
token: action.payload.token,
}
default:
return state
}
}
My action:
export function loginUser(data){
return (dispatch) => {
fetch("http://localhost:3000/login", {
method: "post",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user: {
...data
}
})
})
.then(resp => {
//debugger
if (resp.ok) {
resp.json().then(json => {
localStorage.setItem('token', json.token)
dispatch({ type: LOGIN_USER, payload: json })
})
}
})
}
}
My login component:
import React from 'react'
import TextField from '#material-ui/core/TextField'
import Button from '#material-ui/core/Button'
import { loginUser } from '../actions/index'
import { connect } from 'react-redux'
class Login extends React.Component {
state = {
email: '',
password: ''
}
handleSubmit = (e) =>{
e.preventDefault()
let credentials = this.state
this.props.loginUser(credentials)
this.props.history.push('/bookmarks')
}
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value})
}
render() {
const { email, password } = this.state
return (
<div className="login-form">
<h1>Login</h1>
<form onSubmit={this.handleSubmit}>
<div>
<TextField type="text" name="email" placeholder="Email" onChange={this.handleChange} value={email} />
</div>
<div>
<TextField type="password" name="password" placeholder="Password" onChange={this.handleChange} value={password}/>
</div><br></br>
<Button type="submit" value="Login">Login</Button>
</form>
</div>
)
}
}
const mapDispatch = (dispatch) => {
return {
loginUser: (credentials) => dispatch(loginUser(credentials))
}
}
export default connect(null, mapDispatch)(Login)
I used devise-JWT for authentication.
You're logged out because the only place you store the credentials is in the redux store, which is (essentially) a variable.
When you refresh the page, you reinitialise the store to the default state.
You haven't stored the credentials anywhere where they would persist, such as local storage or a cookie.
I'm trying to get all user data from the backend to display on the webpage. However, the getAllUsers() seems to not send back a response as the console.logs are not printed out.
Here is my ViewUsers.js
import React, { Component } from "react";
import AdminServices from "../Services/AdminServices";
import "././ViewUsers.css"
const ViewUsersComponent = (users) => {
return (
<div className="viewusers">
<h1>All users</h1>
<div className="viewusers-list">
{users.map((user) => {
return (
<React.Fragment>
<p> <b>Name</b> : {user.username} </p>
<p> <b>Email</b> : {user.email} </p>
<p> <b>Website role</b> : {user.websiteRole} </p>
<hr />
</React.Fragment>
)
})}
</div>
</div>
)
}
export default class ViewUsers extends Component {
constructor(props) {
super(props);
this.retrieveUsers = this.retrieveUsers.bind(this);
this.state = {
users: []
}
}
componentDidMount() {
this.retrieveUsers();
}
retrieveUsers() {
AdminServices.getAllUsers()
.then(response => {
if (response && response.data) {
this.setState({
users: response.data
});
}
console.log(response.data);
console.log('DATA RECEIVED')
})
.catch(e => {
console.log('ERROR')
console.log(e);
});
}
render () {
const { users } = this.state;
console.log(users)
if (Array.isArray(users) && users.length) {
return ViewUsersComponent(users)
} else {
return (
window.location = '/notfound'
)
}
}
}
This is the AdminServices.js
import http from "../http-common"
class AdminServices {
getAllUsers() {
return http.get("/users");
}
getAllProjects() {
return http.get("/projects");
}
}
export default new AdminServices();
And the http-common.js
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:8080",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*"
},
mode: "cors",
credentials: "include",
withCredentials: true
});
And the userRoute.js
const express = require('express');
const User = require('../models/user').userModel;
const userRouter = express.Router();
// get all users
userRouter.get('/', async (req, res) => {
try {
console.log("loading users")
users = await User.find();
if (users == null) {
res.status(404).json({ message: "users not found" });
}
res.send(users);
} catch (err) {
res.status(500).json({ message: err.message });
}
});
When I send a get request to the user route via rest api, it works so I am not sure why it does not go through on the frontend
Please add CORS on backend project. You can configure the UI domain or use ‘*’ to allow all domain.
I am playing around by creating a login page and I am currently facing a weird issue using redux and thunk with the following code.
login.tsx:
import React from "react";
import { connect } from "react-redux";
import "./Common.css";
import {authentications} from "redux/actions/userActions";
interface Props {
login: (username: string, password: string) => any,
logout: () => void,
}
interface State {
username: string,
password: string,
submitted: boolean,
}
class LoginComponent extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
username: '',
password: '',
submitted: false,
};
this.setUsername = this.setUsername.bind(this);
this.setPassword = this.setPassword.bind(this);
this.submitHandler = this.submitHandler.bind(this);
}
setUsername(e: any) {
const { value } = e.target;
this.setState({ username: value });
}
setPassword(e: any) {
const { value } = e.target;
this.setState({ password: value });
}
async submitHandler(event: React.SyntheticEvent) {
event.preventDefault();
const { username, password } = this.state;
if (username && password) {
console.log('call login function in login page');
this.props.login(username, password);
}
};
render() {
const { username, password} = this.state;
return (
<div>
<section>
<h2>authentication</h2>
<form method="post" onSubmit={this.submitHandler}>
<div>
<input
name="username"
value={username}
type="text"
placeholder="name"
className="TextField"
onChange={this.setUsername}
/>
<input
name="password"
value={password}
type="password"
placeholder="password"
className="TextField"
onChange={this.setPassword}
/>
</div>
<button type="submit" className="SubmitButton">submit</button>
</form>
</section>
</div>
);
}
}
function mapStateToProps (state: State) {
const {username} = state;
return {
username: username,
}
}
function mapDispatchToProps () {
return {
login: authentications.login,
logout: authentications.logout,
}
}
const Login = connect(mapStateToProps, mapDispatchToProps)(LoginComponent);
export {Login as LoginComponent}
userAction.tsx
import { userConstants } from 'redux/CONSTANTS';
import { userServices } from 'services/index';
export const authentications = {
login,
logout,
};
function login(username: string, password: string) {
console.log("within the login function");
return (dispatch: any) => {
console.log('within dispatch function'); // this part is not called
dispatch(request(username));
userServices.login(username, password)
.then(
username => {
dispatch(success(username.toString()));
// history.push('/');
},
error => {
dispatch(failure(username, error.toString()));
// dispatch(alertActions.error(error.toString()));
}
);
};
function request(username: string) { console.log('file request'); return { type: userConstants.LOGIN_REQUEST, username } }
function success(username: string) { console.log('success'); return { type: userConstants.LOGIN_SUCCESS, username } }
function failure(username: string, error: string) { console.log('failure'); return { type: userConstants.LOGIN_FAILURE, username, error } }
}
function logout() {
userServices.logout();
return { type: userConstants.LOGOUT };
}
The problem is: Anything after the return statement in login function is not called.
I searched on the website and did not find any problem like that. So I was wondering what might be the cause.
Your mapDispatchToProps should either be the "long" version, actually calling dispatch, as in the other answer (but that is usually only necessary if you want to add manual logic) or just an object. This object shorthand version is the recommended version nowadays:
const mapDispatchToProps = {
login: authentications.login,
logout: authentications.logout,
}
You are not passing dispatch into mapDispatchToProps, here is an example from off docs:
const increment = () => ({ type: 'INCREMENT' })
const decrement = () => ({ type: 'DECREMENT' })
const reset = () => ({ type: 'RESET' })
const mapDispatchToProps = (dispatch) => {
return {
// dispatching actions returned by action creators
increment: () => dispatch(increment()),
decrement: () => dispatch(decrement()),
reset: () => dispatch(reset()),
}
}
UPD: as #phry mentioned, you can also return just an object. which is recommended:
const mapDispatchToProps = {
login: authentications.login,
logout: authentications.logout,
}
I have a Django rest API with JWT auth for signup and login built with react.
When trying to log in a user I get a 403 forbidden error.
I added the csrf token to the headers of the request and I can see it in the promise when using the console, so that's not the problem here.
I just don't understand where this post is breaking
import axios from "axios";
import Cookies from "js-cookie";
var csrftoken = Cookies.get("csrftoken");
const axiosInstance = axios.create({
baseURL: "http://127.0.0.1:8000/api/",
timeout: 5000,
headers: {
HTTP_X_CSRF_TOKEN: csrftoken,
Authorization: localStorage.getItem("access_token")
? "JWT " + localStorage.getItem("access_token")
: null,
"Content-Type": "application/json",
accept: "application/json",
withCredentials: true,
},
});
axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
const originalRequest = error.config;
// test for token presence, no point in sending a request if token isn't present
if (
localStorage.getItem("refresh_token") &&
error.response.status === 401 &&
error.response.statusText === "Unauthorized"
) {
const refresh_token = localStorage.getItem("refresh_token");
return axiosInstance
.post("/token/refresh/", { refresh: refresh_token })
.then((response) => {
localStorage.setItem("access_token", response.data.access);
localStorage.setItem("refresh_token", response.data.refresh);
axiosInstance.defaults.headers["Authorization"] =
"JWT " + response.data.access;
originalRequest.headers["Authorization"] =
"JWT " + response.data.access;
return axiosInstance(originalRequest);
})
.catch((err) => {
console.log(err);
});
}
// specific error handling done elsewhere
return Promise.reject({ ...error });
}
);
export default axiosInstance;
And the login component using the axios instance:
import React, { Component } from "react";
import axiosInstance from "../axiosApi";
import DjangoCSRFToken from "django-react-csrftoken";
class Login extends Component {
constructor(props) {
super(props);
this.state = { username: "", password: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
async handleSubmit(event) {
event.preventDefault();
try {
const response = await axiosInstance.post("/token/obtain/", {
username: this.state.username,
password: this.state.password,
});
axiosInstance.defaults.headers["Authorization"] =
"JWT " + response.data.access;
localStorage.setItem("access_token", response.data.access);
localStorage.setItem("refresh_token", response.data.refresh);
return response;
} catch (error) {
throw error;
}
}
render() {
return (
<div>
Login
<form onSubmit={this.handleSubmit}>
<DjangoCSRFToken />
<label>
Username:
<input
name="username"
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
</label>
<label>
Password:
<input
name="password"
type="password"
value={this.state.password}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default Login;
the console when hitting submit:
Please try removing CSRF from the call. and make use of #csrf_exepmt for further information please follow this link. Django csrf_exempt using your JWT it's enough.
Example:
#csrf_exempt
def myEndpoint():
// my code
Im noob with React and trying to create a login form. When the user enters correct login informations a rest api will return JWT token. However i cant find how to set the state "token" to be the value of the response. Still i can save the response.token to localstorage and it shows correctly. I think the "this" points to wrong function, but how could i get around this without breaking the logic? Any hints? Thanks
Login.js
import React from 'react';
import axios from 'axios';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import MyInput from './../components/Input';
import { connect } from "react-redux";
import { Form } from 'formsy-react';
var server = "http://localhost:3000";
class Login extends React.Component {
constructor(props) {
super(props)
this.state = {
canSubmit: false,
token: null
};
this.enableButton = this.enableButton.bind(this);
this.disableButton = this.disableButton.bind(this);
this.submit = this.submit.bind(this);
}
submit(data) {
axios.post(server + '/login', {
username: data.username,
password: data.password
})
.then(function (response) {
if (response.data.token) {
var token = response.data.token;
localStorage.setItem("token", token);
this.setState({ token: token }); //Here is the problem
console.log(this.state.token);
} else {
location.reload();
}
});
}
enableButton() {
this.setState({ canSubmit: true })
}
disableButton() {
this.setState({ canSubmit: false })
}
render() {
return (
<div className="loginForm">
<h2 className="page-header">Login</h2>
<Form onSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
<div className="form-group">
<label>Username: </label>
<MyInput name="username" validations="isExisty" validationError="Required" required />
</div>
<div class="form-group">
<label>Password: </label>
<MyInput type="password" name="password" validations="isExisty" validationError="Required" required />
</div>
<button
type="submit"
className="btn btn-primary"
disabled={!this.state.canSubmit}>
Login
</button>
</Form>
<br/>
Create user!
<a id="forgot" href="forgot">Forgot password?</a>
</div>);
}
}
export default Login;
You can use an arrow function to keep the context of submit and be able to access to setState:
submit(data) {
axios.post(server + '/login', {
username: data.username,
password: data.password
})
.then((response) => {
if (response.data.token) {
var token = response.data.token;
localStorage.setItem("token", token);
this.setState({ token: token });
console.log(this.state.token);
} else {
location.reload();
}
});
}
As Alexander stated in the comment, I must use the arrow function => or set this for callback.