React + Django (session) authentication

Question

Is authentication implemented correctly?

At the entry point to the app, which is App.js, query the Django server, which responds whether the current user is authenticated after checking request.user.isAuthenticated

I am not using redux, just storing authentication state in a local object (this can't be tampered with I assume?). This is reset on signout and I guess it is also lost and re-queried whenever the app is reloaded.

All app routes except the login route are behind PrivateRoute, which will redirect to login unless myAuth.isAuthenticated === true.

Any additional comments welcome.

App.js

import React, {Component} from "react";
import ReactDOM from "react-dom";
import MainContainer from "../containers/MainContainer";
import {Provider} from "react-redux";
import store from "../store";
import BrowserRouter from "react-router-dom/es/BrowserRouter";
import {Redirect, Route, Switch} from "react-router-dom";
import LoginPage from "./LoginPage";
import myAuth from "../myAuth";
import {APP_LOGIN_PATH} from "../constants/paths";
class App extends Component {
 state = {
 loaded: false,
 };
 componentDidMount() {
 myAuth.authenticate(() => this.setState({
 loaded: true,
 }))
 }
 render() {
 const { loaded } = this.state;
 return (
 loaded ? (
 <BrowserRouter>
 <Switch>
 <Route path={ APP_LOGIN_PATH } component={ LoginPage } />
 <PrivateRoute path="/app" component={ MainContainer } />
 </Switch>
 </BrowserRouter>
 ) : (
 <div>Loading...</div>
 )
 )
 }
}
const PrivateRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={(props) => (
 myAuth.isAuthenticated === true
 ? <Component {...props} />
 : <Redirect to={{ pathname: APP_LOGIN_PATH, state: { from: props.location }}} />
 )} />
);
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(
 <Provider store={ store }>
 <BrowserRouter>
 <App />
 </BrowserRouter>
 </Provider>
 , wrapper) : null;

myAuth.js

const myAuth = {
 isAuthenticated: false,
 isStaff: false,
 isSuperuser: false,
 authenticate(cb) {
 console.log("authenticate");
 fetch("/session_user/")
 .then(response => {
 if (response.status !== 200) {
 console.log("Something went wrong during authentication");
 }
 return response.json();
 })
 .then(data => {
 this.isAuthenticated = data.isAuthenticated;
 this.isStaff = data.isStaff;
 this.isSuperuser = data.isSuperuser;
 })
 .then(cb)
 },
 signout(cb) {
 fetch("/logout/")
 .then(response => {
 if (response.status !== 200) {
 console.log("Something went wrong while logging out");
 }
 })
 .then(data => {
 this.isAuthenticated = false;
 this.isStaff = false;
 this.isSuperuser = false;
 })
 }
};
export default myAuth;

Answer 1

The client-side data can definitely be tampered with so you should not rely on that for security.

• Toby Speight: Can you be more specific - which part of the code depends on client-side data, and what can be done to improve it?
• Stephen Rauch: It would be very helpful if you could expand on this answer.