docs: update FlutterFlow auth kit integration docs and cover image

Author: Nishantjain10

src/routes/integrations/flutterflow-auth-kit/+page.markdoc

@@ -31,11 +31,11 @@ As you start creating your FlutterFlow app, you might want to add user accounts
 
 By the end of this guide, you’ll have a fully functional authentication system with:
 
-- Email/password sign-up and login
-- Secure session management
-- User profile handling
-- Error handling with user feedback
-- Protected routes for authenticated users
+- Email/password sign-up and login.
+- Secure session management.
+- User profile handling.
+- Error handling with user feedback.
+- Protected routes for authenticated users.
 
 Want to see the final result first? Check out our [Appwrite Flutterflow Demo App](https://app.flutterflow.io/project/appwrite-auth-yxmd9b) to experience all these features in action! Then follow along to build your own custom version.
 
@@ -44,164 +44,159 @@ Want to see the final result first? Check out our [Appwrite Flutterflow Demo App
 # Before you start
 
 Here’s what you’ll need to have ready:
-- [Appwrite account](https://cloud.appwrite.io/console/register)
-- [FlutterFlow account](https://app.flutterflow.io/create-account)
-- [FlutterFlow Marketplace account](https://marketplace.flutterflow.io/login) (must use the same email as your FlutterFlow account)
-- Basic understanding of FlutterFlow’s interface
+- [Appwrite account](https://cloud.appwrite.io/console/register).
+- [FlutterFlow account](https://app.flutterflow.io/create-account).
+- [FlutterFlow Marketplace account](https://marketplace.flutterflow.io/login) (must use the same email as your FlutterFlow account).
+- Basic understanding of FlutterFlow’s interface.
 
-
-## Step 1: Setting up your Appwrite project 
+## Step 1: Setting up your Appwrite project
 
 Let’s start by getting your Appwrite project ready:
 
-1. Head over to the [Appwrite Console](https://cloud.appwrite.io/)
-2. Create a new project (give it a name that makes sense for your app)
-3. Choose Flutter as your platform
-4. Configure the platform settings by adding these domains:
-
-| Purpose                | Domains              |
-|------------------------|----------------------|
-| Local testing          | localhost            |
-| FlutterFlow web testing | `.web.app`, `.run.app` |
+1. Head over to the [Appwrite Console](https://cloud.appwrite.io/).
+2. Create a new project (give it a name that makes sense for your app).
+3. Select "Add Platform" from the **Platforms** tab.
+4. For each target platform, provide the required information as shown below:
 
-Note: Save your Project ID – you’ll need it for the next steps
+| Platform       | Required Info                                     |
+|----------------|---------------------------------------------------|
+| Web app / FlutterFlow Web Testing        | Hostnames: `localhost`, `*.web.app`, `*.run.app` |
+| Android app    | Package name (e.g. `com.company.appname`)         |
+| Apple app (iOS)| Bundle ID (e.g. `com.company.appname`)            |
+| Flutter app    | Choose one or more supported platforms (Web, iOS, Android) and enter appropriate identifiers |
 
+📌 **Save your Project ID** – you’ll need it in the next step.
 
 ## Step 2: Adding the authentication library
 
 The Authentication library provides essential core functionality:
 
-- Pre-configured Custom Actions for authentication
-- App States for session management
-- Built-in Error Handling
-- User Session Management
-- Custom Data Types for type-safe responses
+- Pre-configured Custom Actions for authentication.
+- App States for session management.
+- Built-in Error Handling.
+- User Session Management.
+- Custom Data Types for type-safe responses.
 
 ### Here’s how to add it to your project:
 
-1. Visit the [FlutterFlow Marketplace](https://marketplace.flutterflow.io/)
-2. Search for “Appwrite Authentication Kit” or visit [Appwrite Authentication Kit](https://marketplace.flutterflow.io/item/h1gn6StcXy6imjg7Ykr2)
-3. Click “Add” to add it to your marketplace account
+1. Visit the [FlutterFlow Marketplace](https://marketplace.flutterflow.io/).
+2. Search for “Appwrite Authentication Kit” or visit [Appwrite Authentication Kit](https://marketplace.flutterflow.io/item/h1gn6StcXy6imjg7Ykr2).
+3. Click “Add” to add it to your marketplace account.
 4. In your FlutterFlow project:
 
-
-   - Navigate to `Project Settings > Project Dependencies`
-   - Find “Appwrite Authentication Kit” under FlutterFlow Libraries
-   - Click “Add Library”
+   - Navigate to `Project Settings > Project Dependencies`.
+   - Find “Appwrite Authentication Kit” under FlutterFlow Libraries.
+   - Click “Add Library”.
 
 ![Screenshot of login](/images/integrations/flutterflow-auth-kit/screenshot.png)
 
-## Step 3: Understanding the components
+### Configure the Authentication Library
 
-### App states:
+Once the library is added, you can configure it without writing any code:
 
-The library sets up two essential app states:
+1. Navigate to `Settings > Project Dependencies` in your FlutterFlow project.
+2. Under the **Appwrite Authentication Kit** entry, click on **View Details**.
+3. Update the environment values directly in the panel that opens:
+   
+- API Endpoint: `https://cloud.appwrite.io/v1`
+- Project ID: `Your Appwrite Project ID`
+
+Note: This view opens automatically the first time a user adds the library - making it super easy to update values right away.
 
-- `appwriteConfig`: Stores configuration details securely
-- `appwriteUser`: Manages user session information
+
+## Step 3: Understanding the components
+
+The library sets up two essential app states:
+- `appwriteConfig`: Stores configuration details securely.
+- `appwriteUser`: Manages user session information.
 
 Both states are automatically configured with:
 
-- String data type
-- Persistence enabled
-- Authentication flow readiness
+- String data type.
+- Persistence enabled.
+- Authentication flow readiness.
 
 ### Custom Data Types:
 
 The library provides two custom data types for type-safe responses:
 
-1. `AppwriteUser`: Represents user data  
-   - Fields: id, email, name, emailVerified, status  
-   - Used for: Storing and passing user information  
+1. `AppwriteUser`: Represents user data.  
+   - Fields: id, email, name, emailVerified, status.  
+   - Used for: Storing and passing user information.  
 
-2. `AppwriteUserResponse`: Standard response format  
-   - Fields: success, error, errorCode, errorType, formattedError, user  
-   - Used for: Consistent error handling and success responses
+2. `AppwriteUserResponse`: Standard response format.  
+   - Fields: success, error, errorCode, errorType, formattedError, user.  
+   - Used for: Consistent error handling and success responses.
 
 ### Authentication actions:
 
 The library provides five essential custom actions:
 
 1. `initialize`  
-   - Purpose: Sets up your Appwrite configuration  
-   - Returns: `AppwriteUserResponse` with initialization status  
-   - Must be called before any other authentication action  
+   - Purpose: Sets up your Appwrite configuration.  
+   - Returns: `AppwriteUserResponse` with initialization status.  
+   - Must be called before any other authentication action.  
 
 2. `signUpWithEmailAndPassword`  
-   - Parameters: email, password  
-   - Returns: `AppwriteUserResponse` with user data  
-   - Handles: Account creation and session setup  
+   - Parameters: email, password.  
+   - Returns: `AppwriteUserResponse` with user data.  
+   - Handles: Account creation and session setup.  
 
 3. `signInWithEmail`  
-   - Parameters: email, password  
-   - Returns: `AppwriteUserResponse` with session data  
-   - Manages: User login process  
+   - Parameters: email, password.  
+   - Returns: `AppwriteUserResponse` with session data.  
+   - Manages: User login process.  
 
 4. `signOut`  
-   - No parameters required  
-   - Returns: `AppwriteUserResponse` with success status  
-   - Handles: Complete session cleanup  
+   - No parameters required.  
+   - Returns: `AppwriteUserResponse` with success status.  
+   - Handles: Complete session cleanup.  
 
 5. `getCurrentUser`  
-   - No parameters required  
-   - Returns: `AppwriteUserResponse` with current user data  
-   - Perfect for: Authentication state checks
+   - No parameters required.  
+   - Returns: `AppwriteUserResponse` with current user data.  
+   - Perfect for: Authentication state checks.
 
 ### Understanding action flows:
 
 Each authentication action follows this consistent pattern:
 
-1. Action execution  
-2. Response handling using `AppwriteUserResponse`
-3. Success/failure conditions based on `response.success`  
-4. Error handling using `response.formattedError`
+1. Action execution.  
+2. Response handling using `AppwriteUserResponse`.  
+3. Success/failure conditions based on `response.success`.  
+4. Error handling using `response.formattedError`.
 
 ![Flow example](/images/integrations/flutterflow-auth-kit/flow.png)
 
-### Example: Setting up Initialize action
-
-1. Configure Library Values:  
-   - API Endpoint: `https://cloud.appwrite.io/v1`  
-   - Project ID: `Your Appwrite project ID`  
-2. Drop an `initialize` action in your startup flow  
-3. Add a condition to check `initializeResult.success`  
-4. On success: Navigate to success page  
-5. On failure: Show `initializeResult.formattedError`
 
 ### Example: Sign Up flow
 
-1. Use the `signUpWithEmailAndPassword` action  
-2. Check `signUpResult.success`  
-3. Success? → Dashboard  
-4. Failure? → Show `signUpResult.formattedError`
+1. Use the `signUpWithEmailAndPassword` action.  
+2. Check `signUpResult.success`.  
+3. Success? → Dashboard.  
+4. Failure? → Show `signUpResult.formattedError`.
 
-You can implement similar flow patterns for other authentication actions  (`signInWithEmail`, `signOut`, `getCurrentUser`), following the similar structure of checking results and handling success/failure scenarios appropriately.
+You can use `response.error` for internal logging and `response.formattedError` to display user-friendly messages. Similarly, you can implement flow patterns for other authentication actions (`signInWithEmail`, `signOut`, `getCurrentUser`), following the similar structure of checking results and handling success/failure scenarios appropriately.
 
+## See it in action
 
-## See it in action:
+Check out our [Appwrite FlutterFlow Demo App](https://app.flutterflow.io/project/appwrite-auth-yxmd9b) to explore the complete auth flow in action - from sign-up to session management.
 
-Want to see how it all comes together? Check out our [Appwrite Flutterflow Demo App](https://app.flutterflow.io/project/appwrite-auth-yxmd9b) where you can check all custom actions in use:
-   
-   - User registration process
-   - Login flow
-   - Session management
-   - Error handling
-   - Profile management
 
 ## Troubleshooting common issues
 
 1. **Library Not Found**  
-   - Verify marketplace account email matches FlutterFlow account  
-   - Check if library is properly added in Project Dependencies  
+   - Verify marketplace account email matches FlutterFlow account.  
+   - Check if library is properly added in Project Dependencies.  
 
 2. **Authentication Failures**  
-   - Confirm `initialize` action is called first  
-   - Verify endpoint and projectId values  
-   - Check Appwrite console for platform settings  
+   - Confirm `initialize` action is called first.  
+   - Verify endpoint and projectId values.  
+   - Check Appwrite console for platform settings.  
 
 3. **Session Management Issues**  
-   - Ensure app states are properly configured  
-   - Verify persistence settings  
+   - Ensure app states are properly configured.  
+   - Verify persistence settings.
 
 This completes our guide on setting up Appwrite authentication in your FlutterFlow app. You now have a solid foundation for managing user accounts and secure sessions.
 
@@ -213,4 +208,4 @@ If you would like to learn more about Appwrite and FlutterFlow, we have some res
 
 - [Appwrite Flutterflow Demo App](https://app.flutterflow.io/project/appwrite-auth-yxmd9b)
 - [Appwrite Documentation](https://appwrite.io/docs)
-- [FlutterFlow Marketplace](https://marketplace.flutterflow.io/item/h1gn6StcXy6imjg7Ykr2)
+- [FlutterFlow Marketplace](https://marketplace.flutterflow.io/item/h1gn6StcXy6imjg7Ykr2)