# @onaio/connected-private-route

> Declarative private routing for React and Redux

Latest version **0.1.0** (published 2021-06-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @onaio/connected-private-route
pnpm add @onaio/connected-private-route
yarn add @onaio/connected-private-route
bun add @onaio/connected-private-route
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-06-11 |
| First published | 2019-04-30 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Ona Engineering |
| Maintainers | onaio |

## Links

- npm: https://www.npmjs.com/package/@onaio/connected-private-route
- Repository: https://github.com/onaio/js-tools
- Homepage: https://github.com/onaio/js-tools#readme
- Issues: https://github.com/onaio/js-tools/issues
- npm.io page: https://npm.io/package/@onaio/connected-private-route

## Dependencies (1)

- [@onaio/session-reducer](https://npm.io/package/@onaio/session-reducer.md) ^0.0.13

## Recent versions

- 0.1.0 (latest) — 2021-06-11
- 0.0.13 — 2021-05-12
- 0.0.12 — 2021-01-07
- 0.0.11 — 2020-02-04
- 0.0.10 — 2020-01-30
- 0.0.9 — 2019-08-20
- 0.0.8 — 2019-05-08
- 0.0.7 — 2019-05-08
- 0.0.6 — 2019-05-08
- 0.0.4 — 2019-05-02
- 0.0.3 — 2019-04-30
- 0.0.2 — 2019-04-30
- 0.0.1 — 2019-04-30

## README

# connected-private-route

This is a wrapper around the [`Route` component from react-router](https://reacttraining.com/react-router/web/api/Route).

Basically what it does is that it checks if the current user is logged in and if so allows them to access the route/page, otherwise it sends them to the defined redirect page(usually the login page).

The component will append the path the user was trying to access onto the redirect path as query string with key `next` should authentication fail.

For instance. Say the user types in some url in the browser e.g `example.com/dashboard`.

If the path `/dashboard` routes to this component like so:

```typescript
        <Router>
          <div className={'main-container'}>
            <Switch>
              <Route path="/login" component={Login} />
              <ConnectedPrivateRoute
                exact
                path="/dashboard"
                component={Dashboard}
                redirectPath="/login"
                disableLoginProtection=false
                routerEnabled=true
                routerDisabledRedirectPath='/'
              />
              <Route component={NotFound} />
            </Switch>
          </div>
        </Router>
```

then if the user is authenticated he will be redirected to `example.com/login?next=%2Fdashboard`
`

## Sample usage

```ts
import ConnectedPrivateRoute from '@onaio/connected-private-route'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

class App extends Component {
  render() {
    return (
     ...
        <Router>
          <div className={'main-container'}>
            <Switch>
              <Route path="/login" component={Login} />
              <ConnectedPrivateRoute
                exact
                path="/"
                component={Home}
                redirectPath="/login"
                routerEnabled=true
                routerDisabledRedirectPath='/'
                disableLoginProtection=false
              />
              <Route component={NotFound} />
            </Switch>
          </div>
        </Router>
     ...
    )
  }
}

export default App
```

## How it works

Behind the scenes, it works with the [session reducer](https://github.com/onaio/js-tools/tree/master/packages/session-reducer) to check if the user is logged in.

## The props

- **disableLoginProtection**: if this is true, we don't check if the user is authenticated. Useful for turning off login protection without doing much else. Default value is false.
- **redirectPath**: the path that the user will be redirected to if they are not logged in. Default is "/login".
- **routerEnabled**: check if user is allowed to navigate to this route. Is a protection against navigation to disabled routes. Default is true.
- **routerDisabledRedirectPath**: redirect path if the router is disabled. Default is "/".

---
_Source: https://npm.io/package/@onaio/connected-private-route · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._