-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #625 from etn-ccis/feature/update-docs-for-okta-login
Feature/update docs for okta login
- Loading branch information
Showing
24 changed files
with
402 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,7 +8,80 @@ Because this workflow package is router-agnostic, you will be required to set up | |
|
||
You will also want to set up Auth/Guest Guard wrappers to control which users can access which screens / routes. For more information see [Protecting Routes](#protecting-routes) below. | ||
|
||
### Authentication | ||
### Authentication (Okta Redirect) | ||
|
||
The **Authentication** workflow screens are rendered individually on separate routes (e.g., the Okta Redirect Login screen is on '/login'). This means you can deep-link to any of these screens directly if you have them configured. | ||
|
||
You have to add a `Security` component as a wrapper to the `Routes` from [@okta/okta-react](https://www.npmjs.com/package/@okta/okta-react) package. This component initializes the Okta authentication context and provides methods to interact with Okta. | ||
|
||
For more information on the `OktaAuthContextProvider`, refer to the [Authentication Workflow](./authentication-workflow.md#OktaAuthContextProvider) Guide. | ||
|
||
#### Example Setup | ||
|
||
```tsx | ||
import React from 'react'; | ||
import { | ||
AuthContextProvider, | ||
ContactSupportScreen, | ||
ForgotPasswordScreen, | ||
ResetPasswordScreen, | ||
OktaRedirectLoginScreen, | ||
ReactRouterGuestGuard, | ||
ContactSupportScreen, | ||
} from '@brightlayer-ui/react-auth-workflow'; | ||
import { useNavigate } from 'react-router'; | ||
import { ProjectAuthUIActions } from '../actions/AuthUIActions'; | ||
import { Outlet, Route, Routes } from 'react-router-dom'; | ||
import { Security } from '@okta/okta-react'; | ||
import OktaAuth, { OktaAuthOptions, toRelativeUrl } from '@okta/okta-auth-js'; | ||
import oktaConfig from '../oktaConfig'; | ||
import { OktaLogin } from '../screens/OktaLogin'; | ||
|
||
export const routes: RouteConfig = { | ||
LOGIN: '/login', | ||
REGISTER_INVITE: '/register-by-invite?code=8k27jshInvite234Code&[email protected]', | ||
REGISTER_SELF: '/self-registration', | ||
FORGOT_PASSWORD: '/forgot-password', | ||
RESET_PASSWORD: '/reset-password', | ||
SUPPORT: '/support', | ||
}; | ||
|
||
const oktaAuth = new OktaAuth(oktaConfig as OktaAuthOptions); | ||
|
||
export const AppRouter: React.FC = () => { | ||
const navigation = useNavigate(); | ||
const navigate = useCallback((destination: -1 | string) => { | ||
navigation(destination as To); | ||
}, []); | ||
|
||
const restoreOriginalUri = (_oktaAuth: any, originalUri: any): void => { | ||
navigate(toRelativeUrl(originalUri || '/', window.location.origin)); | ||
}; | ||
|
||
return ( | ||
<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}> | ||
<Routes> | ||
<Route | ||
path={routes.LOGIN} | ||
element={ | ||
<ReactRouterGuestGuard isAuthenticated={appState.isAuthenticated} fallBackUrl={'/'}> | ||
<OktaAuthContextProvider | ||
language={'en'} | ||
navigate={navigate} | ||
routeConfig={routes} | ||
> | ||
<OktaRedirectLoginScreen /> | ||
</OktaAuthContextProvider> | ||
</ReactRouterGuestGuard> | ||
} | ||
/> | ||
</Routes> | ||
</Security> | ||
); | ||
}; | ||
``` | ||
|
||
### Authentication for Custom Login | ||
|
||
The **Authentication** workflow screens are rendered individually on separate routes (e.g., the Login screen is on '/login' and the support screen is on '/support'). This means you can deep-link to any of these screens directly if you have them configured. | ||
|
||
|
@@ -23,7 +96,7 @@ import { | |
ContactSupportScreen, | ||
ForgotPasswordScreen, | ||
ResetPasswordScreen, | ||
OktaLoginScreen, | ||
LoginScreen, | ||
ReactRouterGuestGuard, | ||
ContactSupportScreen, | ||
} from '@brightlayer-ui/react-auth-workflow'; | ||
|
@@ -69,7 +142,7 @@ export const AppRouter: React.FC = () => { | |
path={routes.LOGIN} | ||
element={ | ||
<ReactRouterGuestGuard isAuthenticated={appState.isAuthenticated} fallBackUrl={'/'}> | ||
<OktaLoginScreen /> | ||
<LoginScreen /> | ||
</ReactRouterGuestGuard> | ||
} | ||
/> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 2 additions & 9 deletions
11
...orkflow/example/src/screens/OktaLogin.tsx → ...example/src/screens/OktaRedirectLogin.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,11 @@ | ||
import React from 'react'; | ||
import { OktaLoginScreen } from '@brightlayer-ui/react-auth-workflow'; | ||
import { OktaRedirectLoginScreen } from '@brightlayer-ui/react-auth-workflow'; | ||
import EatonLogo from '../assets/images/eaton_stacked_logo.png'; | ||
import { DebugComponent } from '../components/DebugComponent'; | ||
|
||
export const OktaLogin = (): JSX.Element => ( | ||
<OktaLoginScreen | ||
<OktaRedirectLoginScreen | ||
projectImage={<img src={EatonLogo} alt="logo" style={{ maxHeight: 80 }} />} | ||
header={<DebugComponent />} | ||
errorDisplayConfig={{ | ||
mode: 'message-box', | ||
messageBoxConfig: { | ||
dismissible: true, | ||
position: 'top', | ||
}, | ||
}} | ||
/> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
{ | ||
"name": "@brightlayer-ui/react-auth-workflow", | ||
"version": "5.0.0-beta.0", | ||
"version": "5.0.0-beta.1", | ||
"author": "Brightlayer UI <[email protected]> (https://github.com/brightlayer-ui)", | ||
"license": "BSD-3-Clause", | ||
"description": "Re-usable workflow components for Authentication and Registration within Eaton applications.", | ||
|
49 changes: 49 additions & 0 deletions
49
login-workflow/src/contexts/OktaAuthContext/OktaAuthContextProvider.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import React from 'react'; | ||
import { render, cleanup, screen, renderHook } from '@testing-library/react'; | ||
import '@testing-library/jest-dom'; | ||
import { OktaAuthContextProvider } from './provider'; | ||
import { useOktaAuthContext } from '.'; | ||
import { authContextProviderProps } from '../../testUtils'; | ||
|
||
afterEach(cleanup); | ||
|
||
describe('OktaAuthContextProvider', () => { | ||
it('should render OktaAuthContextProvider without crashing', () => { | ||
render(<OktaAuthContextProvider {...authContextProviderProps}>Hello Auth</OktaAuthContextProvider>); | ||
|
||
expect(screen.getByText('Hello Auth')).toBeInTheDocument(); | ||
}); | ||
|
||
it('should read values from the context', () => { | ||
const wrapper = ({ children }: any): JSX.Element => ( | ||
<OktaAuthContextProvider {...authContextProviderProps}>{children}</OktaAuthContextProvider> | ||
); | ||
const { result } = renderHook(() => useOktaAuthContext(), { wrapper }); | ||
|
||
expect(result.current.language).toBe('en'); | ||
}); | ||
|
||
it('should set values in the context', () => { | ||
const wrapper = ({ children }: any): JSX.Element => ( | ||
<OktaAuthContextProvider {...authContextProviderProps} language="es"> | ||
{children} | ||
</OktaAuthContextProvider> | ||
); | ||
const { result } = renderHook(() => useOktaAuthContext(), { wrapper }); | ||
|
||
expect(result.current.language).not.toBe('en'); | ||
expect(result.current.language).toBe('es'); | ||
}); | ||
|
||
it('should render multiple children', () => { | ||
render( | ||
<OktaAuthContextProvider {...authContextProviderProps}> | ||
<div>Child 1</div> | ||
<div>Child 2</div> | ||
</OktaAuthContextProvider> | ||
); | ||
|
||
expect(screen.getByText('Child 1')).toBeInTheDocument(); | ||
expect(screen.getByText('Child 2')).toBeInTheDocument(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/** | ||
* @packageDocumentation | ||
* @module OktaAuthContext | ||
*/ | ||
import { createContext } from 'react'; | ||
import { OktaAuthContextProviderProps } from './types'; | ||
|
||
/** | ||
* Okta Auth Context is used to access context in the okta authentication workflow | ||
*/ | ||
export const OktaAuthContext = createContext<OktaAuthContextProviderProps | null>(null); |
Oops, something went wrong.