Has anyone been able to use Web3Auth with FlutterFlow via Custom Actions/Functions?

Wondering if anyone has had any luck with integrating Web3 Auth into FlutterFlow? I’ve attempted to adapt the code examples myself but am running into some issues with an error “No direct method <init>(Landroid/content/Context;ILjava/lang/String;)V in class Lcom.web3auth.session_manager_android.SessionManager” indicates an issue with Web3Auth’s Android implementation. This usually happens due to:

  1. Incompatible Web3Auth SDK versions
  2. Incorrect dependencies in Gradle
  3. Native library issues after an upgrade

Hi Zak! :star2:

It sounds like you’re pioneering the integration of Web3Auth with FlutterFlow using Custom Actions/Functions, which is exciting! The error you’re encountering seems to be related to Web3Auth’s Android implementation.

Here’s how you can proceed:

  1. SDK Version & Dependencies: Double-check the version of the Web3Auth SDK you’re using and ensure it’s compatible with the current version of your setup. Also, verify that all necessary dependencies are correctly updated in your build.gradle file.

  2. Native Libraries: If you’ve recently upgraded, make sure the native libraries are correctly configured. Sometimes a clean rebuild of the project helps.

  3. Code Integration: Review the initialization and integration code of Web3Auth in your project. Adaptations might be needed for compatibility with FlutterFlow’s custom functions.

If you’re able to share:

  • Your build.gradle dependencies
  • Web3Auth initialization and login code snippets

This could help us provide more targeted assistance! Good luck with your integration, and kudos for exploring new territories. :rocket:

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

Here is my initialization code.

// Automatic FlutterFlow imports
import '/backend/backend.dart';
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 'package:single_factor_auth_flutter/single_factor_auth_flutter.dart';
import 'package:single_factor_auth_flutter/input.dart'; // Provides SFAParams, LoginParams, etc.
import 'package:single_factor_auth_flutter/output.dart'; // Provides SFAKey and helper functions.
import 'package:single_factor_auth_flutter/single_factor_auth_flutter_platform_interface.dart';
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:web3auth_flutter/web3auth_flutter.dart';

// Provides SFAParams and Web3AuthNetwork
const MethodChannel _channel = MethodChannel('single_factor_auth_flutter');
Future<String?> initWeb3AuthDynamic() async {
  // Add your function code here!
  // Create the SFAParams instance using the individual parameters.

  SFAParams initParams = SFAParams(
    network: Web3AuthNetwork.sapphire_devnet,
    clientId:
        "CLIENT ID",
  );

  // Convert the parameters to JSON and remove any null values.
  Map<String, dynamic> initParamsJson = initParams.toJson();
  initParamsJson.removeWhere((key, value) => value == null);

  // Invoke the native method to initialize Web3Auth.
  await _channel.invokeMethod('init', jsonEncode(initParamsJson));

  return "initialized";
}

Here is my integration actions:

// Automatic FlutterFlow imports
import '/backend/backend.dart';
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 'package:single_factor_auth_flutter/single_factor_auth_flutter.dart';
import 'package:single_factor_auth_flutter/input.dart'; // Provides SFAParams, LoginParams, etc.
import 'package:single_factor_auth_flutter/output.dart'; // Provides SFAKey and helper functions.
import 'package:single_factor_auth_flutter/single_factor_auth_flutter_platform_interface.dart';
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:web3auth_flutter/web3auth_flutter.dart';

Future<String?> checkSession() async {
  // Add your function code here!
  const MethodChannel _channel = MethodChannel('single_factor_auth_flutter');
  try {
    final String? sfaKeyJson = await _channel.invokeMethod('initialize');
    return sfaKeyJson; // Already a standard string.
  } on PlatformException catch (e) {
    throw Exception("Session initialization error: ${e.message}");
  }
}
// Automatic FlutterFlow imports
import '/backend/backend.dart';
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';
import 'package:flutter/services.dart';
import 'package:single_factor_auth_flutter/input.dart'; // Defines LoginParams
import 'package:single_factor_auth_flutter/output.dart'; // Provides sfaKeyFromJson
import 'package:web3auth_flutter/web3auth_flutter.dart';

