Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

2500+

Clients projects

1458

Happy customers

Flutter

How to Integrate Authentication using AWS Amplify in Flutter: Complete Guide

Last Updated on June 3, 2024

Introduction: Integrate Authentication using AWS Amplify in Flutter

Have you ever got the client requirement of integrating authentication using AWS Amplify in Flutter? Are you stuck and figuring out where to start? Or, are you just a curious flutter enthusiast who wants to learn how to authenticate your flutter application using AWS amplify? If yes, then we are here to help you! Here is aws amplify tutorial where we will provide a complete guide to authenticate the flutter application using AWS amplify. We will cover both technical and theoretical sections. So, without further ado, let’s get started!

What is AWS Amplify?

AWS Amplify authentication is a collection of tools, features, and libraries that helps to build and host web applications and mobile apps on AWS. Amplify supports various frameworks & platforms like JavaScript, Vue, Next.Js, and mobile platforms like IOS, Android, Flutter, React Native, Ionic. AWS amplifies the used bundle of User Interface Components & CLI (Command-line interface) to build app backend for web & mobile apps.

Cross-check the following prerequisites before developing and learning how to integrate authentication using AWS amplify in Flutter.

Pre-requisites

Installed NodeJS and Node Package Manager
Install the latest version of Flutter
Set Up your IDE
Installed Flutter Developer Preview of the Amplify CLI. If you don’t have it installed on your system, use the below command

npm install -g @aws-amplify/cli@flutter-preview

An AWS account.

Note: The existing version of @aws-amplify/cli won’t work; you might need to install the latest flutter-preview version.

Install Dependencies

Here are a few dependencies that you need to authenticate your flutter application using AWS amplify. Just follow the instructions and commands to get it installed.

Import Flutter Amplify packages into your project inside the pubspec.yaml file

amplify_core: '<1.0.0'   
amplify_auth_cognito: '<1.0.0'

Fetching the Amplify packages

flutter pub get

Verify the version of Amplify CLI

amplify –version

Note: The output of this command should have “-flutter-preview” appended to it. If not, run “npm install -g @aws-amplify/cli@flutter-preview” in the terminal.

So, after the installation and configuration, let’s move further in our tutorial: Integrate Authentication using AWS Amplify in Flutter.

Subside the project complexities!
Are you searching for Flutter developers with a great spectrum of knowledge? Struggles are real when you’re dealing with a complex project. We are here to help you with your hustles. Get in touch with us today to Hire Flutter Developer with fundamental and advanced knowledge.

Initialize and Configure Amplify

The next step is to connect to the AWS cloud, and for that, we need to initialize Amplify. Run the below command in your terminal.

amplify init

Your terminal will look as shown in the below image.

Now use the command to configure the user for Flutter AWS.

amplify configure

Authentication using aws amplify in Flutter

This command will help to create a new user or set an already created user for the project.

So far, we have successfully set up AWS Amplify in our project. Now let’s proceed further and get our hands-on coding part. In the below sections, we will set up Sign In and Sign Up for the users with the help of Flutter AWS Cognito.

Also Read:

Email and Password Authentication using Firebase Auth + Flutter

What is AWS Cognito?

Amazon Cognito is a simple and secure service that helps to add user authentication without much hustle to your mobile and web apps. AWS Cognito also supports social sign-in methods such as Facebook, Google, Amazon, and an enterprise identity provider SAML or Open ID Connect. This Amplify category has built-in support for the AWS Cognito.

AWS Cognito has smoothened the application experience without worrying about building, scaling, and securing.

AWS Cognito also enables us to sync data across the device so that users switch to a new or another device their experience remains consistent.

Prerequisites

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

Add Auth via Amplify CLI

Run the below command in the terminal to start using flutter amplify auth in the project.

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

Transform Your Cloud Game: Elevate with Expert AWS Consulting!
Unleash the power of innovation and efficiency – our team is ready to supercharge your AWS journey. Let’s sculpt your success in the cloud with AWS consulting services!

Now, it’s time to integrate Auth into our codebase finally. I hope the authentication using AWS amplify Flutter auth was understandable so far.

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);
 }

Now, the user will be confirmed. For that, a confirmation code will be sent to the email address of the user. You need to create a separate UI for the confirmation code as the user has to enter the code received in his/her email and will 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);
 }

Upon the successful completion of the signup flow, you can see Confirm sign-up Succeed message on the terminal.

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

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

Upon the successful completion of the sign-in flow, you can see the Sign in a Succeeded message on the terminal.

Conclusion

So, this was about how to implement authentication using AWS amplify in Flutter. I hope the blog has helped you the way you expected. For more such flutter tutorials, feel free to visit the Flutter tutorials page where you can clone the github repository and play around with the code. We always appreciate the feedback.

If you are already convinced and looking for assistance to integrate authentication using AWS Flutter, connect with us today. Being the renowned Flutter app development company, we can easy your way to play store and app store with the feature-loaded enterprise-grade mobile app without technical headaches.