Promise Amadi
Promise Amadi's Blog

Promise Amadi's Blog

A quick guide on how to authenticate users with the at_onboarding plugin

A quick guide on how to authenticate users with the at_onboarding plugin

Promise Amadi's photo
Promise Amadi

Published on Aug 18, 2021

4 min read

In this article, you are going to learn how to authenticate users with the at_onboarding Flutter plugin.

By the end of this article, you will learn the following:

  • How to set up an @ sign account.
  • How to verify your @ sign username.
  • How to authenticate users with the at_onboarding plugin.

A quick introduction to the at_onboarding plugin?

The at_onboarding is a plugin developed by the @ company to allow users to onboard any sign-in protocol app very quickly with their @ sign username.

An @ sign is a handle (i.e. @ alice) that functions as the users (individual) digital identity. It uses end-to-end encryption to ensure that your data is 100% owned and controlled by you.

About The @ Company

The @ Company (At Company) is a technology company that aims at creating a more human Internet where privacy is a fundamental right and everyone owns their own data.

The company uses a technology called the @ protocol to allow people to own their data and control what information they share with whom.

So let's get started

STEP 1: How to set up an @ sign account.

To create an @ sign account, go to atsign.com At the top right corner of the site, click on "Get an @ sign" to create your own @ sign username

image.png Choose a free @ sign and click on Add to Cart

image.png A pop will appear, click on CHECKOUT to complete the account setup

image.png The CHECKOUT process requires your email address, enter your email address and click on the submit button.

image.png A 4-character code will be sent to your email address, enter the 4-character code sent to your email address and click on the confirm button.

image.png Congratulations, you have secured an @ sign username.

image.png

Step 2: How to verify your @ sign username.

To verify your @ sign username, click on Activate button.

image.png A dialog will pop up, click on Save code, this will download your @ sign QR code.

image.png

Please note: Do not share your @ sign QR code with anyone.

Step 3: Implementing at_onboarding in our flutter app

Create your flutter app using Visual Studio, IntelliJ, or Android Studio.

Open the "pubspec.yaml" file, and install the following packages.

dependencies:
  at_onboarding_flutter: ^2.1.2
  get_storage:

Please note: The "at_onboarding_flutter" plugin will be used for user authentication while the "get_storage" plugin will be used to store the user's @ sign username.

Open your main.dart file, and modify your source code to look like this image below: image.png

Create a stateful widget and name it "MyApp", modify your source code to look like this image below:

image.png The next step will be to create a dart class and it will be called "AtService", modify your source code to look like this image below:

image.png

Please note: The "AtService" has two functions which are "getAtClientPreference" and "deleteAtSign"

The "getAtClientPreference" is called whenever the user wants to login into the app while the "deleteAtSign" logs the user out of the app and removes the user's @ sign username from the app.

Up next will be to create a stateless widget with the name "DashBoard", this screen will be called after successful authentication.

Modify your source code to look like this image below: image.png

Lastly, you need to provide an @ sign backup key, this requires downloading the @ wavi app on the Google play store or Apple store.

image.png

Please note: @ Wavi is a privacy-first mobile app developed by the @ Company.

The app helps you control what links, images, and text are visible and searchable online. Open your @ wavi app and follow the steps below to download your @ sign backup key.

image.png Test run your app on your smartphone or emulator.

image.png Congratulations!! you have successfully implemented the at_onboarding plugin in your flutter project.

P.S: Here is the source code for the project you just worked on. If you found this article helpful and educating, please hit the clap button and also share it with your friends.

To get my latest updates and happenings from the world of Flutter, and mobile development, follow me on Twitter, Facebook, Linkedin, and Github.

My name is Promise Amadi. I am a writer and Flutter Developer. I work with startups across the globe to build mobile solutions using Flutter.

 
Share this