@brightlayer-ui/react-native-template-authentication-typescript 2.0.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+## v2.0.0 (Not yet published)
+
+### Changed
+
+-   Changed package namespace from `@pxblue` to `@brightlayer-ui`.
+
+## Package Migration Notice
+
+Previous versions listed after this indicator refer to our deprecated `@pxblue` packages.
+
+---
+
+## v2.0.0 (November 3, 2021)
+
+### Changed
+
+- Updated to use latest APIs from `@pxblue/react-native-components`.
+
+## v1.3.2 (October 1, 2021)
+
+### Fixed
+
+- Added dependency for `@pxblue/react-native-vector-icons`
+
+## v1.3.1 (October 1, 2021)
+
+### Fixed
+
+- Issue with template using the wrong dependency for `@pxblue/react-native-auth-workflow`
+
+## v1.3.0 (September 30, 2021)
+
+### Changed
+- Upgrade PX Blue packages
+- Changed default drawer width to 300.
+
+## v1.2.0 (July 26, 2021)
+
+### Changed
+- Updated version of react-native-modal dependency to 12.0.2
+
+## v1.1.1 (June 30, 2021)
+
+### Changed
+-   Dropped version of react-native-webview peerDependency to match requirements of @pxblue/react-native-auth-workflow.
+
+## v1.1.0 (March 31, 2021)
+
+### Changed
+-   Updated dependencies to use latest packages.
+-   Reorganized folder structure
+
+### Fixed
+-   Jest configuration allows default tests to pass.
+
+
+## v1.0.0 (March 1, 2021)
+
+### Added
+
+-   Initial authentication template for TypeScript projects

package/README.md

