add flutter secure storage info

Author: PoojaB26

docs/generated-code/component-gen-code.md

@@ -1,7 +1,7 @@
 ---
-title: Components
+title: Component Model
 slug: /generated-code/component-model
-sidebar_position: 6
+sidebar_position: 5
 ---
 
 # Generated Code: Components

docs/generated-code/ff-app-state.md

@@ -1,6 +1,6 @@
 ---
 title: FFAppState
-sidebar_position: 2
+sidebar_position: 4
 ---
 
 # FFAppState

docs/generated-code/pages-generated-code.md

@@ -1,5 +1,5 @@
 ---
-title: Pages
+title: Page Model
 slug: /generated-code/page-model
 sidebar_position: 5
 ---

docs/generated-code/securing-keys-generated-code.md

@@ -1,20 +1,24 @@
 ---
-slug: /concepts/state-management/generated-code
-title: Generated Code
+slug: /generated-code/state-management-generated-code
+title: FlutterFlow State Management
 description: Learn about the state management used in FlutterFlow's generated code.
 tags: [Generated Code, Concepts, State Management]
-toc_max_heading_level: 5
-sidebar_position: 2
+toc_max_heading_level: 4
+sidebar_position: 3
 keywords: [FlutterFlow, Generated Code, State Management, Concepts]
 ---
 
-# State Management
+# FlutterFlow State Management
+
+:::warning[Correct topic?]
+This document explains the generated code behind the state management approaches used in FlutterFlow. If you're looking for guidance on adding state variables in FlutterFlow, refer to the **[State Variables](../ff-concepts/state-management/state-variables.md)** documentation.
+:::
 
 FlutterFlow manages state in several ways, depending on the scope.
 
-Generally, state management is handled using the Provider package, which facilitates the provisioning of data models for components, pages, and the overall app state.
+Generally, state management is handled using the [Provider](https://pub.dev/packages/provider) package, which facilitates the provisioning of data models for components, pages, and the overall app state.
 
-![state-management.avif](../../../static/img/state-management.avif)
+![state-management.avif](../../static/img/state-management.avif)
 
 ## Page & Component Models
 
@@ -24,13 +28,13 @@ Additionally, they provide space for action blocks, which are a set of actions t
 
 ## Page State
 
-[Variables](../../resources/ui/pages/page-lifecycle.md) used exclusively within a page — such as a text field validator or the value of a checkbox — are stored in the `Model` of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
+[Variables](../resources/ui/pages/page-lifecycle.md) used exclusively within a page — such as a text field validator or the value of a checkbox — are stored in the `Model` of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
 
 Variables within a page are tracked through `StatefulWidget` and are encapsulated into that page’s Model.
 
 ## Component State
 
-Similar to page state, [**Component State variables**](../../resources/ui/components/component-lifecycle.md) are accessible within the component where they are defined. Each component has a corresponding `Model` and `Widget` class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
+Similar to page state, [**Component State variables**](../resources/ui/components/component-lifecycle.md) are accessible within the component where they are defined. Each component has a corresponding `Model` and `Widget` class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
 
 This accessibility is possible because the Model of a component is instantiated within the parent Page model. It utilizes the Provider method `context.read()`, which returns any existing model in the tree before instantiating a new one. Thus, any updates to the state in the component model will reflect in the parent’s instance of that component model.
 
@@ -40,6 +44,13 @@ For example, if a page includes a component with a text field and later on the p
 
 It’s important to note that components cannot directly access variables of other components on the same page. However, you can pass a variable from ComponentA as a parameter to ComponentB in their parent Page. This ensures that ComponentB receives all updates from ComponentA as expected.
 
+## App State
+
+:::info[FFAppState]
+The generated code behind FlutterFlow's App State class is explained in the **[FFAppState](ff-app-state.md)** documentation.
+
+:::
+
 ## Variables
 
 Variables required across multiple pages of the app, such as a username, should be added to the App State. Refer to `lib/app_state.dart`.
@@ -50,9 +61,18 @@ On each page that requires access to app state variables, the method ```context.
 
 ## Persisting App State
 
-When an app state variable is created, selecting the "Persisted" option enables FlutterFlow to save it on the device using the [shared_preferences package](https://pub.dev/packages/shared_preferences). This ensures the variable remains available even after the app is restarted, making it ideal for persisting settings such as login status or a user's choice between light and dark modes.
+When an app state variable is created, selecting the "Persisted" option enables FlutterFlow to save it on the device using the [**Shared Preferences**](https://pub.dev/packages/shared_preferences) package. This ensures the variable remains available even after the app is restarted, making it ideal for persisting settings such as login status or a user's choice between light and dark modes.
+
+If the "**Secure Persisted Fields**" option is enabled in the app state settings, FlutterFlow utilizes the [**Flutter Secure Storage**](https://pub.dev/packages/flutter_secure_storage) package to encrypt the data. 
+
+:::tip[Platform Differences]
+If the platform is **Android**, then `flutter_secure_storage` stores data in [**`encryptedSharedPreference`**](https://developer.android.com/reference/androidx/security/crypto/EncryptedSharedPreferences), which are shared preferences that encrypt keys and values. It handles [**AES Encryption**](https://en.wikipedia.org/wiki/Advanced_Encryption_Standard) to generate a secret key encrypted with [**RSA**](https://en.wikipedia.org/wiki/RSA_(cryptosystem)) and stored in [**KeyStore**](https://developer.android.com/reference/java/security/KeyStore).
+
+For the **iOS** platform, it uses the [**KeyChain**](https://developer.apple.com/documentation/security/keychain_services) which is an iOS-specific secure storage used to store and access cryptographic keys only in your app.
+
+In the case of the **Web**, it uses the [**Web Cryptography**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) (Web Crypto) API.
+:::
 
-If the "Secure Persisted Fields" option is enabled in the app state settings, FlutterFlow utilizes the [flutter_secure_storage package](https://pub.dev/packages/flutter_secure_storage) to encrypt the data. This package leverages platform-specific implementations for data encryption, utilizing Keychain on iOS, KeyStore on Android, and libsecret on Linux.
 
 ## Global State