Authentication for Flutter with AWS Amplify

Power up your Flutter App with AWS

In this article, I will explain how to implement sign-in and signup using AWS Cognito and for flutter apps. To simplify the development, I will also use the AWS Amplify library.

As you already know, flutter is a cross-platform mobile development framework for both Android and iOS. Amplify is a set of AWS services gathered to build scalable full-stack applications. On the other hand, as Google has firebase, AWS has Amplify.

We will create a simple sign-in and sign-up in a demo application.
👶 Initial Project GitHub
😎 Finished Project GitHub

To create the app, you will need the following tools, 🔧

• Flutter version 1.20.0
• The latest version of Amplify CLI. You can install the latest Amplify CLI using the following command.

npm install -g @aws-amplify/cli@3.3.12

What we are going to do

1. Create a Flutter Project

You can create a flutter project using the following command. In this case, I will use the project name amplify_login_app.

$ flutter create todo_amplify

Then, add amplify to the current project, navigate the project directory, and open a new terminal. Then run the following command.

$ amplify init

Select the default options and continue. After you initialize Amplify, your project structure will be something like this.

As you can see, there’s an auto-generated file called amplifyconfiguration. dart. This file is generated during the initializing process. Do not rename or modify this file; we will need this later.

Tip: Create high-quality technical content for your software blog with Enlear to attract more customers.

Home | Enlear

Enlear takes over the topic planning, creation, and editorial efforts by building a stable content pipeline for your business.

Adding Authentication

Adding authentication to our app is pretty storage forward. Let’s how it’s done. First, run the following command in your current working directory.

$ amplify add auth

Note that we will not be able to edit these settings later.

In our case, we select the sign-in method as Email. Depending on your requirement, you can choose either username, phone number, or email-based authentication.

Then we should run amplify push to deploy the changes to the cloud and to update amplifyconfiguration.dart.

Now let’s do some coding stuff. We have to add AWS Cognito dependency to our project. We can do that by adding the dependencies amplify_core and amplify_auth_cognito to pubspec.yaml.

• amplify_core is the core module for flutter amplify. You must always add this dependency if you use any amplify library.
• amplify_auth_cognito is used to add the amplify auth feature to your app.

Then you can download all the dependencies using flutter pub get.

If you are an android developer, you have to update the minSdkVersion version to 21. Because amplify_core requires the minimum API level to be 21, to do that, go to app-level build.gradle file.

Let’s integrate Amplify into our app.

As you can see in our main.dart file, MyApp is the root widget in our app. I am going to remove all the widgets and change them as follows.

To initialize amplify, we should run the following method inside initState method.

First, we create an instance of the AmplifyAuthCognito, and then we add it amplify instance. Remember the auto-generated file during the amplify init? In the final step, we add our amplifyconfig value to _amplifyInstance. If this process is completed, we set _amplifyConfigured to true. If some error occurs, we will set it to false.

Now let’s run the app to see everything is working fine.

⚠ Note: If you do a hot restart, you will get the following exception.

PlatformException(AmplifyException, User-Agent was already configured successfully., {cause: null, recoverySuggestion: User-Agent is configured internally during Amplify configuration. This method should not be called externally.}, null)

It’s because we have already configured Amplify, and the library does not detect the hot restart. In future releases, they will fix this bug.

It’s time to create the login and sign-up screens. I am going to create the screens inside the screen folder as follows.

• The file email_validator.dart contains a function that validates the string is an email or not.

Let’s implement the signup_screen.dart first as follows.

As you can see, when the user presses the sign-up button, _createAccountOnPressed will be executed. Let’s implement the method as follows.

1. First, we get the email and password from the controllers.
2. Since we are using email and password-based authentication, we must create a map called userAttributes to store the email. This map can be used to store user-related data such as phone numbers, birthdays, etc., along with the user’s credentials.
3. Then we execute the method Amplify.Auth.signUp to sign up the user to the AWS Cognito user pool. We use email as the username. But don’t forget to add userAttributes to this method.
4. If some error occurred, for now, we show it using a SnackBar.
5. If the user successfully signs up, AWS will send an email confirmation code to the given email. So we should redirect the user to a new screen called email_confimation_screen.

Let’s implement email_confimation_screen.dart

A confirmation code is 6 digit code. So after validating the code, we can send the code to Amplify as follows.

We can confirm the email using Amplify.Auth.confirmSignUp. If the user email confirmation process is successfully complemented, we can redirect the user to the main screen.

Now let’s implement login_screen.dart

When the user press the login button _loginButtonOnPressed will be executed.

After that, we can perform a login request using Amplify.Auth.signIn method.

Full Video

Learn More

Complete Guide to Amplify and Next.js

Complete Guide to AWS Amplify and React Native

React Native vs Flutter