@@ -0,0 +1,36 @@
+# Authentication Template (TypeScript)
+
+![npm (scoped)](https://img.shields.io/npm/v/@brightlayer-ui/react-native-template-authentication-typescript?color=%23007bc1&label=%40brightlayer-ui%2Freact-native-template-authentication-typescript)
+
+This is an official Brightlayer UI template used internally by the [Brightlayer UI CLI](https://www.npmjs.com/package/@brightlayer-ui/cli).
+
+This template installs and configures the Brightlayer UI [react-native-auth-workflow](https://www.npmjs.com/package/@brightlayer-ui/react-native-auth-workflow) package to automatically wrap your main application with functions and screens for Login, Registration, Change Password, etc. This uses the same configurations as the sample project for that package — you will need to replace the API integrations with implementations specific to your API. This template also includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the Brightlayer UI [React Native Component Library](https://www.npmjs.com/package/@brightlayer-ui/react-native-components).
+
+## Usage
+This template can be used with the Brightlayer UI CLI:
+```sh
+npx -p @brightlayer-ui/cli blui new react-native --name=myapp --cli=rnc --language=ts --template=authentication
+```
+
+## Project Structure
+Projects created using this template will start out with the following file structure:
+
+```
+|── /ios                              // ios project folder
+|── /android                          // android project folder
+|── /actions                          
+|   |── AuthUIActions.tsx             // handles the implementation of the authentication related actions (such as login and forgot password)
+|   └── RegistrationUIActions.tsx     // handles the implementation of the registration related actions (such as loading the EULA and registration by invitation)
+|── /assets                           // fonts and images used by the application
+|── App.tsx                           // app entry point
+|── /constants                          
+|   |── index.ts                      // application constants
+|   └── sampleEula.ts                 // sample Eula
+|── /pages                            // sample application pages
+|── /router                             
+|   |── index.tsx                     // sets up routing
+|   |── DeepLinking.ts                // sets up deep linking
+|   └── navigation-drawer.tsx         // sets up Drawer
+└── /store                             
+    └── local-storage.ts              // mock implementation for storing/retrieving user authentication session data 
+```

package/dependencies.json

@@ -0,0 +1,31 @@
+{
+    "dependencies": [
+        "@brightlayer-ui/colors@^3.0.1",
+        "@brightlayer-ui/icons-svg@^1.8.0",
+        "@brightlayer-ui/react-native-auth-workflow@^4.0.0",
+        "@brightlayer-ui/react-native-components@^6.0.1",
+        "@brightlayer-ui/react-native-themes@^6.0.0",
+        "@brightlayer-ui/react-native-vector-icons@^1.4.0",
+        "@react-native-async-storage/async-storage@^1.14.1",
+        "@react-native-community/masked-view@^0.1.10",
+        "@react-navigation/drawer@^5.12.3",
+        "@react-navigation/native@^5.9.3",
+        "@react-navigation/stack@^5.14.3",
+        "date-fns@^2.19.0",
+        "i18next@^20.0.0",
+        "react-i18next@^11.8.7",
+        "react-native-gesture-handler@^1.10.3",
+        "react-native-keyboard-aware-scroll-view@^0.9.3",
+        "react-native-modal@^12.0.2",
+        "react-native-pager-view@^5.0.0",
+        "react-native-paper@^4.7.2",
+        "react-native-reanimated@^1.0.0",
+        "react-native-safe-area-context@^3.2.0",
+        "react-native-screens@^3.0.0",
+        "react-native-svg@^12.1.0",
+        "react-native-svg-transformer@^0.14.3",
+        "react-native-vector-icons@^8.1.0",
+        "react-native-webview@^10.3.2"
+    ],
+    "devDependencies": ["@types/react-native-vector-icons", "jest-transform-stub"]
+}

package/images/Logo.svg

@@ -0,0 +1,11 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 82 82" width='82' height='82'>
+
+						<ellipse cx="41" cy="41" rx="11.2" ry="11.1"/>
+						<path d="M72.7,33.9c2.4,10.9-0.8,22.1-8.7,30C51.4,76.6,30.8,76.6,18.2,64S5.4,30.8,18,18.1c5-5,11.4-8.2,18.4-9.2
+							c0.3,0.9,0.8,1.8,1.5,2.5c2.3,2.3,6.1,2.3,8.4,0c0.9-0.9,1.5-2.1,1.7-3.5l0,0c0.2-1.8-0.4-3.6-1.7-4.9c-2.3-2.3-6.1-2.3-8.4,0
+							c-0.9,0.9-1.5,2.1-1.7,3.3c-7.6,1-14.6,4.6-20,10C2.6,30,2.7,52.2,16.3,65.8s35.9,13.6,49.5-0.1c8.4-8.5,11.9-20.5,9.4-32.2l0,0
+							c-1.4-6.4-4.8-12.1-9.5-16.8l0,0C65.7,16.7,71.2,23.3,72.7,33.9z M37.4,7.5L37.4,7.5L37.4,7.5L37.4,7.5z M45.5,7.6
+							c-0.1,0.8-0.4,1.5-1,2.1c-1.4,1.4-3.6,1.4-4.9,0c-0.6-0.6-1-1.4-1-2.3l0,0c-0.1-1,0.3-2,1-2.7c1.4-1.4,3.6-1.4,4.9,0
+							C45.3,5.5,45.7,6.6,45.5,7.6z"/>
+					</svg>

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@brightlayer-ui/react-native-template-authentication-typescript",
+    "version": "2.0.0-beta.0",
+    "author": "brightlayer-ui <brightlayer-ui@eaton.com>",
+    "keywords": [
+        "react native",
+        "template",
+        "brightlayer-ui",
+        "cli"
+    ],
+    "description": "A template with pre-configured login workflow and routing for React Native projects created with the Brightlayer UI CLI.",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/brightlayer-ui/react-native-cli-templates.git"
+    },
+    "scripts": {
+        "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
+        "tag:package": "set npm_config_yes=true && npx -p @brightlayer-ui/tag blui-tag"
+    },
+    "license": "BSD-3-Clause",
+    "engines": {
+        "node": ">=10"
+    },
+    "bugs": {
+        "url": "https://github.com/brightlayer-ui/react-native-cli-templates/issues"
+    }
+}

package/template/App.tsx

@@ -0,0 +1,65 @@
+/**
+ Copyright (c) 2021-present, Eaton
+
+ All rights reserved.
+
+ This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
+ **/
+import React from 'react';
+import { Provider as ThemeProvider } from 'react-native-paper';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
+import { MainRouter } from './src/navigation';
+import { ProjectAuthUIActions } from './src/actions/AuthUIActions';
+import { ProjectRegistrationUIActions } from './src/actions/RegistrationUIActions';
+import {
+    SecurityContextProvider,
+    AuthNavigationContainer,
+    AuthUIContextProvider,
+    useSecurityActions,
+} from '@brightlayer-ui/react-native-auth-workflow';
+import { useLinking } from '@react-navigation/native';
+import { authLinkMapping, resolveInitialState } from './src/navigation/DeepLinking';
+
+export const AuthUIConfiguration: React.FC = (props) => {
+    const securityContextActions = useSecurityActions();
+    return (
+        <AuthUIContextProvider
+            authActions={ProjectAuthUIActions(securityContextActions)}
+            registrationActions={ProjectRegistrationUIActions}
+            showSelfRegistration={true}
+            allowDebugMode={true}
+            contactEmail={'something@email.com'}
+            contactPhone={'1-800-123-4567'}
+            contactPhoneLink={'1-800-123-4567'}
+            // projectImage={require('./src/assets/images/some_image.png')}
+        >
+            {props.children}
+        </AuthUIContextProvider>
+    );
+};
+
+export const App = (): JSX.Element => {
+    const ref = React.useRef(null);
+    const { getInitialState } = useLinking(ref, authLinkMapping);
+    const [initialState, setInitialState] = React.useState();
+    React.useEffect(() => {
+        resolveInitialState(getInitialState, setInitialState);
+    }, [getInitialState]);
+
+    return (
+        <ThemeProvider theme={BLUIThemes.blue}>
+            <SafeAreaProvider>
+                <SecurityContextProvider>
+                    <AuthUIConfiguration>
+                        <AuthNavigationContainer initialState={initialState} ref={ref}>
+                            <MainRouter />
+                        </AuthNavigationContainer>
+                    </AuthUIConfiguration>
+                </SecurityContextProvider>
+            </SafeAreaProvider>
+        </ThemeProvider>
+    );
+};
+
+export default App;

package/template/__mocks__/svgMock.js

@@ -0,0 +1,8 @@
+/**
+ * SVG setup to mock react components transformed into images from SVGs
+ * Place this file in your project's root __mocks__ directory.
+ * https://github.com/kristerkari/react-native-svg-transformer#usage-with-jest
+ */
+
+module.exports = 'SvgMock';
+module.exports.ReactComponent = 'SvgMock';

package/template/jestSetupFile.js

@@ -0,0 +1,17 @@
+import 'react-native-gesture-handler/jestSetup';
+import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+
+jest.useFakeTimers();
+jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
+jest.mock('react-native-reanimated', () => {
+    const Reanimated = require('react-native-reanimated/mock');
+
+    // The mock for `call` immediately calls the callback which is incorrect
+    // So we override it with a no-op
+    Reanimated.default.call = () => {};
+
+    return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/template/metro.config.js

@@ -0,0 +1,29 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+    const {
+        resolver: { sourceExts, assetExts },
+    } = await getDefaultConfig();
+    return {
+        transformer: {
+            babelTransformerPath: require.resolve('react-native-svg-transformer'),
+            getTransformOptions: async () => ({
+                transform: {
+                    experimentalImportSupport: false,
+                    inlineRequires: true,
+                },
+            }),
+        },
+        resolver: {
+            assetExts: assetExts.filter((ext) => ext !== 'svg'),
+            sourceExts: [...sourceExts, 'svg'],
+        },
+    };
+})();

package/template/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    assets: ['./assets/fonts/'],
+};

