Skip to content

doc: flutterflow auth kit integration #1932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 211 additions & 0 deletions src/routes/integrations/flutterflow-auth-kit/+page.markdoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
---
layout: integration
title: Appwrite Authentication Kit
description: Seamlessly integrate secure user authentication into your FlutterFlow apps—without writing complex code.
date: 2024-03-01
featured: true
isPartner: true
isNew: true
cover: /images/integrations/flutterflow-auth-kit/cover.png
category: auth
product:
avatar: '/images/integrations/avatars/flutterflow.png'
vendor: FlutterFlow
description: 'Appwrite is a secure, open-source backend server for web, mobile, and Flutter developers.'
platform:
- 'Self-hosted'
- 'Cloud'
images:
- /images/integrations/flutterflow-auth-kit/cover.png
- /images/integrations/flutterflow-auth-kit/featured.png
- /images/integrations/flutterflow-auth-kit/auth-login-overview.png
- /images/integrations/flutterflow-auth-kit/login-pointers.png
- /images/integrations/flutterflow-auth-kit/dashboard-pointers.png
---

FlutterFlow is a powerful visual builder that lets you create beautiful Flutter apps without writing much code. It's perfect for both beginners and experienced developers who want to build apps quickly. With its drag-and-drop interface and pre-built components, you can focus on creating great user experiences.

# What you’ll build

As you start creating your FlutterFlow app, you might want to add user accounts for things like social media features or task management. To help you with this, we've made it super easy to implement secure authentication using our official [Authentication library](https://marketplace.flutterflow.io/item/h1gn6StcXy6imjg7Ykr2). This guide will walk you through everything you need to know to get up and running with Appwrite authentication in your FlutterFlow project.

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.

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.

![Welcome screen](/images/integrations/flutterflow-auth-kit/welcomescreen.png)

# 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.

## 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. Select "Add Platform" from the **Platforms** tab.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For a new project, they won't see the Platforms tab 😕

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, we bold any text that appears in the Console such as Add platform

4. For each target platform, provide the required information as shown below:

| 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 |
Comment on lines +59 to +66
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The instructions should be to create a Flutter platform:

image image

and then select Web, Android, and/or iOS:

image


📌 **Save your Project ID** – you’ll need it in the next step.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's say to save both the api endpoint and project ID since there are multiple endpoints now with Appwrite Network.


## 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.

### 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.
4. In your FlutterFlow project:

- 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)

### Configure the Authentication Library

Once the library is added, you can configure it without writing any code:

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`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be the endpoint for their project/region.

- 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.


## 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.

### 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.

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.

2. `signUpWithEmailAndPassword`
- 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.

4. `signOut`
- 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.

### 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`.

![Flow example](/images/integrations/flutterflow-auth-kit/flow.png)


### Example: Sign Up flow

1. Use the `signUpWithEmailAndPassword` action.
2. Check `signUpResult.success`.
3. Success? → Dashboard.
4. Failure? → Show `signUpResult.formattedError`.

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

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.


## Troubleshooting common issues

1. **Library Not Found**
- 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.

3. **Session Management Issues**
- 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.

Now that you have the basics in place, you can enhance your app by implementing more advanced authentication features using Appwrite. If you run into any issues or have questions, the [Appwrite community on Discord](https://appwrite.io/discord) and the [FlutterFlow Community](https://community.flutterflow.io/) are always ready to help. Don't hesitate to reach out!

## More resources

If you would like to learn more about Appwrite and FlutterFlow, we have some resources that you should visit:

- [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)
2 changes: 1 addition & 1 deletion src/routes/integrations/stripe-subscriptions/+page.markdoc
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: integration
title: Subscriptions with Stripe
description: Integrate Stripe subscriptions with Appwrite to accept and manage recurring payments from your customers.
date: 2024-07-30
featured: true
featured: false
isPartner: true
isNew: false
cover: /images/integrations/stripe-subscriptions/cover.png
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.