Skip to content

Commit

Permalink
Merge pull request #618 from etn-ccis/feature/5870-update-example-wit…
Browse files Browse the repository at this point in the history 
…h-okta-integration

Added Okta to example
  • Loading branch information
@surajeaton
surajeaton authored Aug 7, 2024
2 parents 78a00d3 + d623260 commit 26048c4
Show file tree
Hide file tree
Showing 4 changed files with 357 additions and 81 deletions.
2 changes: 2 additions & 0 deletions login-workflow/example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
"@emotion/styled": "^11.10.8",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.10.15",
"@okta/okta-auth-js": "^7.7.0",
"@okta/okta-react": "^6.9.0",
"@types/node": "^17.0.23",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.0.0",
Expand Down
171 changes: 91 additions & 80 deletions login-workflow/example/src/navigation/AppRouter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ import { useApp } from '../contexts/AppContextProvider';
import { useNavigate } from 'react-router';
import { ProjectAuthUIActions } from '../actions/AuthUIActions';
import { Navigate, Outlet, Route, Routes, To } from 'react-router-dom';
import { Login } from '../screens/Login';
import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions';
import { routes } from './Routing';
import { ExampleHome } from '../screens/ExampleHome';
import i18nAppInstance from '../translations/i18n';
import { ChangePassword } from '../components/ChangePassword';
import { Security } from '@okta/okta-react';
import OktaAuth, { OktaAuthOptions, toRelativeUrl } from '@okta/okta-auth-js';
import oktaConfig from '../oktaConfig';
import { OktaLogin } from '../screens/OktaLogin';

const oktaAuth = new OktaAuth(oktaConfig as OktaAuthOptions);

export const AppRouter: React.FC = () => {
const navigation = useNavigate();
Expand All @@ -28,100 +33,106 @@ export const AppRouter: React.FC = () => {
navigation(destination as To);
}, []);

const restoreOriginalUri = (_oktaAuth: any, originalUri: any): void => {
navigate(toRelativeUrl(originalUri || '/', window.location.origin));
};

return (
<Routes>
{/* AUTH ROUTES */}
<Route
element={
<AuthContextProvider
actions={ProjectAuthUIActions(app)}
language={app.language}
navigate={navigate}
routeConfig={routes}
i18n={i18nAppInstance}
rememberMeDetails={{ email: rememberMe ? email : '', rememberMe: rememberMe }}
>
<Outlet />
</AuthContextProvider>
}
>
<Route
path={'/login'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<Login />
</ReactRouterGuestGuard>
}
/>
<Route
path={'/forgot-password'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ForgotPasswordScreen />
</ReactRouterGuestGuard>
}
/>
<Route
path={'/contact-support'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ContactSupportScreen />
</ReactRouterGuestGuard>
}
/>
<Route
path={'/reset-password'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ResetPasswordScreen />
</ReactRouterGuestGuard>
}
/>
{/* USER APPLICATION ROUTES */}
<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
<Routes>
{/* AUTH ROUTES */}
<Route
element={
<>
<AuthContextProvider
actions={ProjectAuthUIActions(app)}
language={app.language}
navigate={navigate}
routeConfig={routes}
i18n={i18nAppInstance}
rememberMeDetails={{ email: rememberMe ? email : '', rememberMe: rememberMe }}
>
<Outlet />
{app.showChangePasswordDialog && <ChangePassword />}
</>
</AuthContextProvider>
}
>
<Route
path={'/homepage'}
path={'/login'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<OktaLogin />
</ReactRouterGuestGuard>
}
/>
<Route
path={'/forgot-password'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ForgotPasswordScreen />
</ReactRouterGuestGuard>
}
/>
<Route
path={'/contact-support'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ContactSupportScreen />
</ReactRouterGuestGuard>
}
/>
<Route
path={'/reset-password'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
<ResetPasswordScreen />
</ReactRouterGuestGuard>
}
/>
{/* USER APPLICATION ROUTES */}
<Route
element={
<>
<Outlet />
{app.showChangePasswordDialog && <ChangePassword />}
</>
}
>
<Route
path={'/homepage'}
element={
<ReactRouterAuthGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/login'}>
<ExampleHome />
</ReactRouterAuthGuard>
}
/>
<Route path={'/'} element={<Navigate to={'/homepage'} replace />} />
</Route>
<Route
path={'*'}
element={
<ReactRouterAuthGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/login'}>
<ExampleHome />
<Navigate to={'/login'} />
</ReactRouterAuthGuard>
}
/>
<Route path={'/'} element={<Navigate to={'/homepage'} replace />} />
</Route>
{/* REGISTRATION ROUTES */}
<Route
path={'*'}
element={
<ReactRouterAuthGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/login'}>
<Navigate to={'/login'} />
</ReactRouterAuthGuard>
<RegistrationContextProvider
language={app.language}
routeConfig={routes}
navigate={navigate}
actions={ProjectRegistrationUIActions()}
i18n={i18nAppInstance}
>
<Outlet />
</RegistrationContextProvider>
}
/>
</Route>
{/* REGISTRATION ROUTES */}
<Route
element={
<RegistrationContextProvider
language={app.language}
routeConfig={routes}
navigate={navigate}
actions={ProjectRegistrationUIActions()}
i18n={i18nAppInstance}
>
<Outlet />
</RegistrationContextProvider>
}
>
<Route path={'/self-registration'} element={<RegistrationWorkflow />} />
<Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
</Route>
</Routes>
>
<Route path={'/self-registration'} element={<RegistrationWorkflow />} />
<Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
</Route>
</Routes>
</Security>
);
};
18 changes: 18 additions & 0 deletions login-workflow/example/src/screens/OktaLogin.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { OktaLoginScreen } 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
projectImage={<img src={EatonLogo} alt="logo" style={{ maxHeight: 80 }} />}
header={<DebugComponent />}
errorDisplayConfig={{
mode: 'message-box',
messageBoxConfig: {
dismissible: true,
position: 'top',
},
}}
/>
);
Loading

0 comments on commit 26048c4

Please sign in to comment.