package/template/src/actions/AuthUIActions.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { AuthUIActions, SecurityContextActions } from '@brightlayer-ui/react-native-auth-workflow';
+import { LocalStorage } from '../store/local-storage';
+
+const sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
+
+function getRandomInt(max: number): number {
+    return Math.floor(Math.random() * Math.floor(max));
+}
+
+function isRandomFailure(): boolean {
+    const randomResponseNumber = getRandomInt(100);
+    return false; // randomResponseNumber < 10;
+}
+
+type AuthUIActionsFunction = () => AuthUIActions;
+type AuthUIActionsWithSecurity = (securityHelper: SecurityContextActions) => AuthUIActionsFunction;
+
+/**
+ * Example implementation of [[AuthUIActions]] to start with during development.
+ *
+ * Authentication Actions to be performed based on the user's UI actions. The application will create
+ * appropriate actions (often api calls, local network storage, credential updates, etc) and update
+ * the global security state based on the actionable needs of the user.
+ */
+export const ProjectAuthUIActions: AuthUIActionsWithSecurity = (securityHelper) => (): AuthUIActions => ({
+    /**
+     * Initialize the application security state. This will involve reading any local storage,
+     * validating existing credentials (token expiration, for example). At the end of validation,
+     * the [[SecurityContextActions]] should be called with either:
+     * [[onUserAuthenticated]] (which will present the application), or
+     * [[onUserNotAuthenticated]] (which will present the Auth UI).
+     *
+     * Note: Until this method returns, the applications Splash screen will be presented.
+     *
+     * @returns Should always resolve. Never throw.
+     */
+    initiateSecurity: async (): Promise<void> => {
+        let authData;
+
+        try {
+            await sleep(2000);
+            authData = await LocalStorage.readAuthData();
+        } catch (e) {
+            // Restoring token failed
+        }
+
+        // After restoring token, we may need to validate it in production apps
+        // This will switch to the App screen or Auth screen and this loading
+        // screen will be unmounted and thrown away.
+        // securityHelper.onUserAuthenticated()
+        if (authData?.email !== undefined) {
+            securityHelper.onUserAuthenticated({
+                email: authData?.email,
+                userId: authData.userId ?? '',
+                rememberMe: authData?.rememberMeData.rememberMe,
+            });
+        } else {
+            const rememberMeEmail = authData?.rememberMeData.rememberMe ? authData?.rememberMeData.user : undefined;
+            securityHelper.onUserNotAuthenticated(false, rememberMeEmail);
+        }
+    },
+    /**
+     * The user wants to log into the application. Perform a login with the user's credentials.
+     * The application should provide the user's email and password to the authentication server.
+     *
+     * In the case of valid credentials, the applications code should store the returned data
+     * (such as token, user information, etc.). Then the [[onUserAuthenticated]] function should
+     * be called on the [[SecurityContextActions]] object.
+     *
+     * For example:
+     * ```
+     * LocalStorage.saveAuthCredentials(email, email);
+     * LocalStorage.saveRememberMeData(email, rememberMe);
+     *
+     * securityHelper.onUserAuthenticated({ email: email, userId: email, rememberMe: rememberMe });
+     * ```
+     *
+     * In the case of invalid credentials, an error should be thrown.
+     *
+     * @param email Email address the user entered into the UI.
+     * @param password Password the user entered into the UI.
+     * @param rememberMe Indicates whether the user's email should be remembered on success.
+     *
+     * @returns Resolve if code is credentials are valid, otherwise reject.
+     */
+    logIn: async (email: string, password: string, rememberMe: boolean): Promise<void> => {
+        await sleep(1000);
+
+        if (isRandomFailure()) {
+            // reject(new Error('LOGIN.GENERIC_ERROR'));
+            throw new Error('LOGIN.INVALID_CREDENTIALS');
+        }
+
+        LocalStorage.saveAuthCredentials(email, email);
+        LocalStorage.saveRememberMeData(email, rememberMe);
+
+        securityHelper.onUserAuthenticated({ email: email, userId: email, rememberMe: rememberMe });
+    },
+    /**
+     * The user has forgotten their password and wants help.
+     * The application generally should call an API which will then send a password reset
+     * link to the user's email.
+     *
+     * @param email Email address the user entered into the UI.
+     *
+     * @returns Resolve if email sending was successful, otherwise reject.
+     */
+    forgotPassword: async (email: string): Promise<void> => {
+        await sleep(500);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+
+        return;
+    },
+    /**
+     * The user has tapped on an email with a password reset link, which they received after
+     * requesting help for forgetting their password.
+     * The application should take the password reset code and then verify that it is still
+     * valid.
+     *
+     * @param code Password reset code from a reset password link.
+     * @param email Email if it was passed from the reset link
+     *
+     * @returns Resolve if code is valid, otherwise reject.
+     */
+    verifyResetCode: async (code: string, email?: string): Promise<void> => {
+        await sleep(500);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+
+        return;
+    },
+    /**
+     * A user who has previously used "forgotPassword" now has a valid password reset code
+     * and has entered a new password.
+     * The application should take the user's password reset code and the newly entered
+     * password and then reset the user's password.
+     *
+     * Note: Upon success, the user will be taken to the Login screen.
+     *
+     * @param code Password reset code from a link
+     * @param password New Password the user entered into the UI
+     * @param email Email if it was passed from the reset link
+     *
+     * @returns Resolve if successful, otherwise reject with an error message.
+     */
+    setPassword: async (code: string, password: string, email?: string): Promise<void> => {
+        await sleep(500);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+
+        return;
+    },
+    /**
+     * An authenticated user wants to change their password.
+     * The application should try to change the user's password. Upon completion,
+     * the user will be logged out of the application. Upon cancellation, the user
+     * will be taken back to the application's home screen.
+     *
+     * @param oldPassword The user's current password as entered into the UI.
+     * @param newPassword The user's new password as entered into the UI.
+     *
+     * @returns Resolve if successful, otherwise reject with an error message.
+     */
+    changePassword: async (oldPassword: string, newPassword: string): Promise<void> => {
+        await sleep(1000);
+
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+
+        return;
+    },
+});

