Feature/5869 okta login screen docs

login-workflow/README.md

@@ -6,6 +6,7 @@ The React Auth Workflow package provides a consistent UI implementation of authe
 
 The package is intended to provide a standard, out-of-the-box experience for capabilities such as:
 
+-   Okta Login
 -   Login
 -   Forgot / Reset Password
 -   Change Password

login-workflow/docs/API.md

@@ -123,6 +123,7 @@ Exported screens that can be used to customize the auth workflow.
 -   [EulaScreen](./screens/eula.md)
 -   [ForgotPasswordScreen](./screens/forgot-password.md)
 -   [LoginScreen](./screens/login.md)
+-   [OktaLoginScreen](./screens/okta-login.md)
 -   [ResetPasswordScreen](./screens/reset-password.md)
 -   [SuccessScreen](./screens/success.md)
 -   [VerifyCodeScreen](./screens/verify-code.md)

login-workflow/docs/routing.md

@@ -23,7 +23,7 @@ import {
     ContactSupportScreen,
     ForgotPasswordScreen,
     ResetPasswordScreen,
-    LoginScreen,
+    OktaLoginScreen,
     ReactRouterGuestGuard,
     ContactSupportScreen,
 } from '@brightlayer-ui/react-auth-workflow';
@@ -69,7 +69,7 @@ export const AppRouter: React.FC = () => {
                     path={routes.LOGIN}
                     element={
                         <ReactRouterGuestGuard isAuthenticated={appState.isAuthenticated} fallBackUrl={'/'}>
-                            <LoginScreen />
+                            <OktaLoginScreen />
                         </ReactRouterGuestGuard>
                     }
                 />

login-workflow/docs/screens/README.md

@@ -12,7 +12,8 @@ The following screen components are available:
 - [CreatePasswordScreen](./create-password.md)
 - [EulaScreen](./eula.md)
 - [ForgotPasswordScreen](./forgot-password.md)
-- [LoginScreen](./account-details.md)
+- [LoginScreen](./login.md)
+- [OktaLoginScreen](./okta-login.md)
 - [ResetPasswordScreen](./reset-password.md)
 - [SuccessScreen](./success.md)
 - [VerifyCodeScreen](./verify-code.md)

login-workflow/docs/screens/okta-login.md

@@ -0,0 +1,37 @@
+# OktaLoginScreen
+
+The `OktaLoginScreen` component is a part of the login workflow and is used to render a login screen that integrates with Okta for authentication. The OktaLoginScreen must be used within an `AuthContextProvider` 
+
+![Okta Login](../../media/screens/okta-login.png)
+
+## Import
+
+```tsx
+import { OktaLoginScreen } from '@brightlayer-ui/react-auth-workflow';
+
+...
+
+<OktaLoginScreen />
+```
+
+## API
+
+| Prop Name | Type | Description | Default |
+|---|---|---|---|
+| loginButtonLabel | `string` | Label for the login button. | `t('bluiCommon:ACTIONS.LOG_IN')` |
+| onLogin | `() => Promise<void> \| void` | Callback function that is called when the login button is clicked. |  |
+| showForgotPassword | `boolean` | Whether or not to show the 'forgot password' link. | `true` |
+| forgotPasswordLabel | `string` | Label for the 'forgot password' link. | `t('bluiCommon:LABELS.FORGOT_PASSWORD')` |
+| onForgotPassword | `() => void` | Callback function that is called when the 'forgot password' link is clicked. |  |
+| showSelfRegistration | `boolean` | Whether or not to show the 'self registration' link. | `true` |
+| selfRegisterButtonLabel | `string` | Label for the 'self registration' link. | `t('bluiCommon:ACTIONS.CREATE_ACCOUNT')` |
+| selfRegisterInstructions | `string` | Instructions to display before the 'self registration' link. | `t('bluiCommon:LABELS.NEED_ACCOUNT')` |
+| onSelfRegister | `() => void` | Callback function that is called when the 'self registration' link is clicked. |  |
+| showContactSupport | `boolean` | Whether or not to show the 'contact support' link. | `true` |
+| contactSupportLabel | `string` | Label for the 'contact support' link. | `t('bluiCommon:MESSAGES.CONTACT')` |
+| onContactSupport | `() => void` | Callback function that is called when the 'contact support' link is clicked. |  |
+| errorDisplayConfig | `ErrorManagerProps` | See [Error Management](../error-management.md) |  |
+| showCyberSecurityBadge | `boolean` | Whether or not to show the cyber security badge. | `true` |
+| projectImage | `ReactNode` | Image to display at the top of the screen. |  |
+| header | `ReactNode` | Custom content to display at the top of the screen. |  |
+| footer | `ReactNode` | Custom content to display at the bottom of the screen. |  |

login-workflow/example/.env.sample

@@ -0,0 +1,2 @@
+REACT_APP_OKTA_CLIENT_ID=<your-okta-client-id>
+REACT_APP_OKTA_ISSUER=<your-okta-issuer-url>

login-workflow/example/README.md

@@ -2,6 +2,18 @@ This project is a sample that demonstrates how to use [@brightlayer-ui/react-aut
 
 It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+This project now includes an Okta login screen for authentication. To use the Okta login screen, you need to configure your Okta application and update the environment variables in your project.
+
+## Okta Configuration
+
+1. Create an application in Okta.
+2. Update the `.env` file in your project directory with the following variables:
+    ```
+    REACT_APP_OKTA_CLIENT_ID=<your-okta-client-id>
+    REACT_APP_OKTA_ISSUER=<your-okta-issuer-url>
+    ```
+**Note: The Okta login screen will be automatically presented to the user if they are not authenticated. The user can log in using their Okta credentials. Once authenticated, they will be redirected to the Home screen.**
+
 ## Available Scripts
 
 In the project directory, you can run:

login-workflow/src/screens/OktaLoginScreen/types.ts

@@ -1,13 +1,7 @@
 import { WorkflowCardBaseProps } from '../../components/WorkflowCard/WorkflowCard.types';
 import { ErrorManagerProps } from '../../components/Error/types';
-import { OktaAuthOptions } from '@okta/okta-auth-js';
 
 export type OktaLoginScreenProps = WorkflowCardBaseProps & {
-    /**
-     * Options for configuring the Okta Auth SDK.
-     */
-    oktaAuthOptions?: OktaAuthOptions;
-
     /**
      * The label for the username field
      */