From dc39d3766ca8400d980ce1db903a6efa07027e3e Mon Sep 17 00:00:00 2001
From: Suraj Karambe <surajakarambe@eaton.com>
Date: Wed, 11 Sep 2024 01:50:53 +0530
Subject: [PATCH] Updated example with login callback

---
 login-workflow/example/src/App.tsx            |   1 +
 .../src/contexts/AppContextProvider.tsx       |   1 +
 .../example/src/navigation/AppRouter.tsx      | 126 +-------------
 .../example/src/navigation/MainRouter.tsx     | 155 ++++++++++++++++++
 .../example/src/screens/ExampleHome.tsx       |  11 +-
 5 files changed, 168 insertions(+), 126 deletions(-)
 create mode 100644 login-workflow/example/src/navigation/MainRouter.tsx

diff --git a/login-workflow/example/src/App.tsx b/login-workflow/example/src/App.tsx
index 49d70c60..cb2f55ca 100644
--- a/login-workflow/example/src/App.tsx
+++ b/login-workflow/example/src/App.tsx
@@ -65,6 +65,7 @@ export const App = (): JSX.Element => {
             <AppContext.Provider
                 value={{
                     isAuthenticated,
+                    setIsAuthenticated,
                     onUserAuthenticated: (userData): void => {
                         setIsAuthenticated(true);
                         setLoginData(userData);
diff --git a/login-workflow/example/src/contexts/AppContextProvider.tsx b/login-workflow/example/src/contexts/AppContextProvider.tsx
index 05d58a97..684ed2fb 100644
--- a/login-workflow/example/src/contexts/AppContextProvider.tsx
+++ b/login-workflow/example/src/contexts/AppContextProvider.tsx
@@ -7,6 +7,7 @@ export type LoginData = {
 
 export type AppContextType = {
     isAuthenticated: boolean;
+    setIsAuthenticated: (isAuthenticated: boolean) => void;
     loginData: LoginData;
     onUserAuthenticated: (args: { email: string; userId: string; rememberMe: boolean }) => void;
     onUserNotAuthenticated: (clearRememberMe?: boolean, overrideRememberMeEmail?: string) => void;
diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx
index 24894cc6..c23fd4bc 100644
--- a/login-workflow/example/src/navigation/AppRouter.tsx
+++ b/login-workflow/example/src/navigation/AppRouter.tsx
@@ -1,35 +1,15 @@
 import React, { useCallback } from 'react';
-import {
-    AuthContextProvider,
-    OktaAuthContextProvider,
-    ContactSupportScreen,
-    ReactRouterAuthGuard,
-    ReactRouterGuestGuard,
-    ForgotPasswordScreen,
-    RegistrationContextProvider,
-    ResetPasswordScreen,
-    RegistrationWorkflow,
-} from '@brightlayer-ui/react-auth-workflow';
-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 { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions';
-import { routes } from './Routing';
-import { ExampleHome } from '../screens/ExampleHome';
-import i18nAppInstance from '../translations/i18n';
-import { ChangePassword } from '../components/ChangePassword';
+import { To } 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/OktaRedirectLogin';
+import { MainRouter } from './MainRouter';
 
 const oktaAuth = new OktaAuth(oktaConfig as OktaAuthOptions);
 
 export const AppRouter: React.FC = () => {
     const navigation = useNavigate();
-    const app = useApp();
-    const { email, rememberMe } = app.loginData;
     const navigate = useCallback((destination: -1 | string) => {
         navigation(destination as To);
     }, []);
@@ -40,107 +20,7 @@ export const AppRouter: React.FC = () => {
 
     return (
         <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 />
-                        </AuthContextProvider>
-                    }
-                >
-                    <Route
-                        path={'/login'}
-                        element={
-                            <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
-                                <OktaAuthContextProvider
-                                    language={app.language}
-                                    navigate={navigate}
-                                    routeConfig={routes}
-                                    i18n={i18nAppInstance}
-                                >
-                                    <OktaLogin />
-                                </OktaAuthContextProvider>
-                            </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'}>
-                                <Navigate to={'/login'} />
-                            </ReactRouterAuthGuard>
-                        }
-                    />
-                </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>
+            <MainRouter />
         </Security>
     );
 };
diff --git a/login-workflow/example/src/navigation/MainRouter.tsx b/login-workflow/example/src/navigation/MainRouter.tsx
new file mode 100644
index 00000000..2ecdb0d2
--- /dev/null
+++ b/login-workflow/example/src/navigation/MainRouter.tsx
@@ -0,0 +1,155 @@
+import React, { useCallback, useEffect } from 'react';
+import {
+    AuthContextProvider,
+    OktaAuthContextProvider,
+    ContactSupportScreen,
+    ReactRouterAuthGuard,
+    ReactRouterGuestGuard,
+    ForgotPasswordScreen,
+    RegistrationContextProvider,
+    ResetPasswordScreen,
+    RegistrationWorkflow,
+} from '@brightlayer-ui/react-auth-workflow';
+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 { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions';
+import { routes } from './Routing';
+import { ExampleHome } from '../screens/ExampleHome';
+import i18nAppInstance from '../translations/i18n';
+import { ChangePassword } from '../components/ChangePassword';
+import { OktaLogin } from '../screens/OktaRedirectLogin';
+import { useOktaAuth, LoginCallback } from '@okta/okta-react';
+
+export const MainRouter: React.FC = () => {
+    const navigation = useNavigate();
+    const app = useApp();
+    const { email, rememberMe } = app.loginData;
+    const navigate = useCallback((destination: -1 | string) => {
+        navigation(destination as To);
+    }, []);
+    const { authState } = useOktaAuth();
+
+    const { setIsAuthenticated } = useApp();
+
+    useEffect(() => {
+        if (authState && authState.isAuthenticated) {
+            setIsAuthenticated(true);
+        } else {
+            setIsAuthenticated(false);
+        }
+    }, [authState, setIsAuthenticated]);
+
+    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={'/'}>
+                            <OktaAuthContextProvider
+                                language={app.language}
+                                navigate={navigate}
+                                routeConfig={routes}
+                                i18n={i18nAppInstance}
+                            >
+                                <OktaLogin />
+                            </OktaAuthContextProvider>
+                        </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={'/login/callback'}
+                        element={
+                            <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
+                                <LoginCallback />
+                            </ReactRouterGuestGuard>
+                        }
+                    />
+                    <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'}>
+                            <Navigate to={'/login'} />
+                        </ReactRouterAuthGuard>
+                    }
+                />
+            </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>
+    );
+};
diff --git a/login-workflow/example/src/screens/ExampleHome.tsx b/login-workflow/example/src/screens/ExampleHome.tsx
index ff45e7cd..75e78ef8 100644
--- a/login-workflow/example/src/screens/ExampleHome.tsx
+++ b/login-workflow/example/src/screens/ExampleHome.tsx
@@ -31,6 +31,7 @@ import * as Colors from '@brightlayer-ui/colors';
 import FormControl from '@mui/material/FormControl';
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import i18n from '../translations/i18n';
+import { useOktaAuth } from '@okta/okta-react';
 
 export const ExampleHome: React.FC<React.PropsWithChildren> = () => {
     const app = useApp();
@@ -39,7 +40,8 @@ export const ExampleHome: React.FC<React.PropsWithChildren> = () => {
     const [open, setOpen] = useState(false);
     const navigate = useNavigate();
     const theme = useTheme();
-
+    const { oktaAuth } = useOktaAuth();
+    
     const containerStyles = {
         width: '100%',
         height: `calc(100vh - ${theme.spacing(8)})`,
@@ -64,9 +66,12 @@ export const ExampleHome: React.FC<React.PropsWithChildren> = () => {
         justifyContent: 'center',
     };
 
-    const logOut = (): void => {
+    const logOut = async (): Promise<void> => {
+        await oktaAuth.signOut();
         LocalStorage.clearAuthCredentials();
         app.onUserNotAuthenticated();
+        app.setIsAuthenticated(false);
+
         navigate('/login');
     };
 
@@ -152,7 +157,7 @@ export const ExampleHome: React.FC<React.PropsWithChildren> = () => {
                                                 icon: <ExitToApp />,
                                                 title: `${t('USER_MENU.LOG_OUT')}`,
                                                 onClick: (): void => {
-                                                    logOut();
+                                                    void logOut();
                                                 },
                                             },
                                         ],