Future<String?> connectWithLoginDynamic(
  String verifier,
  String verifierId,
  String idToken,
  String? aggregateVerifier,
) async {
  // Add your function code here!
// Build the LoginParams object using the provided values.
  const MethodChannel _channel = MethodChannel('single_factor_auth_flutter');
  LoginParams loginParams = LoginParams(
    verifier: verifier,
    verifierId: verifierId,
    idToken: idToken,
    aggregateVerifier: aggregateVerifier,
  );

  // Convert login parameters to a JSON map and remove null values.
  Map<String, dynamic> loginParamsJson = loginParams.toJson();
  loginParamsJson.removeWhere((key, value) => value == null);

  // Call the platform method 'connect' with the JSON string.
  final String sfaKeyJson = await _channel.invokeMethod(
    'connect',
    jsonEncode(loginParamsJson),
  );

  return sfaKeyJson;
}

Here is my build.gradle dependencies:

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

rootProject.buildDir = '../build'
subprojects {
    afterEvaluate { project ->
        if (project.plugins.hasPlugin("com.android.application") ||
                project.plugins.hasPlugin("com.android.library")) {
            project.android {
                compileSdkVersion 34
            }
        }
    }
}
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Here is my pubspec.yaml:

name: katz_eliminator
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 5.1.1+101

environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter
  algolia: 1.1.1
  app_links: 6.3.2
  app_links_platform_interface: 2.0.2
  auto_size_text: 3.0.0
  badges: 2.0.2
  cached_network_image: 3.4.1
  cached_network_image_platform_interface: 4.1.1
  cached_network_image_web: 1.3.1
  cloud_firestore: 5.5.0
  cloud_firestore_platform_interface: 6.5.0
  cloud_firestore_web: 4.3.4
  cloud_functions: 5.1.5
  cloud_functions_platform_interface: 5.5.39
  cloud_functions_web: 4.10.4
  collection: 1.18.0
  csslib: 0.17.3
  csv: 6.0.0
  device_info_plus: 10.1.2
  device_info_plus_platform_interface: 7.0.1
  dropdown_button2: 2.3.9
  easy_debounce: 2.0.1
  equatable: 2.0.5
  expandable: 5.0.1
  file_picker: 8.1.2
  firebase_analytics: 11.3.5
  firebase_analytics_platform_interface: 4.2.7
  firebase_analytics_web: 0.5.10+4
  firebase_auth: 5.3.3
  firebase_auth_platform_interface: 7.4.9
  firebase_auth_web: 5.13.4
  firebase_core: 3.8.0
  firebase_core_platform_interface: 5.3.0
  firebase_core_web: 2.18.1
  firebase_messaging: 15.1.5
  firebase_messaging_platform_interface: 4.5.48
  firebase_messaging_web: 3.9.4
  firebase_performance: 0.10.0+10
  firebase_performance_platform_interface: 0.1.4+46
  firebase_performance_web: 0.1.7+4
  firebase_remote_config: 5.1.5
  firebase_remote_config_platform_interface: 1.4.46
  firebase_remote_config_web: 1.7.4
  firebase_storage: 12.3.2
  firebase_storage_platform_interface: 5.1.33
  firebase_storage_web: 3.10.5
  flip_card: 0.7.0
  flutter_animate: 4.5.0
  flutter_cache_manager: 3.4.1
  flutter_plugin_android_lifecycle: 2.0.20
  flutter_secure_storage: 9.2.2
  flutter_secure_storage_linux: 1.2.1
  flutter_secure_storage_macos: 3.1.2
  flutter_secure_storage_platform_interface: 1.1.2
  flutter_secure_storage_web: 1.2.1
  flutter_secure_storage_windows: 3.1.2
  font_awesome_flutter: 10.7.0
  from_css_color: 2.0.0
  functions_client: 2.3.2
  go_router: 12.1.3
  google_fonts: 6.1.0
  google_sign_in: 6.2.1
  google_sign_in_android: 6.1.30
  google_sign_in_ios: 5.7.7
  google_sign_in_platform_interface: 2.4.5
  google_sign_in_web: 0.12.4+2
  gotrue: 2.8.4
  hive: 2.2.3
  html: 0.15.4
  http: 1.2.2
  image_picker: 1.1.2
  image_picker_android: 0.8.12+13
  image_picker_for_web: 3.0.5
  image_picker_ios: 0.8.12
  image_picker_linux: 0.2.1+1
  image_picker_macos: 0.2.1+1
  image_picker_platform_interface: 2.10.0
  image_picker_windows: 0.2.1+1
  infinite_scroll_pagination: 4.0.0
  intl: 0.19.0
  json_path: 0.7.2
  lottie: 2.7.0
  mime_type: 1.0.0
  page_transition: 2.1.0
  path_provider: 2.1.4
  path_provider_android: 2.2.10
  path_provider_foundation: 2.4.0
  path_provider_linux: 2.2.1
  path_provider_platform_interface: 2.1.2
  path_provider_windows: 2.3.0
  percent_indicator: 4.2.2
  permission_handler: 11.3.1
  permission_handler_android: 12.0.12
  permission_handler_apple: 9.4.5
  permission_handler_html: 0.1.3+2
  permission_handler_platform_interface: 4.2.3
  permission_handler_windows: 0.2.1
  plugin_platform_interface: 2.1.8
  pointer_interceptor: 0.10.1+2
  pointer_interceptor_ios: 0.10.1
  pointer_interceptor_platform_interface: 0.10.0+1
  pointer_interceptor_web: 0.10.2+1
  postgrest: 2.1.4
  provider: 6.1.2
  realtime_client: 2.2.1
  rxdart: 0.27.7
  shared_preferences: 2.3.2
  shared_preferences_android: 2.3.2
  shared_preferences_foundation: 2.5.2
  shared_preferences_linux: 2.4.1
  shared_preferences_platform_interface: 2.4.1
  shared_preferences_web: 2.4.2
  shared_preferences_windows: 2.4.1
  sign_in_with_apple: 6.1.2
  sign_in_with_apple_platform_interface: 1.1.0
  sign_in_with_apple_web: 2.1.0
  single_factor_auth_flutter: ^5.3.0
  smooth_page_indicator: 1.1.0
  sqflite: 2.3.3+1
  sqflite_common: 2.5.4+3
  storage_client: 2.0.3
  stream_transform: 2.1.0
  styled_divider: 1.0.4
  supabase: 2.3.0
  supabase_flutter: 2.6.0
  synchronized: 3.2.0
  timeago: 3.6.1
  universal_io: 2.2.2
  url_launcher: 6.3.0
  url_launcher_android: 6.3.10
  url_launcher_ios: 6.3.1
  url_launcher_linux: 3.2.0
  url_launcher_macos: 3.2.1
  url_launcher_platform_interface: 2.3.2
  url_launcher_web: 2.3.3
  url_launcher_windows: 3.1.2
  uuid: ^4.0.0
  video_player: 2.9.2
  video_player_android: 2.7.13
  video_player_avfoundation: 2.6.2
  video_player_platform_interface: 6.2.3
  video_player_web: 2.3.2
  web3auth_flutter: ^6.1.2
  web3dart: ^2.7.3
  webview_flutter: 4.9.0
  webview_flutter_android: 3.16.7
  webview_flutter_platform_interface: 2.10.0
  webview_flutter_wkwebview: 3.15.0
  webviewx_plus: 0.5.0

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0

