How to hide part of react.js application from authorized user?

user_5306567 0
Viewed 662

I'm working on frontend application, and most part of it should be hidden from unauthorized user. When using default react application (like create-react-app) it bundles everything in one (almost) file and then clients downloads it. So client has content of all the components.

What is the most secure and convenient way to hide data from the client? I want to serve internal content of the application only when user logged in.

reactjs frontend security
3 Answers

The only way to do this is to use a server-side rendering application.

You can't just send a part of your files based on the role of a user in a client side app.

user_120099230

Ideally, Server side rendering is one way to send separate portions of an application to clients. It provides control in choosing what gets delivered to clients. A second way would be to create separate bundles from webpack or another bundler (clientA.html, clientA.js), (clientB.html, clientB.js) and serve them based on authentication or account type. The frontend is most often just a view layer of MVC and data is controlled by the backend.

user_132152800

You can use "react-router-dom" npm package. Private route example:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../utils'; // return true if user logged in

const PrivateRoute = ({component: Component, ...rest}) => {
    return (
        // Show component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            isLogin() ?
                <Component {...props} />
            : <Redirect to="/signin" />
        )} />
    );
};

export default PrivateRoute;

Public route example:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../utils';

const PublicRoute = ({component: Component, restricted, ...rest}) => {
    return (
        // restricted = false meaning public route
        // restricted = true meaning restricted route
        <Route {...rest} render={props => (
            isLogin() && restricted ?
                <Redirect to="/dashboard" />
            : <Component {...props} />
        )} />
    );
};

export default PublicRoute;

Together:

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Switch } from 'react-router-dom';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import SignIn from './components/SignIn';
import PrivateRoute from './components/PrivateRoute';
import PublicRoute from './components/PublicRoute';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <PublicRoute restricted={false} component={Home} path="/" exact />
          <PublicRoute restricted={true} component={SignIn} path="/signin" exact />
          <PrivateRoute component={Dashboard} path="/dashboard" exact />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Also, you can create webpack build and cut chunks one by route(page)

user_40122290
Related