@brightlayer-ui/react-native-template-authentication-typescript 4.0.0-alpha.0 → 4.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## v4.0.0 (Unreleased)
+## v4.0.0 (July 30, 2025)
 
 ### Changed
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-native-template-authentication-typescript",
-    "version": "4.0.0-alpha.0",
+    "version": "4.0.0",
     "author": "brightlayer-ui <brightlayer-ui@eaton.com>",
     "keywords": [
         "react native",

package/template/App.tsx

@@ -15,12 +15,12 @@ import { blue, blueDark } from '@brightlayer-ui/react-native-themes';
 import i18nAppInstance from './translations/i18n';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { AppContext, AppContextType } from './src/contexts/AppContextProvider';
-import { LocalStorage } from './src/store/local-storage';
 import { Spinner } from '@brightlayer-ui/react-native-auth-workflow';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-// import { NativeModules, Platform } from 'react-native';
+import { NativeModules, Platform } from 'react-native';
+import { isAuthenticated as isOktaAuthenticated, EventEmitter, getAccessToken } from '@okta/okta-react-native';
 
-export const App = (): JSX.Element => {
+export const App = (): React.JSX.Element => {
     const [theme, setTheme] = useState<ThemeType>('light');
     const [language, setLanguage] = useState('en');
     const [isAuthenticated, setAuthenticated] = useState<AppContextType['isAuthenticated']>(false);
@@ -37,25 +37,54 @@ export const App = (): JSX.Element => {
                 setLanguage(storedLanguage);
                 void i18n.changeLanguage(storedLanguage);
             } else {
-                const locale = 'en';
-                // Platform.OS === 'ios'
-                //     ? NativeModules.SettingsManager.settings.AppleLocale
-                //     : NativeModules.I18nManager.localeIdentifier;
+                let locale = 'en';
+                locale =
+                    Platform.OS === 'ios'
+                        ? NativeModules.SettingsManager.settings.AppleLocale ||
+                          NativeModules.SettingsManager.settings.AppleLocale[0]
+                        : NativeModules.I18nManager.localeIdentifier;
                 setLanguage(locale?.substring(0, 2) || 'en');
             }
         } catch (error) {
+            let locale = 'en';
+            locale =
+                Platform.OS === 'ios'
+                    ? NativeModules.SettingsManager.settings.AppleLocale ||
+                      NativeModules.SettingsManager.settings.AppleLocale[0]
+                    : NativeModules.I18nManager.localeIdentifier;
+            setLanguage(locale?.substring(0, 2) || 'en');
             console.error('Error getting language from Async Storage:', error);
         }
     };
+
+    const handleSignInSuccess = (): any => {
+        setAuthenticated(true);
+        try {
+            getAccessToken() // eslint-disable-next-line
+                .then((res) => console.log(res.access_token)) // eslint-disable-next-line
+                .catch((err) => console.log(err));
+        } catch (error) {
+            console.error('Okta error for access token', error);
+        }
+    };
+
+    useEffect(() => {
+        EventEmitter.addListener('signInSuccess', handleSignInSuccess);
+
+        return (): any => {
+            EventEmitter.removeAllListeners('signInSuccess');
+        };
+    }, []);
+
     // handle initialization of auth data on first load
     useEffect(() => {
         const initialize = async (): Promise<void> => {
             try {
-                const userData = await LocalStorage.readAuthData();
-                setLoginData({ email: userData.rememberMeData.user, rememberMe: userData.rememberMeData.rememberMe });
-                setAuthenticated(Boolean(userData.userId));
+                const authState = await isOktaAuthenticated();
+                setAuthenticated(Boolean(authState?.authenticated));
                 await getLanguage();
-            } catch {
+            } catch (error) {
+                console.error('Error initializing authentication state:', error);
                 // handle any error state, rejected promises, etc..
             } finally {
                 setIsLoading(false);
@@ -64,7 +93,6 @@ export const App = (): JSX.Element => {
         // eslint-disable-next-line
         initialize();
     }, []);
-
     return isLoading ? (
         <Spinner visible={isLoading} />
     ) : (

package/template/android/app/build.gradle

@@ -120,4 +120,3 @@ dependencies {
 }
 
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
-apply from: "../../node_modules/@brightlayer-ui/react-native-vector-icons/fonts.gradle"

package/template/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
     presets: ['module:@react-native/babel-preset'],
     // react-native-reanimated/plugin must be listed last
-    plugins: ['react-native-reanimated/plugin'],
+    plugins: ['module:react-native-dotenv', 'react-native-reanimated/plugin'],
 };

package/template/ios/Podfile.lock

@@ -1778,6 +1778,8 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
+  - react-native-vector-icons-material-design-icons (12.2.0)
+  - react-native-vector-icons-material-icons (12.2.0)
   - react-native-webview (13.15.0):
     - boost
     - DoubleConversion
@@ -2281,7 +2283,7 @@ PODS:
     - React-perflogger (= 0.80.1)
     - React-utils (= 0.80.1)
     - SocketRocket
-  - RNBLUIVectorIcons (2.4.0):
+  - RNBLUIVectorIcons (3.0.0):
     - React
   - RNCAsyncStorage (2.2.0):
     - boost
@@ -2690,6 +2692,8 @@ DEPENDENCIES:
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-vector-icons-material-design-icons (from `../node_modules/@react-native-vector-icons/material-design-icons`)"
+  - "react-native-vector-icons-material-icons (from `../node_modules/@react-native-vector-icons/material-icons`)"
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
@@ -2828,6 +2832,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-vector-icons-material-design-icons:
+    :path: "../node_modules/@react-native-vector-icons/material-design-icons"
+  react-native-vector-icons-material-icons:
+    :path: "../node_modules/@react-native-vector-icons/material-icons"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-NativeModulesApple:
@@ -2957,6 +2965,8 @@ SPEC CHECKSUMS:
   react-native-pager-view: 6e60acfd433ace1a7a1af75bd80b619a41478640
   react-native-restart: 0bc732f4461709022a742bb29bcccf6bbc5b4863
   react-native-safe-area-context: d3738f0c3b1fcefaed874a45891b0d44306c47c1
+  react-native-vector-icons-material-design-icons: e406b4fc1787999a5d150c897837150543e90b9c
+  react-native-vector-icons-material-icons: 02aacdc7a2aa4d22dd841eaddad080a5f967b888
   react-native-webview: 9a8ea59197aa76145b8ce72aa3eea69f1e89dd38
   React-NativeModulesApple: 983f3483ef0a3446b56d490f09d579fba2442e17
   React-oscompat: 114036cd8f064558c9c1a0c04fc9ae5e1453706a
@@ -2989,7 +2999,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be
   ReactCodegen: f8d5fb047c4cd9d2caade972cad9edac22521362
   ReactCommon: 17fd88849a174bf9ce45461912291aca711410fc
-  RNBLUIVectorIcons: c45655a90c6b6d2777bb6443c7088a63149c4b52
+  RNBLUIVectorIcons: 60165888903e319a1ef8acf2e1e3ef2a9fc1192c
   RNCAsyncStorage: 1f04c8d56558e533277beda29187f571cf7eecb2
   RNCMaskedView: 4c5ee1c8667d56077246cc6d1977f77393923560
   RNGestureHandler: 5e1a1605659c22098719fc2e8aee453fe728f52e

package/template/okta.config.js

@@ -0,0 +1,10 @@
+export default {
+    oidc: {
+        clientId: process.env.OKTA_CLIENT_ID,
+        redirectUri: process.env.OKTA_REDIRECT_URI,
+        endSessionRedirectUri: process.env.OKTA_LOGOUT_REDIRECT_URI,
+        discoveryUri: process.env.OKTA_ISSUER,
+        scopes: ['openid', 'profile', 'offline_access', 'groups'],
+        requireHardwareBackedKeyStore: false,
+    },
+};

package/template/package.json

@@ -17,13 +17,15 @@
     "dependencies": {
         "@brightlayer-ui/colors": "^4.0.0",
         "@brightlayer-ui/icons-svg": "^1.15.0",
-        "@brightlayer-ui/react-native-auth-workflow": "^7.0.2",
-        "@brightlayer-ui/react-native-components": "^8.0.4",
-        "@brightlayer-ui/react-native-themes": "^7.0.1",
-        "@brightlayer-ui/react-native-vector-icons": "^2.4.0",
+        "@brightlayer-ui/react-native-auth-workflow": "^8.0.0",
+        "@brightlayer-ui/react-native-components": "^9.0.0",
+        "@brightlayer-ui/react-native-themes": "^8.0.0",
+        "@brightlayer-ui/react-native-vector-icons": "^3.0.0",
         "@okta/okta-react-native": "^2.17.0",
         "@react-native-async-storage/async-storage": "^2.2.0",
         "@react-native-community/masked-view": "^0.1.11",
+        "@react-native-vector-icons/material-design-icons": "^12.2.0",
+        "@react-native-vector-icons/material-icons": "^12.2.0",
         "@react-native/new-app-screen": "0.80.0",
         "@react-navigation/drawer": "^6.6.6",
         "@react-navigation/native": "^6.1.9",
@@ -35,6 +37,7 @@
         "react": "^19.1.0",
         "react-i18next": "^15.5.3",
         "react-native": "^0.80.0",
+        "react-native-dotenv": "^3.4.11",
         "react-native-gesture-handler": "^2.26.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modal": "^13.0.2",

package/template/src/components/UserMenuComponent.tsx

@@ -2,7 +2,6 @@ import { InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-compon
 import React from 'react';
 import { Avatar } from 'react-native-paper';
 import * as BLUIColors from '@brightlayer-ui/colors';
-import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
 import SelectDropdown from 'react-native-select-dropdown';
 import { useTranslation } from 'react-i18next';
 import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
@@ -11,6 +10,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LocalStorage } from '../store/local-storage';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { revokeAccessToken, clearTokens, signOut } from '@okta/okta-react-native';
+import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
 
 const SwapIcon: IconFamily = {
     family: 'material',
@@ -53,10 +54,43 @@ export const UserMenuComponent: React.FC<UserMenuExampleProps> = (props) => {
             console.error('Error setting new language:', error);
         }
     };
-    const logout = (): void => {
+    const logout = async (): Promise<void> => {
+        // Clear local credentials first
         LocalStorage.clearAuthCredentials();
+
+        // Try to sign out from Okta, but continue with local logout even if it fails
+        try {
+            await signOut();
+        } catch (signOutError) {
+            // eslint-disable-next-line no-console
+            console.error('Sign out from Okta failed:', signOutError);
+        }
+
+        try {
+            await revokeAccessToken();
+        } catch (revokeError) {
+            // eslint-disable-next-line no-console
+            console.error('Token revocation failed:', revokeError);
+        }
+
+        try {
+            await clearTokens();
+        } catch (clearError) {
+            // eslint-disable-next-line no-console
+            console.error('Clear tokens failed:', clearError);
+        }
+
+        // Always proceed with local logout regardless of Okta errors
         app.onUserNotAuthenticated();
     };
+    const handleLogout = (): void => {
+        logout().catch((error) => {
+            // Handle any errors here if needed
+            console.error('Logout process failed:', error);
+            // Even if logout fails, ensure user is logged out locally
+            app.onUserNotAuthenticated();
+        });
+    };
     const changePassword = (): void => {
         navigation.navigate('ChangePassword');
     };
@@ -81,7 +115,9 @@ export const UserMenuComponent: React.FC<UserMenuExampleProps> = (props) => {
             rightComponent: (
                 <SelectDropdown
                     defaultValue={languageOptions.find((option) => option.value === i18n.language)}
-                    onSelect={(item: any) => void handleLanguageChange(item.value)}
+                    onSelect={(item) => {
+                        void handleLanguageChange(item.value);
+                    }}
                     data={languageOptions}
                     buttonStyle={{ backgroundColor: theme.colors.background }}
                     buttonTextStyle={{ color: theme.colors.primary }}
@@ -94,7 +130,7 @@ export const UserMenuComponent: React.FC<UserMenuExampleProps> = (props) => {
             ),
         },
         { title: t('USER_MENU.CHANGE_PASSWORD'), icon: LockIcon, onPress: (): void => changePassword() },
-        { title: t('USER_MENU.LOG_OUT'), icon: ExitToAppIcon, onPress: (): void => logout() },
+        { title: t('USER_MENU.LOG_OUT'), icon: ExitToAppIcon, onPress: handleLogout },
     ];
 
     return (

package/template/src/contexts/RegistrationContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+
+type RegistrationContextType = {
+    isRequestingCode: number;
+    setIsRequestingCode: (value: number) => void;
+};
+
+const RegistrationContext = createContext<RegistrationContextType | undefined>(undefined);
+
+export const RegistrationProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [isRequestingCode, setIsRequestingCode] = useState(0);
+
+    return (
+        <RegistrationContext.Provider value={{ isRequestingCode, setIsRequestingCode }}>
+            {children}
+        </RegistrationContext.Provider>
+    );
+};
+
+export const useRegistrationContext = (): RegistrationContextType => {
+    const context = useContext(RegistrationContext);
+    if (!context) {
+        throw new Error('useRegistrationContext must be used within a RegistrationProvider');
+    }
+    return context;
+};

package/template/src/navigation/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import { NavigationContainer, createNavigationContainerRef, useNavigation } from '@react-navigation/native';
 import { useApp } from '../contexts/AppContextProvider';
 import {
@@ -16,7 +16,6 @@ import { Dimensions, View } from 'react-native';
 import { ProjectAuthUIActions } from '../actions/AuthUIActions';
 import { ProjectRegistrationUIActions } from '../actions/RegistrationUIActions';
 
-import { Login } from '../screens/Login';
 import { ChangePassword } from '../screens/ChangePassword';
 import { Registration } from '../screens/Registration';
 import { RegistrationInvite } from '../screens/RegistrationInvite';
@@ -25,9 +24,11 @@ import { Homepage } from '../screens/Homepage';
 import Locations from '../screens/Locations';
 import Dashboard from '../screens/Dashboard';
 import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
+import { OktaLogin } from '../screens/OktaLogin';
 
 const Stack = createNativeStackNavigator();
 const Drawer = createDrawerNavigator();
+const LoginStack = createNativeStackNavigator();
 const navigationRef = createNavigationContainerRef();
 
 export type RootStackParamList = {
@@ -48,6 +49,57 @@ const AuthRouter = (): any => {
     const { email, rememberMe } = app.loginData;
     const navigation = useNavigation<NativeStackNavigationProp<any>>();
 
+    const LoginNavigatorComponent = useCallback(
+        () => (
+            <LoginStack.Navigator screenOptions={{ headerShown: false }}>
+                <LoginStack.Screen name="Login" component={OktaLogin} />
+                <LoginStack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
+                <LoginStack.Screen name="ResetPassword" component={ResetPasswordScreen} />
+                <LoginStack.Screen name="ContactSupport" component={ContactSupportScreen} />
+            </LoginStack.Navigator>
+        ),
+        []
+    );
+
+    const DrawerNavigatorComponent = (): any => (
+        <Drawer.Navigator
+            screenOptions={{
+                headerShown: false,
+                drawerType: 'front',
+                drawerStyle: { backgroundColor: 'transparent' },
+            }}
+            drawerContent={(props: any): ReactNode => <CustomDrawerContent {...props} />}
+            backBehavior="history"
+            initialRouteName="LoginScreen"
+        >
+            {!app.isAuthenticated && <Drawer.Screen name="LoginScreen" component={LoginNavigatorComponent} />}
+
+            {app.isAuthenticated && (
+                <>
+                    <Drawer.Screen name="Homepage" component={Homepage} />
+                    <Drawer.Screen name="Dashboard" component={Dashboard} />
+                    <Drawer.Screen name="Locations" component={Locations} />
+
+                    <Drawer.Screen
+                        name="ContactSupport"
+                        options={{
+                            swipeEnabled: false,
+                        }}
+                        component={ContactSupportScreen}
+                    />
+
+                    <Drawer.Screen
+                        name="ChangePassword"
+                        options={{
+                            swipeEnabled: false,
+                        }}
+                        component={ChangePassword}
+                    />
+                </>
+            )}
+        </Drawer.Navigator>
+    );
+
     return (
         <>
             <AuthContextProvider
@@ -79,65 +131,7 @@ const AuthRouter = (): any => {
                 }}
                 rememberMeDetails={{ email: rememberMe ? email : '', rememberMe: rememberMe }}
             >
-                <Drawer.Navigator
-                    screenOptions={{
-                        headerShown: false,
-                        drawerType: 'front',
-                        drawerStyle: { backgroundColor: 'transparent' },
-                    }}
-                    drawerContent={(props: any): ReactNode => <CustomDrawerContent {...props} />}
-                    backBehavior="history"
-                    initialRouteName="Login"
-                >
-                    {!app.isAuthenticated && (
-                        <Drawer.Screen
-                            options={{
-                                swipeEnabled: false,
-                            }}
-                            name="Login"
-                            component={Login}
-                        />
-                    )}
-                    {!app.isAuthenticated && (
-                        <Drawer.Screen
-                            options={{
-                                swipeEnabled: false,
-                            }}
-                            name="ForgotPassword"
-                            component={ForgotPasswordScreen}
-                        />
-                    )}
-                    {!app.isAuthenticated && (
-                        <Drawer.Screen
-                            options={{
-                                swipeEnabled: false,
-                            }}
-                            name="ResetPassword"
-                            component={ResetPasswordScreen}
-                        />
-                    )}
-
-                    {app.isAuthenticated && <Drawer.Screen name="Homepage" component={Homepage} />}
-                    {app.isAuthenticated && <Drawer.Screen name="Dashboard" component={Dashboard} />}
-                    {app.isAuthenticated && <Drawer.Screen name="Locations" component={Locations} />}
-
-                    <Drawer.Screen
-                        name="ContactSupport"
-                        options={{
-                            swipeEnabled: false,
-                        }}
-                        component={ContactSupportScreen}
-                    />
-                    {app.isAuthenticated && (
-                        <Drawer.Screen
-                            name="ChangePassword"
-                            options={{
-                                swipeEnabled: false,
-                            }}
-                            component={ChangePassword}
-                        />
-                    )}
-                </Drawer.Navigator>
+                {DrawerNavigatorComponent()}
             </AuthContextProvider>
         </>
     );
@@ -201,6 +195,7 @@ const RegistrationRouter = (): any => {
         </>
     );
 };
+
 export const MainRouter = (): any => {
     const { height, width } = Dimensions.get('screen');
     return (

package/template/src/navigation/navigation-drawer.tsx

@@ -1,24 +1,22 @@
-import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup } from '@brightlayer-ui/react-native-components';
-import React, { useState, useCallback, useEffect } from 'react';
+import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-native-components';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from './index';
 import { DrawerActions } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
 import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 export type NavDrawerProps = {
-    navigation: NativeStackNavigationProp<RootStackParamList, 'NavigationDrawer'>;
+    navigation: StackNavigationProp<RootStackParamList, 'NavigationDrawer'>;
 };
 
 export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
     const [selected, setSelected] = useState('Home');
     const { t } = useTranslation();
     const navigationState = navigation.getState();
-
     const Homepage: IconFamily = { family: 'material', name: 'home', direction: 'ltr' };
     const Dashboard: IconFamily = { family: 'material', name: 'dashboard', direction: 'ltr' };
     const Notifications: IconFamily = { family: 'material', name: 'notifications', direction: 'ltr' };
-
     const selectItem = useCallback(
         (id: any) => {
             navigation.navigate(id);
@@ -27,8 +25,8 @@ export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
         [navigation]
     );
 
-    const navGroupItems = React.useMemo(
-        () => [
+    const navGroupItems = useMemo(
+        (): NavItem[] => [
             {
                 title: `${t('TOOLBAR_MENU.HOME_PAGE')}`,
                 itemID: 'Homepage',
@@ -45,7 +43,8 @@ export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
                 icon: Notifications,
             },
         ],
-        [t]
+
+        []
     );
 
     useEffect(() => {

package/template/src/screens/ChangePassword.tsx

@@ -2,14 +2,30 @@ import React from 'react';
 import { ChangePasswordScreen } from '@brightlayer-ui/react-native-auth-workflow';
 import { useApp } from '../contexts/AppContextProvider';
 import { LocalStorage } from '../store/local-storage';
+import { clearTokens, revokeAccessToken } from '@okta/okta-react-native';
 
-export const ChangePassword = (): JSX.Element => {
+export const ChangePassword = (): React.JSX.Element => {
     const app = useApp();
-    const logOut = (): void => {
+    const logOut = async (): Promise<void> => {
         LocalStorage.clearAuthCredentials();
+        try {
+            await revokeAccessToken();
+            await clearTokens();
+        } catch (_error) {
+            // eslint-disable-next-line no-console
+            console.log(_error as Error);
+        }
         app.onUserNotAuthenticated();
-        app.setLoginData({ email: '', rememberMe: false });
+        // below line is not need for okta workflow
+        // app.setLoginData({ email: '', rememberMe: false });
     };
 
-    return <ChangePasswordScreen onFinish={(): void => logOut()} showSuccessScreen />;
+    const handleLogout = (): void => {
+        logOut().catch((error) => {
+            // Handle any errors here if needed
+            console.error(error);
+        });
+    };
+
+    return <ChangePasswordScreen onFinish={handleLogout} showSuccessScreen />;
 };

package/template/src/screens/OktaLogin.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Image } from 'react-native';
+import {
+    OktaAuthContextProvider,
+    OktaLoginScreenProps,
+    OktaRedirectLoginScreen,
+} from '@brightlayer-ui/react-native-auth-workflow';
+import { useApp } from '../contexts/AppContextProvider';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import i18nAppInstance from '../../translations/i18n';
+import oktaConfig from '../../okta.config';
+
+export const OktaLogin: React.FC<React.PropsWithChildren<OktaLoginScreenProps>> = () => {
+    const app = useApp();
+    const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
+    return (
+        <OktaAuthContextProvider
+            language={app.language}
+            i18n={i18nAppInstance}
+            navigate={(destination: -1 | string) => {
+                if (typeof destination === 'string') {
+                    switch (destination) {
+                        case 'SelfRegister':
+                        case 'RegisterInvite':
+                            navigation.navigate('RegistrationProviderExample', { screen: destination });
+                            break;
+                        default:
+                            navigation.navigate(destination);
+                            break;
+                    }
+                } else if (destination === -1) {
+                    navigation.goBack();
+                }
+            }}
+            routeConfig={{
+                LOGIN: 'Login',
+                FORGOT_PASSWORD: 'ForgotPassword',
+                RESET_PASSWORD: 'ResetPassword',
+                REGISTER_INVITE: 'RegisterInvite',
+                REGISTER_SELF: 'SelfRegister',
+                SUPPORT: 'ContactSupport',
+            }}
+        >
+            <OktaRedirectLoginScreen
+                projectImage={
+                    <Image
+                        style={{ width: '100%' }}
+                        resizeMode="contain"
+                        source={require('../assets/images/eaton_stacked_logo.png')}
+                    />
+                }
+                oktaConfigObject={oktaConfig.oidc}
+            />
+        </OktaAuthContextProvider>
+    );
+};

package/template/yarn.lock

@@ -1094,26 +1094,33 @@
   resolved "https://registry.yarnpkg.com/@brightlayer-ui/prettier-config/-/prettier-config-1.0.3.tgz#e40a7ae7435c6fd5118acbf249080e0aa81e93af"
   integrity sha512-EYm3+V7Qd+oYEF+8FadsXAZqXryEHHbGnrV1BMp9selhABjceqUqXPVE4Sn3SKWQdBNJ3En2A3EzgrzRbvRTaw==
 
-"@brightlayer-ui/react-native-auth-workflow@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-auth-workflow/-/react-native-auth-workflow-7.0.2.tgz#98f6483bf7eba7ff90d8de749ed76776593cabf1"
-  integrity sha512-VPskmDL020D0sdI9G0lEZhApiiRybQsQwwUlX2VTyk9rLooI8/nTU4a8CfaxHmqAPYm16H3vKWJAG9kZlcMmdA==
+"@brightlayer-ui/react-native-auth-workflow@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-auth-workflow/-/react-native-auth-workflow-8.0.0.tgz#1f6aaedf72ea74433e5e993c5bc82ddb928fe1aa"
+  integrity sha512-xJ670a1jf7V5HtQ0NnFmUw3X/zypWxANoTFDxyLsBJNhJ6ro/4M1pBovK596mastwsS9g6ReO4gwcNz4+1FtJQ==
   dependencies:
     "@brightlayer-ui/react-native-themes" "^7.0.1"
+    "@types/react" "^19.0.0"
+    "@types/react-dom" "^19.0.0"
     color "^4.2.3"
     lodash.clonedeep "^4.5.0"
 
-"@brightlayer-ui/react-native-components@^8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-components/-/react-native-components-8.0.4.tgz#96a1932289b9111b3c23777673530c01a1bcd2b6"
-  integrity sha512-1dZ0E6IMWNYPA2sRVrMP6WLkJJ4r58aTP1snrTLZPrhOgXJNZRIXBGHPZw5Kahl7HjFeNnytZLYUNVVfNBY2Jw==
+"@brightlayer-ui/react-native-components@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-components/-/react-native-components-9.0.0.tgz#eb5412be3f9237e9ea92e21d25c9fe1d3ead74a2"
+  integrity sha512-xQfpubAUgMDjOxKVIRjVgC0H20og2Ntx59xK84Zx1qO6P6PasECvXYl+CyqTCWlXptJ0rcBeWZzEWhjqGw7izQ==
   dependencies:
     "@brightlayer-ui/react-native-themes" "7.0.1"
+    "@callstack/react-theme-provider" "^3.0.9"
+    "@types/prop-types" "^15.7.15"
+    "@types/react" "^19.0.0"
+    "@types/react-dom" "^19.0.0"
     color "^4.2.3"
-    react-native-collapsible "^1.6.0"
+    prop-types "^15.8.1"
+    react-native-collapsible "^1.6.2"
     react-native-keyboard-aware-scroll-view "^0.9.5"
-    react-native-modal ">=13.0.1"
-    react-native-reanimated "^3.6.1"
+    react-native-modal "^13.0.1"
+    react-native-reanimated "^3.18.0"
 
 "@brightlayer-ui/react-native-themes@7.0.1", "@brightlayer-ui/react-native-themes@^7.0.1":
   version "7.0.1"
@@ -1123,10 +1130,22 @@
     "@brightlayer-ui/colors" "4.0.0"
     color "^4.2.3"
 
-"@brightlayer-ui/react-native-vector-icons@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-vector-icons/-/react-native-vector-icons-2.4.0.tgz#99236f898e423346350db1a90c731ad5644b562c"
-  integrity sha512-USFMjyoDGybaVux7wfeN1Kmo8h8rM3PooNEv+YTV84XkH1K+M3ASf6dQ/PSWaoCvRFb/xv0Du9FQ744wN4keog==
+"@brightlayer-ui/react-native-themes@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-themes/-/react-native-themes-8.0.0.tgz#93b36733b5d31c780574a5340b637c8f57c1e7ba"
+  integrity sha512-87j5m7/eUkSvDyF89HMxGQHtvaVNgtUdPRzLtPzDD0AkyQ4uFdCMgzHydZdGOemMw/bGdyrdcwUn46tFrWVL7w==
+  dependencies:
+    "@brightlayer-ui/colors" "4.0.0"
+    "@callstack/react-theme-provider" "^3.0.9"
+    color "^4.2.3"
+    react-native-safe-area-context "5.4.1"
+
+"@brightlayer-ui/react-native-vector-icons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-native-vector-icons/-/react-native-vector-icons-3.0.0.tgz#599f404caa7777bf8c403e99858e05a106a86725"
+  integrity sha512-lJC81d6sn13W0rhjennuZcoHpEEDfn/EEzNuQ1z0u1hZCzlzYs2gH7moN2vrTNczyjsOBYIq1aeLKdvpceQGlg==
+  dependencies:
+    "@react-native-vector-icons/common" "^12.0.0"
 
 "@callstack/react-theme-provider@^3.0.9":
   version "3.0.9"
@@ -1882,6 +1901,22 @@
     prompts "^2.4.2"
     semver "^7.5.2"
 
+"@react-native-community/cli-tools@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-17.0.0.tgz#c46bae5e5ffeee7067d0e55d2ee1de128e310ac3"
+  integrity sha512-mVXH7U/uXd7yizqm2iE+W4SSVc4FGYYEafAu29HihA+FHttonqdg35zVAnIX2FKbyla+TotR1ACNSgo7KFDq+w==
+  dependencies:
+    "@vscode/sudo-prompt" "^9.0.0"
+    appdirsjs "^1.2.4"
+    chalk "^4.1.2"
+    execa "^5.0.0"
+    find-up "^5.0.0"
+    launch-editor "^2.9.1"
+    mime "^2.4.1"
+    ora "^5.4.1"
+    prompts "^2.4.2"
+    semver "^7.5.2"
+
 "@react-native-community/cli-types@19.0.0":
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-19.0.0.tgz#fe4266eac8ce8ea58bee1a253af9a4ff3543241a"
@@ -1915,6 +1950,29 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
   integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
 
+"@react-native-vector-icons/common@^12.0.0", "@react-native-vector-icons/common@^12.2.0":
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-vector-icons/common/-/common-12.2.0.tgz#9d42cddd6dc87ba1f7daf7386150034b0ed8caa7"
+  integrity sha512-FGVwBwuio2A9N9sJckXeTwp/oe20hCMe/Zul+b1ql3WkhUJpdJWVbpWKp8ikpHLRRstwuUqkeM5eY74f0zNn1A==
+  dependencies:
+    "@react-native-community/cli-tools" "^17.0.0"
+    picocolors "^1.1.1"
+    plist "^3.1.0"
+
+"@react-native-vector-icons/material-design-icons@^12.2.0":
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-vector-icons/material-design-icons/-/material-design-icons-12.2.0.tgz#e606320ae031c56cee231f515d3b1f0334a06b42"
+  integrity sha512-XFGkuTLATGMH5RtcbuiJ18mMFKsge5PZjiS+cs+/KwFCWMMznRiQkZlycIVOx52V1WFE+L6oBv3Z6r+L6HHekA==
+  dependencies:
+    "@react-native-vector-icons/common" "^12.2.0"
+
+"@react-native-vector-icons/material-icons@^12.2.0":
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-vector-icons/material-icons/-/material-icons-12.2.0.tgz#53838fe85fc45f139ae7eaf352c184e6d8fddc10"
+  integrity sha512-ZOG1sryGmbZ0s/TBHQ28dMpdTKZ/RR/rhkuXgvMRjiX+vlvV91FmySH5P7NM0zcvqK6BEgONLRtRDaL7zz4xRw==
+  dependencies:
+    "@react-native-vector-icons/common" "^12.2.0"
+
 "@react-native/assets-registry@0.80.1":
   version "0.80.1"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.80.1.tgz#f692115d706e2b9b1847fca81ad8c2bbec67f6ef"
@@ -2419,6 +2477,16 @@
   dependencies:
     undici-types "~7.8.0"
 
+"@types/prop-types@^15.7.15":
+  version "15.7.15"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
+  integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
+
+"@types/react-dom@^19.0.0":
+  version "19.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.6.tgz#4af629da0e9f9c0f506fc4d1caa610399c595d64"
+  integrity sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==
+
 "@types/react-native-vector-icons@^6.4.18":
   version "6.4.18"
   resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz#18671c617b9d0958747bc959903470dde91a8c79"
@@ -2441,7 +2509,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^19.1.8":
+"@types/react@*", "@types/react@^19.0.0", "@types/react@^19.1.8":
   version "19.1.8"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.8.tgz#ff8395f2afb764597265ced15f8dddb0720ae1c3"
   integrity sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==
@@ -2810,6 +2878,11 @@
   resolved "https://registry.yarnpkg.com/@vscode/sudo-prompt/-/sudo-prompt-9.3.1.tgz#c562334bc6647733649fd42afc96c0eea8de3b65"
   integrity sha512-9ORTwwS74VaTn38tNbQhsA5U44zkJfcb0BdTSyyG6frP4e8KMtHuTXYmwefe5dpL8XB1aGSIVTaLjD3BbWb5iA==
 
+"@xmldom/xmldom@^0.8.8":
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
+  integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
+
 Base64@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/Base64/-/Base64-1.1.0.tgz#810ef21afa8357df92ad7b5389188c446b9cb956"
@@ -3931,6 +4004,11 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+dotenv@^16.4.5:
+  version "16.6.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.6.1.tgz#773f0e69527a8315c7285d5ee73c4459d20a8020"
+  integrity sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==
+
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -6808,6 +6886,15 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+plist@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/plist/-/plist-3.1.0.tgz#797a516a93e62f5bde55e0b9cc9c967f860893c9"
+  integrity sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==
+  dependencies:
+    "@xmldom/xmldom" "^0.8.8"
+    base64-js "^1.5.1"
+    xmlbuilder "^15.1.1"
+
 possible-typed-array-names@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
@@ -7001,11 +7088,18 @@ react-native-animatable@1.4.0:
   dependencies:
     prop-types "^15.8.1"
 
-react-native-collapsible@^1.6.0:
+react-native-collapsible@^1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.6.2.tgz#3b67fa402a6ba3c291022f5db8f345083862c3d8"
   integrity sha512-MCOBVJWqHNjnDaGkvxX997VONmJeebh6wyJxnHEgg0L1PrlcXU1e/bo6eK+CDVFuMrCafw8Qh4DOv/C4V/+Iew==
 
+react-native-dotenv@^3.4.11:
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.11.tgz#2e6c4eabd55d5f1bf109b3dd9141dadf9c55cdd4"
+  integrity sha512-6vnIE+WHABSeHCaYP6l3O1BOEhWxKH6nHAdV7n/wKn/sciZ64zPPp2NUdEUf1m7g4uuzlLbjgr+6uDt89q2DOg==
+  dependencies:
+    dotenv "^16.4.5"
+
 react-native-gesture-handler@^2.26.0:
   version "2.27.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.27.1.tgz#8865b2345f4c65536517f20cedc420481fc72d49"
@@ -7038,7 +7132,7 @@ react-native-keyboard-aware-scroll-view@^0.9.5:
     prop-types "^15.6.2"
     react-native-iphone-x-helper "^1.0.3"
 
-react-native-modal@>=13.0.1, react-native-modal@^13.0.2:
+react-native-modal@^13.0.1, react-native-modal@^13.0.2:
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.2.tgz#4e4d777fdb0f5af5a50003a53eebc4de9ead5695"
   integrity sha512-jCUR2DAskuZtVIbnt2ZssX70DCbTLydkL1Glv1Fc/fqVIhq1LpwBK2hKgSf9VIINXFnDjjGIMIC9HhDXnW7Enw==
@@ -7059,7 +7153,7 @@ react-native-paper@^5.14.5:
     color "^3.1.2"
     use-latest-callback "^0.2.3"
 
-react-native-reanimated@^3.18.0, react-native-reanimated@^3.6.1:
+react-native-reanimated@^3.18.0:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.18.0.tgz#0a246eab38a9e807887fe561a2868cfe85351f3c"
   integrity sha512-eVcNcqeOkMW+BUWAHdtvN3FKgC8J8wiEJkX6bNGGQaLS7m7e4amTfjIcqf/Ta+lerZLurmDaQ0lICI1CKPrb1Q==
@@ -7082,6 +7176,11 @@ react-native-restart@^0.0.27:
   resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.27.tgz#43aa8210312c9dfa5ec7bd4b2f35238ad7972b19"
   integrity sha512-8KScVICrXwcTSJ1rjWkqVTHyEKQIttm5AIMGSK1QG1+RS5owYlE4z/1DykOTdWfVl9l16FIk0w9Xzk9ZO6jxlA==
 
+react-native-safe-area-context@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-5.4.1.tgz#6d04eac20f99622fa13895fa7ae96199f1ecf800"
+  integrity sha512-x+g3NblZ9jof8y+XkVvaGlpMrSlixhrJJ33BRzhTAKUKctQVecO1heSXmzxc5UdjvGYBKS6kPZVUw2b8NxHcPg==
+
 react-native-safe-area-context@^5.5.0:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-5.5.1.tgz#9fac8ae5da8b9ff6f77eb3f697e073f04a1f2f3f"
@@ -8425,6 +8524,11 @@ xhr2@0.1.3:
   resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.3.tgz#cbfc4759a69b4a888e78cf4f20b051038757bd11"
   integrity sha512-6RmGK22QwC7yXB1CRwyLWuS2opPcKOlAu0ViAnyZjDlzrEmCKL4kLHkfvB8oMRWeztMsNoDGAjsMZY15w/4tTw==
 
+xmlbuilder@^15.1.1:
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz#9dcdce49eea66d8d10b42cae94a79c3c8d0c2ec5"
+  integrity sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==
+
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"