package/template/src/actions/RegistrationUIActions.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { RegistrationUIActions, AccountDetailInformation } from '@brightlayer-ui/react-native-auth-workflow';
+
+// Constants
+import { SAMPLE_EULA } from '../constants/sampleEula';
+
+const sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
+
+function getRandomInt(max: number): number {
+    return Math.floor(Math.random() * Math.floor(max));
+}
+
+function isRandomFailure(): boolean {
+    const randomResponseNumber = getRandomInt(100);
+    return false; // randomResponseNumber < 90;
+}
+
+/**
+ * Example implementation of [[RegistrationUIActions]] to start with during development.
+ *
+ * Registration Actions to be performed based on the user's actions. The application will create appropriate actions
+ * (often API calls, local network storage, credential updates, etc.) based on the actionable needs of the user.
+ */
+export const ProjectRegistrationUIActions: () => RegistrationUIActions = () => ({
+    /**
+     * The user wants to complete an action but must first accept the EULA.
+     * The application should retrieve an application-specific EULA for the user.
+     *
+     * @param language  The i18n language the user is requesting for the EULA text.
+     *
+     * @returns Resolve with EULA, otherwise reject with an error message.
+     */
+    loadEULA: async (language: string): Promise<string> => {
+        await sleep(1000);
+
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+
+        if (language !== 'en' && language !== 'en_US') {
+            return 'Other language EULA';
+        }
+
+        return SAMPLE_EULA;
+    },
+
+    /**
+     * The user entered their email address and accepted the EULA.
+     * The API should now send them an email with the validation code.
+     *
+     * @param email  Email for the registering user.
+     *
+     * @returns Resolve when the server accepted the request.
+     */
+    requestRegistrationCode: async (email: string): Promise<void> => {
+        await sleep(800);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+    },
+
+    /**
+     * The user has tapped on an email link inviting them to register with the application.
+     * The application should validate the code provided by the link.
+     *
+     * @param validationCode  Registration code provided from the link.
+     * @param validationEmail  Email provided from the invitation email link (optional) `?email=addr%40domain.com`.
+     *
+     * @returns Resolves when the code is valid. True if registration is complete, False if account information is needed.
+     *          If the code is not valid a rejection will occur with an error message.
+     */
+    validateUserRegistrationRequest: async (validationCode: string, validationEmail?: string): Promise<boolean> => {
+        await sleep(800);
+
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+        return isRandomFailure();
+    },
+    /**
+     * The user has been invited to register and has entered the necessary account and
+     * password information.
+     * The application should now complete the registration process given the user's data.
+     *
+     * Note: Upon resolution, the user will be brought back to the Login screen.
+     *
+     * @param userData  Account details and password entered by the user.
+     * @param validationCode  Registration code provided from the invitation email link.
+     * @param validationEmail  Email provided from the invitation email link (optional) `?email=addr%40domain.com`.
+     *
+     * @returns Resolve when account creation succeeds, otherwise reject with an error message.
+     */
+    completeRegistration: async (
+        userData: {
+            password: string;
+            accountDetails: AccountDetailInformation;
+        },
+        validationCode: string,
+        validationEmail?: string
+    ): Promise<{ email: string; organizationName: string }> => {
+        const email = 'example@email.com';
+        const organizationName = 'Acme Co.';
+        const userInfo = { email, organizationName };
+
+        await sleep(1000);
+        if (isRandomFailure()) {
+            throw new Error('Sorry, there was a problem sending your request.');
+        }
+        return userInfo;
+    },
+});

package/template/src/constants/index.ts

@@ -0,0 +1,3 @@
+export const USER_SETTINGS = 'user_settings';
+export const LOCAL_USER_DATA = 'user_data';
+export const REMEMBER_ME_DATA = 'remember_me_data';

package/template/src/constants/sampleEula.ts

