In the upcoming time, I’m going to publish further articles about how to integrate Amplify’s functionalities into Flutter apps to introduce you to the great toolset it is offering us to simplify and speed up Flutter apps’ development to save time and money. I will also share with you the best practices I’m following to make the best out of Amplify.
Short introduction
Michal, 28, loving and using Flutter since its beta release in 2018. Currently, I’m working as a freelance full-stack mobile and web app developer.
On my way as a software developer, hacking code since 2014 I was able to collect many experiences I am trying to get the most of when working on my current projects, to follow best practices I’ve learned and avoid failures from the past.
I’m open to collaborations with companies simplifying and changing people’s lives with their ideas and happy to give you and me a better understanding of Flutter and Amplify.
Vamos.
Amplify CLI
If you haven’t configured Amplify CLI yet, it’s time. Install and configure it by following the official documentation.
Project initialisation
Enter your terminal and create a new Flutter project by executing flutter create ask_for_more_with_amplify.
Open the project in an editor of your choice and edit pubspec.yaml to add dependencies required by Amplify:
Change to the project’s root in the terminal by executing cd ask_for_more_with_amplify and install dependencies by running flutter pub get.
Now, initialise an Amplify project by running amplify init and confirm the default configuration.
Additionally depending on the platform(s) you’re using platform setup needs to be done. Follow the official documentation to apply the necessary changes.
Amplify’s functionalities like Authentication, API, Storage, Analytics, etc. are configurable by adding plugins. The plugins are using AWS resources which are managed for us by Amplify. As for configuring Authentication, Amplify is going to create a Cognito user pool and an identity pool in the AWS cloud for us. Amplify is using these resources under the hood.
As we want to use Authentication in our app we need to add the plugin auth.
To add the plugin simply execute amplify add auth in the app project’s root directory and apply the configuration that follows.
? Do you want to use the default authentication and security configuration?
`Default configuration`
? How do you want users to be able to sign in?
`Email`
? Do you want to configure advanced settings?
`No, I am done.`
Afterward, run amplify push to apply the changes related to the authentication to the cloud and trigger deployment of the Cognito user pool and the identity pool in AWS.
As the initial setup is done, add the code that follows to main.dart and run the app to verify if our app runs smoothly with Amplify.
If the app starts without issues we successfully configured our Amplify project. Well done!
Add authentication flow
There are two possibilities for how to implement authentication flow in your Flutter app with Amplify:
- wrap your MaterialApp widget with Amplify’s Authenticator widget and let the library do the job for you
- implement the authentication screens and logic by yourself and use the Authentication API provided by Amplify.Auth plugin so we use Amplify.Auth.signUp to register a user, Amplify.Auth.signIn for the login, etc.
In the scope of this article, we’re going to go with the first possibility as it’s less time-consuming and the Authenticator widget provides enough customisation options for most use cases.
To do so add the dependency amplify_authenticator in pubspec.yaml in the first step:
Now, the only thing we need to do in terms of adding a basic authentication flow is to wrap our MaterialApp widget with Authenticator and set its builder attribute to Authenticator.builder():
Get dependencies with flutter pub get and restart the app.
As you noticed the app is using a custom dark theme added on project initialisation. Amplify’s Authenticator widget is “inheriting” it so the look and feel applied in the MaterialApp is being used in the ready-to-use authentication screens provided by Amplify automatically.
What’s your name?
To provide a more personalised user experience we want to include the user’s first name in several places in our app. In order to do so we ask users for their first name on registration.
Update backend
Firstly we’re going to update our backend by using the Amplify CLI. To do so execute amplify update auth in the project’s root directory and apply prompt answers that follow.
Please note that certain attributes may not be overwritten if you choose to use defaults settings.
You have configured resources that might depend on this Cognito resource. Updating this Cognito resource could have unintended side effects.
Using service: Cognito, provided by: awscloudformation
What do you want to do? Walkthrough all the auth configurations
Select the authentication/authorization services that you want to use: User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)
Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) No
Do you want to enable 3rd party authentication providers in your identity pool? Yes
Select the third party identity providers you want to configure for your identity pool:
Do you want to add User Pool Groups? No
Do you want to add an admin queries API? No
Multifactor authentication (MFA) user login options: OFF
Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
Specify an email verification subject: Your verification code
Specify an email verification message: Your verification code is {####}
Do you want to override the default password policy for this User Pool? No
Specify the app’s refresh token expiration period (in days): 30
Do you want to specify the user attributes this app can read and write? Yes
Specify read attributes: Email, Given Name, Email Verified?
Specify write attributes: Given Name
Do you want to enable any of the following capabilities?
Do you want to use an OAuth flow? No
? Do you want to configure Lambda Triggers for Cognito? No
Notice the selected options in the steps related to read and write attributes. We’re telling with these Amplify that our app should be able to read and write the attribute “Given Name” that we are going to use for users’ first name as well that it should be able to read email addresses and check if they’re verified to prevent email verification on every login.
In order to apply the updated backend configuration to the cloud and trigger provisioning of AWS resources execute amplify push.
Update frontend
As our backend is ready to read and write users’ first names the last thing we need to adapt is our Flutter app code. For modifying fields our Authenticator widget builds in the SignUpForm, it’s offering us a custom constructor where we’re able to specify the fields.
Let’s add the field list for user data including the first name (given name) we’re awaiting on registration:
Notice that we’re setting required to true. If you wish you are able to add custom field validation by using the attribute validator.
You can find a more complex example of sign-up fields customisation as well as using custom Cognito user attributes here.
Before verifying our changes we need to implement the missing class CustomInputResolver set in AuthStringResolver used for the stringResolver attribute that is going to change the label “Given name” to “First name”:
The overwritten method title is executed for all input fields in the sign-in and the sign-up screens as well as for all other forms included in the authentication screens the Authenticator widget implements for us. Since we want to change the label of the field “Given name” only we return a value just for InputField.givenName and use super.title for all other fields so their labels don’t get overwritten.
You’re able to overwrite labels of all other strings used in the authentication screens by using the attributes buttons, dialCodes, messages, titles, and instructions in AuthStringResolver and writing custom resolver classes for them.
In case you’re planning to add internationalisation to your app you’re able to do so in the same way by using translations accessible by your context in the overwritten methods:
Here’s how my main.dart is finally looking like:
Conclusion
Amplify Authentication and the Authenticator widget save us a lot of time and enable us being able to focus on more important things when building an app with Flutter like implementing business logic and further features instead of implementing the authentication flow for the 99th time.
However, as working for a customer, you shouldn’t forget about the effort for implementing customisation like integrating internalisation into the screens or slightly changing the authentication flow because of a requirement of the customer you’re working for and include the time you need for it when estimating how long the project implementation is going to take.
Amplify Authenticator offers many possibilities for customisation. In most projects with tight deadlines, it may be the way to go to use mostly the default authentication flow offered by Amplify first and suggest the customer apply all more complex customisations in a second step.
Do widzenia
Hopefully, I could give you a good first overview of Amplify and implementing authentication flow with it.
Follow me ❤️ and stay tuned for the next article about how to read user attributes on a successful sign-in and distribute them across the app by using state management and more articles about Flutter and Amplify.
I would be very happy to connect with you on LinkedIn as well :)
