Integrate Authentication using AWS Amplify in Flutter

Introduction

The Amplify Auth category provides a user authentication interface. It grants essential authorization to the other Amplify types behind the scenes. It has built-in support for Amazon Cognito User Pool and Identity Pool by default. The Amplify CLI assists you in creating and configuring an authentication provider for the auth category. Here is an AWS amplify tutorial that will walk you through the process of authenticating the flutter application using AWS amplify. We’ll go through both technical and theoretical topics. Let us begin!

What is AWS Amplify?

AWS Amplify authentication is a set of tools, features, and libraries that aid in the development and hosting of both online and mobile applications on AWS. Amplify supports a wide range of frameworks and platforms, including JavaScript, Vue, Next.Js, and mobile platforms such as iOS, Android, Flutter, React Native, and Ionic. AWS extends the commonly used bundle of User Interface Components and CLI (Command-line Interface) to construct app backends for web and mobile apps.

Pre-requisites

• You need to Install NodeJS and Node Package Manager
• Installation of the latest version of Flutter
• Setting Up IDE
• Flutter Developer Preview of the Amplify CLI should be installed. Use the below command if you have not installed it on your system.
  npm install -g @aws-amplify/cli@flutter-preview

• Need to have an AWS account.

Dependencies Installation

Here are the dependencies you’ll need to use AWS amplify to authenticate your flutter application. Follow the instructions and commands to install it.

Inside the pubspec.yaml file, import Flutter Amplify packages into your project.

amplify_core: ‘<1.0.0’  

amplify_auth_cognito: ‘<1.0.0’

Fetching the Amplify packages

flutter pub get

Verification of the version of Amplify CLI

amplify –version

So, following the installation and setting, let’s continue with the tutorial: Integrate Authentication in Flutter Using AWS Amplify.

Initialize and Configure Amplify

The next step is to connect to the AWS cloud, which requires us to initialize Amplify. In your terminal, type the following command.

amplify init

Your terminal will appear like the image below.

To configure the user for Flutter AWS use the command.

amplify configure

This command will assist you in creating a new user or setting up an existing user for the project.

So far, we’ve successfully integrated AWS Amplify into our project. Now let’s move on to the hands-on coding portion. In the next sections, we will set up Sign In and Sign Up for users using Flutter AWS Cognito.

What is AWS Cognito?

Amazon Cognito is a simple and secure solution that allows you to easily add user authentication to your mobile and online apps. AWS Cognito also supports social sign-in mechanisms like Facebook, Google, and Amazon, as well as enterprise identity providers like SAML or Open ID Connect. This Amplify category includes AWS Cognito support.

AWS Cognito has improved the application experience by removing the need to worry about creating, scaling, and securing.

AWS Cognito also allows us to sync data across devices, ensuring that when customers move to a new or different device, their experience stays constant.

Prerequisites

• A Flutter application with Flutter SDK ≥1.20
• Amplify libraries installed as mentioned in the above section.

Add Auth via Amplify CLI

To start using flutter amplify auth in the project run the below command in the terminal.

amplify add auth

You’ll be prompted with a few questions to configure the auth preferences; just select the defaults,

? Do you want to use the default authentication and security configuration? `Default  configuration` ? How do you want users to be able to sign in?
`Username`
? Do you want to configure advanced settings?
`No, I am done`

We need to push all the changes we have made after the auth configuration has been set. For pushing these changes, run the below command.

amplify push

Integrate Auth to Sign Up and Sign In

It’s finally time to include Auth into our codebase. So far, I think the authentication utilizing AWS amplify Flutter auth has been clear.

Sign Up

Implement AWS API calls like we used to do in Firebase Auth.

try {
Map userAttributes = {
“email”: emailController.text,
“phone_number”: phoneController.text,
// additional attributes as needed
};
SignUpResult res = await Amplify.Auth.signUp(
username: “myusername”,
password: “mysupersecurepassword”,
options: CognitoSignUpOptions(
userAttributes: userAttributes
));
} on AuthError
catch (e) {
print(e);
}

The user will now be verified. A confirmation number will be provided to the user’s email address for this purpose. You must design a separate user interface for the confirmation code because the user must enter the code received in his/her email and pass it to the confirm Sign-up call.

try {
SignUpResult res = await Amplify.Auth.confirmSignUp(
username: “myusername”,
confirmationCode: “123456”
);
} on AuthError catch (e) {
print(e);
}

When the registration sequence is completed successfully, the terminal displays the Confirm sign-up Succeed message.

Sign In

Part implements this API call in the Sign-In UI.

try {
SignInResult res = await Amplify.Auth.signIn(
username: usernameController.text.trim(),
password: passwordController.text.trim(),
);
} on AuthError catch (e) {
print(e);
}

When the sign-in flow is completed successfully, the terminal displays the Sign in a Succeeded message.

Conclusion

The upgrade to Amplify’s Authentication and Authenticator libraries will allow developers to extend their authentication flow support to the Web and Desktop. As a result, you may have a completely effective authentication procedure with no effort, and all of the Authenticator components are configurable. You may also tie the authentication flow to your UI components if you don’t want to utilize the Authenticator module.

So that was how to establish authentication in Flutter with AWS amplification. I hope the blog has been useful to you in the way you intended. For further flutter lessons, go to the Flutter tutorials website, where you may clone the GitHub source and experiment with the code. We are always grateful.