@jll-tdim-emea-dev/okta-react-redux
v0.2.1-8
Published
React Components for managing authorization with OKTA using Redux.
Downloads
11
Readme
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'));
- Add okta reducer to store in
ThemeProviderWithStore
component - Pass okta config in
Authorization
component - Inside
Authorization
we user basicSwitch
from react-router with simple routs. - For auth routes we will use
AuthorizedRoute
from@jll-tdim-emea/okta-react-redux
- For login we will use
LoginRoute
from@jll-tdim-emea/okta-react-redux
- For 404 we will use
PageNotFound
from@jll-tdim-emea/okta-react-redux
- 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.
#####Roles Components
#####Pages
#####Utils
##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 fetchingafterAuth
- Function fun after okta auth is successgetRole
- Function after this function Authorization will wait filledrole
in okta reducer
##AuthorizedRoute import AuthorizedRoute from '@jll-tdim-emea/okta-react-redux/components/AuthorizedRoute';
any props
- from react-router But you can't userrender
option. Onlycomponent
component
- React Component will render if user logged inallowed
- 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 to404 page
##AuthorizedRouteLayout import AuthorizedRouteLayout from '@jll-tdim-emea/okta-react-redux/components/AuthorizedRouteLayout';
all
- from AuthorizedRoutelayout
- React Component will wrap yourcomponent
##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-widgetappURL
- 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';