1
\$\begingroup\$

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;
\$\endgroup\$

1 Answer 1

-3
\$\begingroup\$

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

\$\endgroup\$
2
  • \$\begingroup\$ Can you be more specific - which part of the code depends on client-side data, and what can be done to improve it? \$\endgroup\$ Oct 25, 2021 at 16:43
  • 1
    \$\begingroup\$ It would be very helpful if you could expand on this answer. \$\endgroup\$ Oct 25, 2021 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.