@jll-tdim-emea/okta-react-redux v0.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 >= v8.11.1 and npm >=5.4.0

NPM packages is private, to get package you will need use Access Token or login with password.

cd project_folder
yarn add @jll-tdim-emea/okta-react-redux

or

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. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. 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. Your app is ready to be deployed!

yarn lint:js or npm run lint:js

Will check and try to fix errors with ESLint, Prettier in src folder.

Publish to NPM

npm publish ./build

Publish new version to 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.

Inside JLL Web User Interface you will find component ThemeProviderWithStore that will help you to start application easily.

All demo below will be with JLL Web User Interface. If you want start without JLL Web User Interface you will need to have redux, redux-actions and redux-thunk installed in your app.

Basic Usage

You need to create config like in example

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

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 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

##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
• AuthorizedRoute
  • AuthorizedRouteLayout
• AuthorizedRedirect
• Logout
• LoginRoute

#####Roles Components

• AllowedForRoles
• DeclinedForRoles

#####Pages

• PageNotFound
• Login

#####Utils

• 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 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
• 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;

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
• 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';