npm package: @jll-tdim-emea-dev/okta-react-redux
Description: React Components for managing authorization with OKTA using Redux.
Author: Oleksii Sorokin
Latest version: 0.2.1-8

# JLL Okta React Redux (OKTA) v1
React Components for managing authorization with OKTA using Redux. 

## Install
You need to have installed [Node.js](https://nodejs.org/en/) >= v8.11.1 and [npm](https://docs.npmjs.com/getting-started/what-is-npm) >=5.4.0 

NPM packages is private, to get package you will need use Access Token or login with password. 

```sh
cd project_folder
yarn add @jll-tdim-emea/okta-react-redux
```
or
```sh
cd project_folder
npm i -P @jll-tdim-emea/okta-react-redux
```

## Available Scripts

#####!!Before publishing application you need to update version on `package.json`!!
In the project directory, you can run:

### `yarn start` or `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `yarn build-lib` or `npm run build-lib`

Builds the app for npm relese to the `build` folder.<br>
Your app is ready to be deployed!

### `yarn lint:js` or `npm run lint:js`
Will check and try to fix errors with [ESLint](https://eslint.org/), [Prettier](https://prettier.io/) in `src` folder.

## Publish to NPM


### `npm publish ./build`
Publish new version to [npmjs.com](https://www.npmjs.com/)

## Usage

To user Okta Auth you need to have redux in your application to connect with app reducer.
If you bootstrap application from scratch better to start from [JLL Web User Interface](https://www.npmjs.com/package/@jll-tdim-emea/web-ui).

Inside [JLL Web User Interface](https://www.npmjs.com/package/@jll-tdim-emea/web-ui)
you will find component ```ThemeProviderWithStore``` that will help you to start application easily.

All demo below will be with [JLL Web User Interface](https://www.npmjs.com/package/@jll-tdim-emea/web-ui).
If you want start without [JLL Web User Interface](https://www.npmjs.com/package/@jll-tdim-emea/web-ui)
you will need to have [redux](https://redux.js.org/),
 [redux-actions](https://github.com/redux-utilities/redux-actions) and [redux-thunk](https://github.com/gaearon/redux-thunk) installed in your app.

## Basic Usage

You need to create config like in example

```js
const config = {
  okta: {
    url: 'okta_app_url',
    issuer: 'okta_app_issuer_url',
    clientId: 'okta_app_id',
    redirectUri: '/auth/cb',
  },
  appURL: '/',
  widgetOptions: {
    baseUrl: url, //baseUrl is required option
    // ...any widget options
    // below just example
    i18n: {
      en: {
        'primaryauth.title': 'Sign in to JLL Test Application',
      },
    },
  },
};
```
full documentation to okta widget here - [okta-signin-widget](https://github.com/okta/okta-signin-widget)

```jsx
import React from 'react';
import { render } from 'react-dom';
import ThemeProviderWithStore from '@jll-tdim-emea/web-ui/components/ThemeProvider';
import okta from '@jll-tdim-emea/okta-react-redux/reducers';
import { Switch, Route } from 'react-router-dom';
import {
  Authorization,
  LoginRoute,
  AuthorizedRoute,
  PageNotFound,
} from '@jll-tdim-emea/okta-react-redux';

const config = {
  okta: {
    url: 'okta_app_url',
    issuer: 'okta_app_issuer_url',
    clientId: 'okta_app_id',
    redirectUri: '/auth/cb',
  },
  appURL: '/', // is required
  widgetOptions: {
    baseUrl: 'okta_app_url', // is required
    // ...any widget options. Below just example
    i18n: {
      en: {
        'primaryauth.title': 'Sign in to JLL Test Application',
      },
    },
  },
};

function App() {
  return (
    <ThemeProviderWithStore stores={{ okta }}>
      <Authorization Loader={<span>Loader Component</span>} oktaConfig={config.okta}>
        <Switch>
          <AuthorizedRoute exact path="/" component={() => <h1>Dashboard</h1>} />
          <Route exact path="/not_secured_route" component={() => <h1>Some Route</h1>} />
          <LoginRoute
            exact
            path="/login"
            widgetOptions={config.widgetOptions}
            appURL={config.appURL}
          />
          <PageNotFound logoPath="path_to_logo" />
        </Switch>
      </Authorization>
    </ThemeProviderWithStore>
  );
}

export default render(<App />, document.querySelector('#root'));
```

1) Add okta reducer to store in ```ThemeProviderWithStore``` component 
2) Pass okta config in ```Authorization``` component 
3) Inside ```Authorization``` we user basic ```Switch```
 from [react-router](https://reacttraining.com/react-router/) with simple routs.
4) For auth routes we will use ```AuthorizedRoute``` from ```@jll-tdim-emea/okta-react-redux```
5) For login we will use ```LoginRoute``` from ```@jll-tdim-emea/okta-react-redux```
6) For 404 we will use ```PageNotFound``` from ```@jll-tdim-emea/okta-react-redux```
7) For regular Route we can use ```Route``` from [react-router](https://reacttraining.com/react-router/)

##Components
OKTA has a lot of different components to cover all parts of authorization needs.
Because authorization and routing is very closely one to other this package include
 components with routing.

- [Authorization](#authorization)
- [AuthorizedRoute](#authorizedroute)
  - [AuthorizedRouteLayout](#authorizedroutelayout)
- [AuthorizedRedirect](#authorizedredirect)
- [Logout](#logout)
- [LoginRoute](#loginroute)

#####Roles Components
- [AllowedForRoles](#allowedforroles)
- [DeclinedForRoles](#declinedforroles)

#####Pages
- [PageNotFound](#pagenotfound)
- [Login](#login)

#####Utils
- [getURLParameter](#geturlparameter)

##Authorization
Basic Auth Provider component

    import Authorization from '@jll-tdim-emea/okta-react-redux/components/Authorization';

- `debugMode` - Boolean show debug console if in location search will be ```?debug=true```
- `Loader` - React Component to show loader when okta is fetching
- `afterAuth` - Function fun after okta auth is success
- `getRole` - Function after this function Authorization will wait filled ```role``` in
 okta reducer

##AuthorizedRoute
    import AuthorizedRoute from '@jll-tdim-emea/okta-react-redux/components/AuthorizedRoute';

- `any props` - from [react-router](https://reacttraining.com/react-router/)
  But you can't user ```render``` option. Only ```component```
- `component` - React Component will render if user logged in
- `allowed` - Array of Strings with list of users roles that will have access to this route
  If user role not in this list he will redirect to ```404 page```
  
##AuthorizedRouteLayout
    import AuthorizedRouteLayout from '@jll-tdim-emea/okta-react-redux/components/AuthorizedRouteLayout';

- `all` - from [AuthorizedRoute](#authorized-route)
- `layout` - React Component will wrap your  ```component```

##AuthorizedRedirect
If User not authorised he will redirect ```to```  

    import AuthorizedRedirect from '@jll-tdim-emea/okta-react-redux/components/AuthorizedRedirect';

- `to` - String with URL for redirect

##Logout
Component for Logout. If render this component you will be logged off and
 redirect to login page.

    import Logout from '@jll-tdim-emea/okta-react-redux/components/Logout';

##LoginRoute
Just wrapped Route from [react-router](https://reacttraining.com/react-router/);
  
    import LoginRoute from '@jll-tdim-emea/okta-react-redux/components/LoginRoute';


##AllowedForRoles
If User have one of roles, this component will render ```children``` with ```props```. In other case render ```null```.
    
    import AllowedForRoles from '@jll-tdim-emea/okta-react-redux/components/AllowedForRoles';

- `roles` - Array of Strings with list of roles

##DeclinedForRoles
If User have one of roles, this component will render ```null```. In other case render ```children``` with ```props```.
    
    import DeclinedForRoles from '@jll-tdim-emea/okta-react-redux/components/DeclinedForRoles';

- `roles` - Array of Strings with list of roles

##PageNotFound
Render component for 404 with Logo    
   
    import PageNotFound from '@jll-tdim-emea/okta-react-redux/components/PageNotFound';

- `logoPath` - String path to logo image

##Login
Render component for Login
   
    import Login from '@jll-tdim-emea/okta-react-redux/components/Login';

- `widgetOptions` - okta widget config - [okta-signin-widget](https://github.com/okta/okta-signin-widget)
- `appURL` - String with path to application, user will be redirected after login

##getURLParameter
help Function take one param ```name``` and return result from ```location.search```
   
    import getURLParameter from '@jll-tdim-emea/okta-react-redux/getURLParameter';