[SOLVED] Supabase - Verify And Update Current Password

I've been trying to figure out a way to securely reset passwords without having to send a link via email (Supabase) and mess too much with code.

Here is the end goal:

Here is what I've done to do it. Hope this can help others.

Step 1: Create a Supabase function that takes in a password and verifies it.

Step 2: Create a custom Flutterflow action to verify against the current password.

Step 3: Create a custom action to update the password.

Step 1: Create a Supabase function that takes in a password and verifies it.

This function will return true if the password provided matches the encrypted password in the auth table. I just used the SQL editor to create this function

SET search_path = extensions, public, auth;

CREATE OR REPLACE FUNCTION public.verify_user_password(password text)
RETURNS BOOLEAN SECURITY DEFINER AS
$$
DECLARE
  user_id uuid;
BEGIN
  user_id := auth.uid();
  RETURN EXISTS (
    SELECT id 
    FROM auth.users 
    WHERE id = user_id AND encrypted_password = crypt(password::text, auth.users.encrypted_password)
  );
END;
$$ LANGUAGE plpgsql;

Step 2: Create a custom Flutterflow action to verify against the current password.

The second part is creating the custom action in Flutterflow to call on this newly created Supabase function to verify the password. This action uses the SupaFlow class which will use the logged users' info when making the calls to Supabase. To this action, we will pass the "current password" string that the user will enter in the first field (see first image of this post). Here is the custom action:

// 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!

import 'dart:convert';

Future<bool> verifyPassword(String currentPassword) async {
  // Assuming the user is already authenticated
  final response = await SupaFlow.client.rpc('verify_user_password', params: {
    'password': currentPassword,
  });

  // Check if the response data is true
  if (response == true) {
    return true;
  } else {
    return false;
  }
}

At this point we are able to verify whether the logged in user has provided the correct password.

The last step is to modify the current password. I got this from another post made by Anderson Brandão (https://community.flutterflow.io/discussions/post/password-reset-with-supabase-flutterflow-web-app-xGUdUjbAfX2nlJn).

Step 3: Create a custom action to update the password.

// 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!

import 'dart:convert';

Future<bool> updatePassword(String newPassword) async {
  // Add your function code here!
  final response = await SupaFlow.client.auth.updateUser(
    UserAttributes(password: newPassword),
  );

  if (response.user != null) {
    return true;
  } else {
    return false;
  }
}

Then all you have left to do is create a page (like the first image in this post) and when users click "submit" the action flow is:

1. Custom action (check current password)

Condition : if action output 1 true -->
Custom action (updatePassword)
Condition : if action output 2 true -->
End

Hope this is useful to some.