Initializing PnP Flutter SDK

After installation, the next step to use Web3Auth is to configure & initialize the SDK.

However, configuring & initializing is a three-step process:

1. Configure the Web3Auth Instance
2. Triggering Login exceptions
3. Initialize Web3Auth

Configure Web3Auth instance

Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project. Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customize your Web3Auth Instance.

Parameters

The init method takes an object called Web3AuthOptions as input to configure the Web3Auth instance.

Table

Parameter	Description
clientId	Your Web3Auth Client ID. You can get it from Web3Auth Dashboard under project details. It's a mandatory field of type String
network	Web3Auth Network, sapphire_mainnet, sapphire_devnet, mainnet, cyan, aqua or testnet. It's a mandatory field of type Network.
redirectUrl	URL that Web3Auth will redirect API responses upon successful authentication from browser. It's a mandatory field of type Uri.
whiteLabel?	WhiteLabel options for web3auth. It helps you define custom UI, branding, and translations for your brand app. It takes WhiteLabelData as a value.
loginConfig?	Login config for the custom verifiers. It takes HashMap<String, LoginConfigItem> as a value.
useCoreKitKey?	Use CoreKit Key to get core kit key. It's an optional field with default value as false.
chainNamespace?	Chain Namespace [eip155 and solana]. It takes ChainNamespace as a value.
mfaSettings?	Allows developers to configure the Mfa settings for authentication. It takes MfaSettings as a value.
sessionTime?	It allows developers to configure the session management time. Session Time is in seconds, default is 86400 seconds which is 1 day. sessionTime can be max 7 days

Class

class Web3AuthOptions {
  final String clientId;
  final Network network;
  final BuildEnv? buildEnv;
  final String? sdkUrl;
  final Uri redirectUrl;
  final WhiteLabelData? whiteLabel;
  final HashMap<String, LoginConfigItem>? loginConfig;
  final bool? useCoreKitKey;
  final ChainNamespace? chainNamespace;
  final MfaSettings? mfaSettings;
  final int? sessionTime;

  Web3AuthOptions({
    required this.clientId,
    required this.network,
    this.buildEnv = BuildEnv.production,
    String? sdkUrl,
    required this.redirectUrl,
    this.whiteLabel,
    this.loginConfig,
    this.useCoreKitKey,
    this.chainNamespace = ChainNamespace.eip155,
    this.sessionTime = 86400,
    this.mfaSettings,
  }): sdkUrl = sdkUrl ?? getSdkUrl(buildEnv ?? BuildEnv.production);

  Map<String, dynamic> toJson() {
    return {
      'clientId': clientId,
      'network': network.name,
      'sdkUrl': sdkUrl,
      'buildEnv': buildEnv?.name,
      'redirectUrl': redirectUrl.toString(),
      'whiteLabel': whiteLabel?.toJson(),
      'loginConfig': loginConfig,
      'useCoreKitKey': useCoreKitKey,
      'chainNamespace': chainNamespace?.name,
      'mfaSettings': mfaSettings,
      "sessionTime": sessionTime,
    };
  }
}

Configure Web3AuthFlutter

Future<void> initWeb3Auth() async {

  late final Uri redirectUrl;

  if (Platform.isAndroid) {
    redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
    // w3a://com.example.w3aflutter/auth
  } else {
    redirectUrl = Uri.parse('{bundleId}://auth');
    // com.example.w3aflutter://auth
  }


  await Web3AuthFlutter.init(Web3AuthOptions(
    clientId: "WEB3AUTH_CLIENT_ID",
    network: Network.sapphire_mainnet,
    redirectUrl: redirectUrl,
  ));

}

Triggering Login exceptions

The setCustomTabsClosed method can be used to trigger login exceptions for Android. For iOS, you don't need this method to trigger the login exceptions. The Android SDK uses the custom tabs and from current implementation of chrome custom tab, it's not possible to add a listener directly to chrome custom tab close button and trigger login exceptions.

Hence, it's necessary to use setCustomTabsClosed method in your login screen to trigger exceptions.

class LoginScreen extends State<T> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }

  @override
  void didChangeAppLifecycleState(final AppLifecycleState state) {
    // This is important to trigger the user cancellation on Android.
    if (state == AppLifecycleState.resumed) {
      Web3AuthFlutter.setCustomTabsClosed();
    }
  }

   @override
  Widget build(BuildContext context) {
    // Your UI code
  }
}

Initialize Web3Auth

After configuring Web3Auth, the next step is to initialize it using the initialize method. This method is essential for setting up the SDK, checking for any active sessions, and fetching the whitelabel configuration from your dashboard.

Once the initialize method executes successfully, you can use the getPrivKey or getEd25519PrivKey methods to verify if an active session exists. If there is no active session, these methods will return an empty string; otherwise, they will return the respective private key.

Note that if the API call to fetch the project configuration fails, the method will throw an error.

try {
  await Web3AuthFlutter.initialize();
} catch (e) {
  // Handle/Swallow Error
}

final privateKey = await Web3AuthFlutter.getPrivKey();

// Check if the session is present or not
if(privateKey.isNotEmpty) {
  // Active session present
}
// No active session present