dependency_overrides:
  http: 1.2.2
  pointer_interceptor: 0.10.1+2
  pointer_interceptor_ios: 0.10.1
  pointer_interceptor_platform_interface: 0.10.0+1
  pointer_interceptor_web: 0.10.2+1
  rxdart: 0.27.7
  uuid: ^4.0.0
  win32: 5.5.1

dev_dependencies:
  flutter_launcher_icons: 0.13.1
  flutter_lints: 4.0.0
  image: 4.2.0
  lints: 4.0.0
  flutter_test:
    sdk: flutter


flutter_launcher_icons:
  android: true
  ios: true
  remove_alpha_ios: true
  web:
    generate: true
  image_path: 'assets/images/app_launcher_icon.png'


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/fonts/
    - assets/images/
    - assets/videos/
    - assets/audios/
    - assets/rive_animations/
    - assets/pdfs/
    - assets/jsons/

    - assets/environment_values/


  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Hey @zak we have not tried integrating Web3Auth with FlutterFlow, I’ll try it out this week and get back to you.

Thanks! Would be a powerful addition and use case for web3 auth!

Hey @Ayush - did you have a chance to take a look? Hit a bit of a brick wall here.

Hey @zak I tried, but was not able to make it work. Supporting FlutterFlow is not on priority as of now in the product road map, so won’t be able to give more time this sprint.

Appreciate you trying it out!