Overview

Imagine you're managing a large-scale application where users frequently require password resets, and admins need to handle these requests efficiently. One of the common challenges is allowing administrators to change the password of an authenticated user without needing email verification, especially when dealing with time-sensitive scenarios. This can become a bottleneck as the application grows, leading to user frustration and potential security concerns.

In this blog, we will address this issue by creating a solution using Supabase Authentication. You’ll learn how to build a secure and scalable system where admins can change passwords for other users seamlessly, without the need for additional verification steps, while ensuring the integrity of user data. By the end, you'll be equipped with the tools and knowledge to implement this feature in your own applications.

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.

Create a Supabase Project

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

Enable Supabase Authentication

• In the Supabase console, go to the Authentication section.
• click Providers and enable sign-in methods you need (e.g.- Email, Phone)

Note : - This Supabase project is designed to handle user logins and administrative functions.

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 for users

Creating the Flutterflow project for users authentication by supabase, please follow the below steps :

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

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.
• Go to the settings, enable Supabase, fill in the API URL and Anon Key from the Supabase project, and retrieve the schema.

‍

• Create the user auth page like below image in flutterflow, even you can use auth template which is given by flutterflow.

2. Create a FlutterFlow Project for Admin

Create Flutterflow project for admin and integrate supabase, please follow the step 1.

We have created a simple page for changing the user password in flutterflow, please check the below image.

Functionality of “Change Password ” button to change the specific user password : -

• Call the custom action(changeUserPassword) on “Change Password ” click.
• Pass parameters in custom action(changeUserPassword) : -
  • email from emailTextField widget value.
  • newPassword from newPasswordTextField widget value.
  • apiUrl and serviceRoleKey from Supabase console → Project Setting → API. Copy the Project URL(apiUrl) and service_role(serviceRoleKey ).
  • apiUrl and serviceRoleKey are used to create supabase client.

Custom Action

// Automatic FlutterFlow imports

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

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

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

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

Future changeUserPassword(

 String email,

 String apiUrl,

 String serviceRoleKey,

 String newPassword,

) async {

 // Add your function code here!

 String userId = '';

 final supabase = SupabaseClient(

     apiUrl, // Your Supabase URL

     serviceRoleKey);

 final List<User> users = await supabase.auth.admin.listUsers();

 for (int i = 0; i < users.length; i++) {

   if (users[i].email == email) {

     userId = users[i].id.toString();

   }

 }

 final response = await supabase.auth.admin.updateUserById(

   userId,

   attributes: AdminUserAttributes(password: newPassword),

 );

}

‍