Login components - Flutter

Password component

tip

Password mobile component collects your customers' passwords to access their financial data.

Once you have installed and initialized Weavr Flutter SDK, start with integrating password mobile component. You need to include the components in your app either adding programmatically or using Storyboard.

1. To initialise the Password Component,

   late SecureEditTextController _secureEditTextController;
   
   var secureEditText = SecurePasswordEditText(
     textColor: Colors.red,
     placeholderColor: Colors.grey,
     hintColor: Colors.blue,
     textSize: 14,
     font: "weavr_font", //pass the font name here
     onTextViewCreated: (SecureEditTextController controller) {
       _secureEditTextController = controller;
     },
   );

2. Embed the Password Component in the screen

   Container(
     height: 48,
     padding: const EdgeInsets.symmetric(horizontal: 8),
     child: secureEditText,
   ),

3. Create a token

   _secureEditTextController.createToken().then((String text) {
     tokenisedPassword = text;
   });

4. Set User Auth Token in SDK Here ypu setting the auth token shared by Weavr returned once via /multi/login_with_password

   final response = await WeavrComponents().setUserToken(authToken);
   print(response);

Passcode component

tip

Password mobile component collects customers' passcodes to access their financial data.

Once you have installed and initialized Weavr React Native SDK, start with integrating passcode mobile components. This can be achieved either by importing the components directly using the code below:

1. Initialise the Passcode Component

   late SecureEditTextController _secureEditTextController;
   
   var secureEditText = SecurePasscodeEditText(
     textColor: Colors.red,
     placeholderColor: Colors.grey,
     hintColor: Colors.blue,
     textSize: 14,
     font: "weavr_font", //pass the font name here
   
     onTextViewCreated: (SecureEditTextController controller) {
       _secureEditTextController = controller;
     },
   );

2. Embed the Passcode Component on screen

   ....
   Container(
     height: 48,
     padding: const EdgeInsets.symmetric(horizontal: 8),
     child: secureEditText,
   ),....

3. Create a token

   _secureEditTextController.createToken().then((String text) {
     tokenisedPasscode = text;
   });

4. Set User Auth Token in SDK

   final response = await WeavrComponents().setUserToken(authToken);
   print(response);