@@ -0,0 +1 @@
+export const SAMPLE_EULA = `THIS EULA IS ONLY BETWEEN EATON CORPORATION (“EATON”) AND THE END USER TO WHICH THE EATON WEB APPLICATION (THE “APP”) IS PROVIDED (“YOU”). BY ACCESSING, OR USING THE APP, YOU AGREE TO BE BOUND BY THIS EULA. IF YOU DO NOT AGREE WITH THE EULA, THEN DO NOT USE THIS APP.\n\nSubject to your acceptance of this EULA, Eaton grants you, a limited, nonexclusive, nontransferable, revocable license to access and use the App via the Internet for your personal and noncommercial purposes and as permitted by the Terms of Use. Eaton is the licensor of the App. You may not modify, reverse engineer, decompile, or disassemble the App, in whole or in part, or create any derivative works from or sublicense any rights in the App, unless otherwise expressly authorized in writing by Eaton. You may not translate or otherwise attempt to create the source code from the App, or rent, lease, grant a security interest in, or otherwise transfer any rights to, copy, distribute, transmit, display, perform, reproduce, publish, license, or transfer the App, or remove or alter any trademark, logo, ©, patent or other proprietary notices in the App. The App is protected by © and other intellectual property laws and treaties. Unless expressly stated in this EULA, Eaton owns all title, © and other intellectual property and proprietary rights in and to the App, and the App is licensed and not sold. You acknowledge and agree that Eaton will have no liability to you for any intellectual property infringement or violation, or for violation of this EULA or any license, arising out of or resulting from the use of the App in combination with any other product or service not approved or supplied by Eaton, or modification of the App by you or for you. If you breach this EULA, Eaton may immediately terminate this EULA, whereupon you shall immediately cease using the App. By accepting this EULA, you will have the right pursuant to this EULA to access and use the App. By using this App you will be required to provide Eaton certain personal data in accordance with the Eaton Privacy Policy (“Privacy Policy”). This data includes, but is not limited to: (a) first and last name, (b) phone number, (c) email address, (d) shopping and/or product preferences and history, (e) purchase history, and (f) device data including, but not limited to, Internet Protocol address, location data, Operating System version, and language (“Personal Data”). If you register for the App through a social profile such as Facebook or Google+, tallyo may also process and store your social network profile, which may include, but is not limited to, additional Personal Data that you choose to make accessible to Eaton such as (x) friend or contact names, (y) date of birth, and (z) likes and dislikes. You hereby agree to allow Eaton and the App to access, store and use any information directly related to the App, including, without limitation, Personal Data. Eaton agrees to comply with all applicable privacy laws in connection with its collection, storage and use of Personal Data. The Privacy Policy is incorporated herein by reference All rights not expressly granted to you are retained by Eaton. You must comply with applicable third party terms of agreement when using the App. In the event of a breach of this EULA by Eaton, Eaton's entire liability and your exclusive remedy shall be repair or replacement of the App, except that such remedy will not be available if any problem with the App arises from your violation of this EULA, accident, abuse, misapplication, abnormal or unauthorized access or use, or introduction of a virus or malicious code by a person other than Eaton. Eaton or its suppliers are solely responsible for providing maintenance and support services with respect to the App (Support Services). Support Services are governed by the policies and programs described in the Eaton-provided materials or as required under applicable law. Any software code provided to you as part of the Support Services is part of the App and subject to this EULA. You agree that access to and use of the App will not be provided by you or any employee or agent of you to any citizen of a country to which access or use thereof is barred, or to which exports or shipments are barred, by the US government, and that you will not ship, transfer or export the App into any country or use it in any manner prohibited by the United States Export Administration Act or any other export laws, restrictions or regulations (Export Laws). You represent and warrant that you are not located in or a citizen of a country that is subject to a US government embargo, that you are not listed on any US government list of prohibited or restricted parties, and that you are not otherwise prohibited under the Export Laws from receiving access to or using the App. ACCESS TO AND USE OF THE APP IS PROVIDED “AS IS.” ALTHOUGH THE APP IS BELIEVED TO BE ACCURATE, IT IS FOR INFORMATIONAL PURPOSES ONLY. YOU ASSUME TOTAL RESPONSIBILITY AND RISK FOR USE OF THE APP. EATON DOES NOT GUARANTEE CONTINUOUS, UNINTERRUPTED OR SECURE ACCESS TO OR USE OF THE APP. NO WARRANTY OR CONDITION, EXPRESS OR IMPLIED, IS MADE WITH RESPECT TO THE APP, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE PARTIES AGREE THAT EATON IS NOT PROVIDING ANY WARRANTY OR OTHER ASSURANCE THAT THE APP IS FREE OF THE RIGHTFUL CLAIM OF ANY THIRD PARTY BY WAY OF INFRINGEMENT OR OTHERWISE. EATON SHALL NOT BE LIABLE TO YOU FOR SPECIAL, INCIDENTAL, CONSEQUENTIAL, EXEMPLARY OR OTHER DAMAGES RESULTING FROM ACCESS TO OR USE OF THE APP, HOWEVER CAUSED. IN NO EVENT SHALL EATON’S TOTAL LIABILITY ARISING IN CONNECTION WITH OR UNDER THIS EULA EXCEED THE TOTAL FEES ACTUALLY PAID TO EATON BY YOU UNDER THIS EULA. This EULA will be construed in accordance with the substantive laws of the State of Ohio, without regard to its principles of conflicts of law. This EULA contains the entire understanding between you and Eaton regarding its subject matter and supersedes all prior agreements between you and Eaton (oral or written) regarding such subject matter. This EULA may be modified from time to time by Eaton. Any waiver of any provision must be in writing. If any provision of this EULA is found illegal or unenforceable, the remaining provisions will remain in full force and effect. `;

package/template/src/navigation/DeepLinking.ts

