Implement an easy login system for your next Flutter app

Implement an easy login system for your next Flutter app

TLDR?

** Watch our YouTube video that covers this article! **

How to implement at_onboarding_flutter:

Are you tired of setting up FireBase tables, handling usernames and passwords, and writing line after line of code setting up authentication methods and features?

Atsign has designed a platform (titled the atPlatform) which houses many packages that make the life of a developer easier! Let’s take a deep dive into one of these that greatly assists in authentication!

What you’re looking for is called at_onboarding_flutter! You can find it here, on pub.dev. You can quickly add it to your dependencies within your pubspec.yaml file like this (note: be sure that you check pub.dev for the most recent version!):

dependencies:
  at_onboarding_flutter: ^2.1.2

After successfully running the ‘pub get’ command which is when Flutter saves the concrete package version in your project, you can import its package within one of your files. This should look something like this:

import 'package:at_onboarding_flutter/at_onboarding_flutter.dart';

Congrats! After doing this, you’re already halfway to have an atSign authenticate into your application! You’ll need to pass in a few parameters such as; your build context, the current atClientPreference (covered in another article), your application’s domain (there are currently two that exist, one for production level which is ‘root.atsign.org’ and one for testing purposes - ‘vip.ve.atsign.zone’). You can also pass the color of your app as there is included U.I. with at_onboarding_flutter! You can then onboard by passing in the current atClientpreference and atSign you wish to authenticate to the current client instance. You can declare your own personalised successful or error log message, and be sure to state which screen the atSign will be navigated to upon successfully onboarding. Below, you will find what this may look like in code:

Onboarding(
context: context,
atClientPreference: atClientPreference,
domain: 'root.atsign.org' or 'vip.ve.aatsign.zone',
appColor: Color.fromARGB(255, 240, 94, 62),
appAPIKey: 'your-api-key-here',
onboard: (value, atsign) {
ClientSdkService.getInstance().atsign = atsign;
ClientSdkService.getInstance().atClientServiceMap = value;
ClientSdkService.getInstance().atClientServiceInstance = value[atsign];
_logger.finer('Successfully onboarded $atsign');
},
onError: (error) {
_logger.severe('Onboarding throws $error error');
},
nextScreen: HomeScreen(),
);

Just a few notes for the above code. I am calling some functions that exist in a file called ClientSdkService.dart. This file contains many useful functions that are pre-coded by the atPlatform core developers. To include this file in your own project (you’ll be able to explore than many other useful functions!), feel free to navigate to the atFoundation at_demos repository, which is open-source, on Github! The ClientSdkService file can be found in any of these demo applications under the same file path (or roughly the same) -> /complete_version/lib/service/.

Making reference to the demo applications, be sure to check out how the demo apps utilize at_onboarding_flutter!

If you wish to learn more about at_onboarding_flutter or maybe the atPlatform in its entirety, check it out on pub.dev and explore on atsign.dev and atsign.com!