When User delete his account then delete all his assets which he has uploaded in Supabase.

Overview

When a user deletes their account, it's crucial to also remove all associated assets stored in Supabase Storage to ensure privacy and data integrity. Here's a step-by-step guide on how to implement this functionality using FlutterFlow and Supabase.

Prerequisites

• Supabase
• FlutterFlow

Supabase

Supabase is an open-source Backend-as-a-Service (BaaS) platform that offers a scalable backend for building web and mobile applications. It provides developers with tools to set up a complete backend without manually configuring databases or authentication systems. Supabase is often described as an alternative to Google Firebase, but with a stronger focus on open-source technologies and relational databases like PostgreSQL.

Follow the steps below to set up your Supabase project:

1. Set up a Supabase Project

• Go to Supabase.
• Sign in or create an account.
• Create a new project:
  • Enter the project name.
  • Choose a region.
  • Set up a database password (keep it secure).
• Wait for the project to initialize.

2. Enable Authentication Provider

• In your Supabase project dashboard, navigate to Authentication > Settings.
• Under the Provider section, enable the authentication method:
  • Email/Password: Toggle it on.

3. Configure API Keys

1. Go to Project Settings > API.
2. Copy the Project URL and API Key (usually the anon public key). You'll need these to configure the client-side.

4. Create Bucket in Supabase Storage

Go to the supabase storage and create new bucket there( ex : - Assets).

FlutterFlow

FlutterFlow is a low-code development platform built on top of Flutter, Google's open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

Follow the steps below to set up your FlutterFlow project:

1. Create a FlutterFlow Project

• Go to the FlutterFlow console.
• Click on Create a project and follow the instructions to set up a new project.

2. Enable Supabase Authentication in FlutterFlow

• In the settings, enable authentication and select Supabase as the authentication type in the FlutterFlow console.
• Set up the entry and login pages.
• Enable Supabase in FlutterFlow and fill in the API URL and Anon Key from Supabase.

• Go to the Supabase project, select Project Settings, choose API, then copy the URL and Anon Key, and paste them into the FlutterFlow console.

3. Flutterflow Functionality

• Created a simple Sign in and Sign up page in flutterflow project.
• When user sign in or sign up, they will jump to the profile page.
• There are three button in profile page
  • Upload :- upload any file in supabase storage.
  • Delete Account : - Delete the user account and associated assets which stored in supabase storage.
  • Log Out : - To Log out the user.

• Upload Button Action : - Select Upload Button → Actions → onTab → Upload media to supabse. Set parameters like : - Bucket name and Upload Folder Path.

Here in the above action we pass the Bucket Name(Assets) and Upload Folder Path(User ID).

In supabase storage the uploaded file will be stored like, Assets → User ID → Uploaded File.

‍

Delete Accoount Button Action : - Delete button action we used two custom actions, one for delete authenticated user’s all assets from supabase storage ****and another one for delete user account. you can even combine both custom action into one custom action.

• deleteAssetsFromStorage Custom Action : - In this custom action just need to pass the bucket name and folderPath(User ID).

// Automatic FlutterFlow imports

import '/backend/schema/structs/index.dart';

import '/backend/supabase/supabase.dart';

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!



Future deleteAssetsFromStorage(

 String bucketName,

 String folderPath,

) async {

 // Add your function code here!

 final supabase = Supabase.instance.client;



 try {

   // List all files in the folder

   final List<FileObject> files =

       await supabase.storage.from(bucketName).list(path: folderPath);



   if (files.isNotEmpty) {

     // Prepare the list of file paths to delete

     final List<String> filePaths = files.map((file) => file.name).toList();



     // Delete all files in the folder

     final response = await supabase.storage

         .from(bucketName)

         .remove(filePaths.map((file) => '$folderPath/$file').toList());



     if (response.length > 0) {

       print('Folder $folderPath deleted successfully');

     } else {

       print('Error deleting folder: ');

     }

   } else {

     print('No files found in the folder: $folderPath');

   }

 } catch (error) {

   print('Error deleting folder: $error');

 }

}



• deleteUserAccount Custom Action : - In the below custom action, we can delete an authenticated user from the Supabase Authentication user table. In this action, I provide three arguments: userId, supabaseURL, and serviceRoleSecretKey.

// Automatic FlutterFlow imports

import '/backend/schema/structs/index.dart';

import '/backend/supabase/supabase.dart';

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!



Future deleteUserAccount(

 String userId,

 String supabaseURL,

 String serviceRoleSecretKey,

) async {

 // Add your function code here!

 final supabase = SupabaseClient(supabaseURL, serviceRoleSecretKey);

 await supabase.auth.admin.deleteUser(userId);

}



• For userId, pass the authenticated user's ID. For supabaseURL and serviceRoleSecretKey, use the Supabase API URL and service_rolesecret (highlighted above).

Conclusion

Implementing account deletion functionality is an important step in protecting user privacy and maintaining data integrity. By combining Supabase's backend capabilities with FlutterFlow's visual development environment, you can efficiently remove user accounts along with their associated files and assets stored in Supabase Storage.

This approach helps ensure a secure and seamless user experience while supporting compliance with modern data privacy requirements. By giving users control over their data and handling account deletion properly, you can build greater trust and transparency within your application.

‍