@@ -0,0 +1,62 @@
+import { LinkingOptions } from '@react-navigation/native/lib/typescript/src/types';
+
+/**
+ * Map a Deep Link or Universal link to a screen in the application
+ * https://reactnavigation.org/docs/deep-linking
+ */
+
+export const authLinkMapping: LinkingOptions = {
+    prefixes: ['https://authui.com', 'authui://'],
+    config: {
+        screens: {
+            Login: 'login',
+            PasswordResetInitiation: {
+                initialRouteName: 'Login',
+                path: 'password/reset/initiate',
+            },
+            PasswordResetCompletion: {
+                initialRouteName: 'Login',
+                // email can be passed in as parameter if needed for the api
+                path: 'password/reset/:code',
+            },
+            RegistrationInvite: {
+                initialRouteName: 'Login',
+                // email can be passed in as parameter if needed for the api
+                path: 'invite/:code',
+            },
+            Registration: {
+                initialRouteName: 'Login',
+                // email can be passed in as parameter if needed for the api
+                path: 'register/:code',
+            },
+            SupportContact: {
+                initialRouteName: 'Login',
+                path: 'support',
+            },
+        },
+    },
+};
+
+/**
+ * React Native boilerplate to get the initial state from open link, or fail after 150ms
+ * @param getInitialState
+ * @param setInitialState
+ */
+export const resolveInitialState = (getInitialState: () => any, setInitialState: (state: any) => void): void => {
+    Promise.race([
+        getInitialState(),
+        new Promise((resolve) =>
+            // Timeout in 150ms if `getInitialState` doesn't resolve
+            // Workaround for https://github.com/facebook/react-native/issues/25675
+            setTimeout(resolve, 150)
+        ),
+    ])
+        .then((state) => {
+            if (state !== undefined) {
+                setInitialState(state);
+            }
+        })
+        .catch((e) => {
+            console.error(e);
+        });
+};

package/template/src/navigation/index.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { View } from 'react-native';
+import { NavDrawerProps, NavigationDrawer } from './navigation-drawer';
+import { createStackNavigator } from '@react-navigation/stack';
+import Home from '../screens/home';
+import PageOne from '../screens/pageOne';
+import PageTwo from '../screens/pageTwo';
+
+const Drawer = createDrawerNavigator();
+
+export type RootStackParamList = {
+    Home: undefined;
+    PageOne: undefined;
+    PageTwo: undefined;
+    NavigationDrawer: undefined;
+};
+
+const RootStack = createStackNavigator<RootStackParamList>();
+
+const CustomDrawerContent = (props: any): any => (
+    <View style={{ height: '100%' }}>
+        <NavigationDrawer {...props} />
+    </View>
+);
+
+export const MainRouter = (): any => (
+    <Drawer.Navigator
+        initialRouteName="Home"
+        drawerStyle={{ backgroundColor: 'transparent', width: 300, maxWidth: '80%' }}
+        drawerContent={(props: NavDrawerProps): ReactNode => <CustomDrawerContent {...props} />}
+    >
+        <RootStack.Screen name="Home" component={Home} />
+        <RootStack.Screen name="PageOne" component={PageOne} />
+        <RootStack.Screen name="PageTwo" component={PageTwo} />
+    </Drawer.Navigator>
+);

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

@@ -0,0 +1,55 @@
+import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-native-components';
+import React, { useState, useCallback } from 'react';
+import * as Colors from '@brightlayer-ui/colors';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from './index';
+
+export const navGroupItems: NavItem[] = [
+    {
+        title: 'Home Page',
+        itemID: 'Home',
+        icon: { name: 'home' },
+    },
+    {
+        title: 'Page One',
+        itemID: 'PageOne',
+        icon: { name: 'looks-one' },
+    },
+    {
+        title: 'Page Two',
+        itemID: 'PageTwo',
+        icon: { name: 'looks-two' },
+    },
+];
+
+export type NavDrawerProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'NavigationDrawer'>;
+};
+
+export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
+    const [selected, setSelected] = useState('Home');
+    const selectItem = useCallback(
+        (id) => {
+            navigation.navigate(id);
+            setSelected(id);
+        },
+        [navigation]
+    );
+
+    return (
+        <Drawer activeItem={selected} onItemSelect={(id: string): void => selectItem(id)}>
+            <DrawerHeader
+                title={'Brightlayer UI'}
+                subtitle={'React Native Project'}
+                fontColor={Colors.white[50]}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.closeDrawer();
+                }}
+            />
+            <DrawerBody>
+                <DrawerNavGroup items={navGroupItems} hidePadding={false} />
+            </DrawerBody>
+        </Drawer>
+    );
+};

package/template/src/screens/home.tsx

