Flutterexperts

Authorization and Authentication in your apps plays an important role and we’re very well aware of the fact in day-to-day acitivities. Motsly every app that we install needs you to authenticate yourself before you could use it and same goes for authorization. In Flutter we have been doing this using Firebase

What’s AWS Amplify ?

AWS Amplify is a set of tools and services that enables mobile and front-end web developers to build secure, scalable full stack applications, powered by AWS. With Amplify, it’s easy to create custom onboarding flows, develop voice-enabled experiences, build AI-powered real-time feeds, launch targeted campaigns, and more. No matter the use case, AWS Amplify helps you develop and release great apps your customers will love. AWS Amplify includes an open-source framework with use-case centric libraries and a powerful toolchain to create and add cloud-based features to your app, and a web hosting service to deploy static web applications.

Pre-requisites:

• Install the latest version of Flutter.
• Setup your IDE.
• Install the Flutter Developer Preview of the Amplify CLI using the command below:

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

Note: If you don’t have nodejs and npm already installed, please use install Npm and NodeJs beforehand. Also,an already existing install of @aws-amplify/cli wont work, you may need to install flutter-preview version.

• You need to sign up for an AWS account if you don’t already have it.

Integrate Amplify into your app:

Now, here for this demo, I’m going to use the Auth flow of the app using AWS which generally I use to do using Firebase before so I’m assuming that you have the demo UI for the Sign-Up and Sign-In flow ready as I won’t be going to the UI part here.

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

amplify_core:  latest version 
amplify_auth_cognito: latest version

• Fetch the Amplify packages entered above using the below command:

flutter pub get

• To make sure you have installed the proper amplify cli version run the below command:

amplify --version

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

• Now that you have the correct version of amplify installed, it’s time to connect to the AWS cloud and for that, we need to initialize the amplify, use the following command to initialize the Amplify:

amplify init

• The next step is to configure the user for AWS. This will help create a new user or set an already created user for this project. Use the following command to configure AWS:

amplify configure

What is AWS Cognito?

Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. Amazon Cognito scales to millions of users and supports sign-in with social identity providers, such as Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0.

This will help set up social sign-in, user authentication which we are going to integrate into our demo. The AWS amplify category has a default, built-in support for the AWS Cognito.

Prerequisites:

• A Flutter application with Flutter SDK ≥1.20 and Amplify libraries integrated as mentioned above.

Configurations:

To start using the auth resources into your project run the following command into the terminal

amplify add auth

• You’ll be prompted with few questions to configure the auth preferences just go with 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.`

• After the auth configuration has been set you need to push all these changes made till now to the cloud and for that, you can use the below command,

amplify push 

Auth using Amplify:

Now that the basic setup has been done and if everything did go well then you can proceed ahead with the Auth flow integration into your UI for registration and sign-in .

For SignUp:

Just like you use to handle Firbase Auth flow in the signup screen, just need to implement AWS api calls.

try {
  Map<String, dynamic> 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 by the user. You need to create a separate UI for the confirmation code as the user have to enter the code received in his/her email and will passed to the confirmSignUp call.

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

Upon the successful completion of signup flow you can see Confirm signUp Succeded message on the terminal.

For SignIn:

In the SignIn UI, imlement the AWS signIn api calls.

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 signin flow you can see Sign in Succeded message on the terminal.

---

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.