Usage

Initialize React Devise

Call initReactDevise as early as possible in your application, and before using any other part of React Devise. This function returns a function which returns the config object.

import {initReactDevise} from 'react-devise';

const getConfig = initReactDevise();

Configure Your Store

import {createStore, combineReducers} from 'redux';
import reducers from './reducers'
import reactDeviseReducers from 'react-devise/lib/reducers';

const store = createStore(
  combineReducers({
    ...reducers,
    ...reactDeviseReducers
  })
);

Set Up Routes

React Devise supports the following client routes (which are configurable):

Name	Default Path
login	/users/login
signup	/users/sign-up
requestReconfirm	/users/confirmation/new
confirm	/users/confirmation
requestResetPassword	/users/password/new
resetPassword	/users/password/edit
editUser	/users

To to add these routes, call authRoutes inside your router:

import {Provider} from 'react-redux';
import {Router, Route, Switch} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import reducers from './reducers'
import {authRoutes, PrivateRoute} from 'react-devise';

const App = () => {
  return (
    <Provider store={store}/>
      <Router history={createBrowserHistory()}>
        <Switch>
          <PrivateRoute exact path="/products" component={Products} />
          <Route exact path="/" component={Home} />
          {authRoutes({wrapper: WithAuthLayout, notFoundComponent: NotFound})}
          <Route component={NotFound} />
        </Switch>
      </Router>
    </Provider>
  );
}

The authRoutes function takes two optional arguments:

Arg	Default	Description
wrapper	Route	You may want wrap all auth routes with a higher order component, for example, to apply a common layout. The wrapper is not applied to notFoundComponent.
notFoundComponent	() => <div>Not Found</div>	This component will render if the current route matches the base path (e.g., /users), but does not match any exact route. So when a user visits a path like /users/so-such-route, the notFoundComponent will render.

PrivateRoute

In the preceding code example, /products is a private route, meaning an unauthenticated request to this route will redirect to the login route. By default PrivateRoute uses currentUser.isLoggedIn to decide if the user is authorized. You can override this with the authorize prop, a function that returns an object in the form of {authorized, redirectTo}.

<PrivateRoute 
  exact
  path="/admin"
  component={Admin}
  authorize={currentUser => ({
    authorized: currentUser.isAdmin,
    redirectTo: {
      pathname: '/unauthorized'
    }
  })
/>

IMPORTANT: redirectTo is a react-router location which defaults to the login route. However, keep in mind that the login component redirects to the referrer when currentUser.isLoggedIn equals true. This can cause a redirect loop. So if you are going to provide a custom authorize function, you will want to include a redirectTo other than the login route.

ATTENTION: PrivateRoute does not protect your server. It only prevents routing to client components. It would be very easy for a user to circumvent. Your server must handle authorization of any calls that originate from private routes or anywhere in your client application.

NEXT: Customization Basics >