@@ -0,0 +1,198 @@
+import React, { useCallback } from 'react';
+import {
+    SafeAreaView,
+    ScrollView,
+    StyleSheet,
+    Linking,
+    TextStyle,
+    ViewStyle,
+    View,
+    Animated,
+    Easing,
+} from 'react-native';
+import { Avatar, Button, Divider, useTheme } from 'react-native-paper';
+import { Body1, H4, Header, IconFamily, InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
+import { Theme } from 'react-native-paper/lib/typescript/types';
+import Logo from '../../assets/images/Logo.svg';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+import { useSecurityActions } from '@brightlayer-ui/react-native-auth-workflow';
+import { LocalStorage } from '../store/local-storage';
+import * as Colors from '@brightlayer-ui/colors';
+
+const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
+const LockIcon: IconFamily = { name: 'lock', direction: 'ltr' };
+const ExitToAppIcon: IconFamily = { name: 'exit-to-app', direction: 'ltr' };
+
+const styles = (
+    theme: Theme
+): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    pxbLogoWrapper: ViewStyle;
+    pxbLogo: ViewStyle;
+    title: TextStyle;
+    subtitle: TextStyle;
+    bold: TextStyle;
+    divider: ViewStyle;
+    openURLButtonText: TextStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+        },
+        pxbLogoWrapper: {
+            justifyContent: 'center',
+            marginTop: 16,
+        },
+        pxbLogo: {
+            alignSelf: 'center',
+            height: 100,
+            width: 100,
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: 16,
+        },
+        subtitle: {
+            textAlign: 'center',
+        },
+        bold: {
+            fontWeight: 'bold',
+        },
+        divider: {
+            marginVertical: 24,
+        },
+        openURLButtonText: {
+            color: theme.colors.text,
+            padding: 8,
+        },
+    });
+
+const OpenURLButton = (props: any): JSX.Element => {
+    const { url, title } = props;
+    const theme = useTheme();
+    const defaultStyles = styles(theme);
+
+    const handlePress = useCallback(async () => {
+        await Linking.openURL(url);
+    }, [url]);
+
+    return (
+        <Button
+            onPress={(): Promise<void> => handlePress()}
+            labelStyle={defaultStyles.openURLButtonText}
+            uppercase={false}
+        >
+            {title}
+        </Button>
+    );
+};
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'Home'>;
+};
+
+const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const theme = useTheme();
+    const defaultStyles = styles(theme);
+    const spinValue = new Animated.Value(0);
+    const securityHelper = useSecurityActions();
+
+    Animated.loop(
+        Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 2500,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })
+    ).start();
+
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+
+    const changePassword = (): void => {
+        securityHelper.showChangePassword();
+    };
+
+    const logOut = (): void => {
+        LocalStorage.clearAuthCredentials();
+        securityHelper.onUserNotAuthenticated();
+    };
+
+    const menuItems: InfoListItemProps[] = [
+        { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() },
+        { title: 'Log Out', icon: ExitToAppIcon, onPress: (): void => logOut() },
+    ];
+
+    return (
+        <>
+            <Header
+                title={'Home Page'}
+                icon={MenuIcon}
+                onIconPress={(): void => {
+                    navigation.openDrawer();
+                }}
+                actionItems={[
+                    {
+                        component: (
+                            <UserMenu
+                                menuItems={menuItems}
+                                avatar={
+                                    <Avatar.Text
+                                        label="UN"
+                                        size={40}
+                                        color={Colors.blue[500]}
+                                        style={{ backgroundColor: Colors.blue[50] }}
+                                    />
+                                }
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView>
+                    <View style={defaultStyles.pxbLogoWrapper}>
+                        <Animated.View style={[defaultStyles.pxbLogo, { transform: [{ rotate: spin }] }]}>
+                            <Logo height={100} width={100} fill={'#007bc1'} />
+                        </Animated.View>
+                    </View>
+                    <H4 style={defaultStyles.title}>
+                        Welcome to Brightlayer <H4 color={'primary'}>UI</H4>.
+                    </H4>
+                    <Body1 style={defaultStyles.subtitle}>
+                        Edit <Body1 style={defaultStyles.bold}>screens/home.tsx</Body1> and save to reload.
+                    </Body1>
+                    <Divider style={defaultStyles.divider} />
+                    <OpenURLButton title={'Brightlayer UI Documentation'} url={'https://brightlayer-ui.github.io/'} />
+                    <OpenURLButton
+                        title={'React Native Getting Started Guide'}
+                        url={'https://brightlayer-ui.github.io/development/frameworks-mobile/react-native'}
+                    />
+                    <OpenURLButton
+                        title={'Design Pattern Descriptions'}
+                        url={'https://brightlayer-ui.github.io/patterns'}
+                    />
+                    <OpenURLButton
+                        title={'React Native Component Library'}
+                        url={'https://brightlayer-ui-components.github.io/react-native/'}
+                    />
+                    <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/brightlayer-ui'} />
+                    <OpenURLButton
+                        title={'Design Pattern Source on GitHub'}
+                        url={'https://github.com/brightlayer-ui/react-native-design-patterns'}
+                    />
+                    <OpenURLButton title={'Release Roadmap'} url={'https://brightlayer-ui.github.io/roadmap'} />
+                    <OpenURLButton
+                        title={'Send Feedback or Suggestions'}
+                        url={'https://brightlayer-ui.github.io/community/contactus'}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default Home;

package/template/src/screens/index.tsx

@@ -0,0 +1,3 @@
+export * from './home';
+export * from './pageOne';
+export * from './pageTwo';

package/template/src/screens/pageOne.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import { EmptyState, Header, IconFamily, InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+import { Avatar } from 'react-native-paper';
+import { LocalStorage } from '../store/local-storage';
+import { useSecurityActions } from '@brightlayer-ui/react-native-auth-workflow';
+import * as Colors from '@brightlayer-ui/colors';
+
+const Event: IconFamily = { name: 'event', direction: 'rtl' };
+const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
+const LockIcon: IconFamily = { name: 'lock', direction: 'ltr' };
+const ExitToAppIcon: IconFamily = { name: 'exit-to-app', direction: 'ltr' };
+const styles = (): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    scrollViewContent: ViewStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+        },
+        scrollViewContent: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'PageOne'>;
+};
+
+const PageOne: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const defaultStyles = styles();
+    const securityHelper = useSecurityActions();
+
+    const changePassword = (): void => {
+        securityHelper.showChangePassword();
+    };
+
+    const logOut = (): void => {
+        LocalStorage.clearAuthCredentials();
+        securityHelper.onUserNotAuthenticated();
+    };
+
+    const menuItems: InfoListItemProps[] = [
+        { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() },
+        { title: 'Log Out', icon: ExitToAppIcon, onPress: (): void => logOut() },
+    ];
+
+    return (
+        <>
+            <Header
+                title={'Page One'}
+                icon={MenuIcon}
+                onIconPress={(): void => {
+                    navigation.openDrawer();
+                }}
+                actionItems={[
+                    {
+                        component: (
+                            <UserMenu
+                                menuItems={menuItems}
+                                avatar={
+                                    <Avatar.Text
+                                        label="UN"
+                                        size={40}
+                                        color={Colors.blue[500]}
+                                        style={{ backgroundColor: Colors.blue[50] }}
+                                    />
+                                }
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
+                    <EmptyState
+                        icon={Event}
+                        title={'Coming Soon'}
+                        description={'Replace this page with your own content'}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default PageOne;

package/template/src/screens/pageTwo.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import { EmptyState, Header, IconFamily, InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+import { useSecurityActions } from '@brightlayer-ui/react-native-auth-workflow';
+import { LocalStorage } from '../store/local-storage';
+import { Avatar } from 'react-native-paper';
+import * as Colors from '@brightlayer-ui/colors';
+
+const Event: IconFamily = { name: 'event', direction: 'rtl' };
+const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
+const LockIcon: IconFamily = { name: 'lock', direction: 'ltr' };
+const ExitToAppIcon: IconFamily = { name: 'exit-to-app', direction: 'ltr' };
+
+const styles = (): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    scrollViewContent: ViewStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+        },
+        scrollViewContent: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'PageTwo'>;
+};
+
+const PageTwo: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const defaultStyles = styles();
+    const securityHelper = useSecurityActions();
+
+    const changePassword = (): void => {
+        securityHelper.showChangePassword();
+    };
+
+    const logOut = (): void => {
+        LocalStorage.clearAuthCredentials();
+        securityHelper.onUserNotAuthenticated();
+    };
+
+    const menuItems: InfoListItemProps[] = [
+        { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() },
+        { title: 'Log Out', icon: ExitToAppIcon, onPress: (): void => logOut() },
+    ];
+
+    return (
+        <>
+            <Header
+                title={'Page Two'}
+                icon={MenuIcon}
+                onIconPress={(): void => {
+                    navigation.openDrawer();
+                }}
+                actionItems={[
+                    {
+                        component: (
+                            <UserMenu
+                                menuItems={menuItems}
+                                avatar={
+                                    <Avatar.Text
+                                        label="UN"
+                                        size={40}
+                                        color={Colors.blue[500]}
+                                        style={{ backgroundColor: Colors.blue[50] }}
+                                    />
+                                }
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
+                    <EmptyState
+                        icon={Event}
+                        title={'Coming Soon'}
+                        description={'Replace this page with your own content'}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default PageTwo;

package/template/src/store/local-storage.ts

@@ -0,0 +1,63 @@
+import { LOCAL_USER_DATA, REMEMBER_ME_DATA } from '../constants';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// For cross compatibility pretend AsyncStorage is just window local storage
+const window = {
+    localStorage: {
+        getItem: (key: string): Promise<string | null> => AsyncStorage.getItem(key),
+        setItem: (key: string, value: string): Promise<void> => AsyncStorage.setItem(key, value),
+        removeItem: (key: string): Promise<void> => AsyncStorage.removeItem(key),
+    },
+};
+
+type AuthData = {
+    userId: string | undefined;
+    email: string | undefined;
+    rememberMeData: { user: string; rememberMe: boolean };
+};
+
+async function readAuthData(): Promise<AuthData> {
+    const jsonUserData = (await window.localStorage.getItem(LOCAL_USER_DATA)) || '{}';
+    const userData = JSON.parse(jsonUserData) as {
+        user?: string;
+        userId?: string;
+    };
+    const jsonRememberMeData = (await window.localStorage.getItem(REMEMBER_ME_DATA)) || '{}';
+    const rememberMeData = JSON.parse(jsonRememberMeData) as {
+        user: string;
+        rememberMe: boolean;
+    };
+    return {
+        userId: userData.userId,
+        email: userData.user,
+        rememberMeData: rememberMeData,
+    };
+}
+
+function saveAuthCredentials(user: string, userId: string): void {
+    const userData = {
+        user: user,
+        userId: userId,
+    };
+    void window.localStorage.setItem(LOCAL_USER_DATA, JSON.stringify(userData));
+}
+function saveRememberMeData(user: string, rememberMe: boolean): void {
+    const RememberMeData = {
+        user: rememberMe ? user : '',
+        rememberMe: rememberMe,
+    };
+    void window.localStorage.setItem(REMEMBER_ME_DATA, JSON.stringify(RememberMeData));
+}
+function clearAuthCredentials(): void {
+    void window.localStorage.removeItem(LOCAL_USER_DATA);
+}
+function clearRememberMeData(): void {
+    void window.localStorage.removeItem(REMEMBER_ME_DATA);
+}
+export const LocalStorage = {
+    readAuthData,
+    saveAuthCredentials,
+    saveRememberMeData,
+    clearAuthCredentials,
+    clearRememberMeData,
+};