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

How to Integrate Authentication using AWS Amplify in Flutter: Complete Guide www.bacancytechnology.com

01

Introduction: Integrate Authentication using AWS Amplify in Flutter

02 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 a 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!

03

What is AWS Amplify?

04 AWS Amplify 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.

05

Pre-requisites

06 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@flutterpreview

An AWS account.

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

07

Install Dependencies

08 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.

09 Import Amplify packages into your project inside the pubspec.yaml file amplify_core: '<1.0.0' amplify_auth_cognito: '<1.0.0'

10 Fetching the Amplify packages flutter pub get

11 Verify the version of Amplify CLI amplify –version

12 Note: The output of this command should have “-flutter-preview” appended to it. If not, run “npm install -g @awsamplify/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.

13

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.

14

Initialize and Configure Amplify

15 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

16 Your terminal will look as shown in the below image.

17 Now use the command to configure the user for AWS. amplify configure

18

19

20 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 AWS Cognito.

21

What is AWS Cognito?

22 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.

23 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.

≥

24

Add Auth via Amplify CLI

25 Run the below command in the terminal to start using 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`

26 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

27

Integrate Auth to Sign Up and Sign In

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

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

30 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.

31 Sign In 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 signin flow, you can see the Sign in a Succeeded message on the terminal.

32

Conclusion

33

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 feedbacks, so contact us in case you have any questions or suggestions.

Thank You

www.bacancytechnology.com