# Implement an easy login system for your next Flutter app

## TLDR?

\*\* Watch our [YouTube video](https://www.youtube.com/watch?v=SiYZ8FBJUKI) 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](https://pub.dev/packages/at_onboarding_flutter). 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!**):

```plaintext
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:

```plaintext
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:

```plaintext
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](https://github.com/atsign-foundation/at_demos/tree/trunk), 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](pub.dev/at_onboarding_flutter) and explore on [atsign.dev](https://atsign.dev) and [atsign.com](https://atsign.com)!