Amplify project setup

Before you begin, make sure you have the following installed:

• Node.js v14.x or later
• npm v6.14.4 or later
• git v2.14.1 or later

• Install a stable version of Flutter.
  • For the stable release, use version 2.10.0 or higher
  • For the developer preview, use version 3.0.0 or higher
• Setup your IDE

Configure the Amplify CLI

To set up the Amplify CLI on your local machine, you have to configure it to connect to your AWS account.

Configure Amplify by running the following command:

1amplify configure

amplify configure will ask you to sign into the AWS Console.

Once you're signed in, Amplify CLI will ask you to use the AWS Identity and Access Management (IAM) to create an IAM user.

1Specify the AWS Region
2? region:  # Your preferred region
3Follow the instructions at
4https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
5
6to complete the user creation in the AWS console
7https://console.aws.amazon.com/iamv2/home#/users/create

Navigate to the IAM User creation page if it's not already open.

Enter a User name and select Next. You can name the user anything but we'll call it "amplify-dev".

Select Attach policies directly and select AdministratorAccess-Amplify as the Permissions policy. Select Next.

On the Review page, check that everything looks good and select Create user.

This will redirect to the users list page. Select the user you just created.

On the user details page, navigate to the Security credentials tab, scroll down to Access keys and select Create access keys.

On the next page, select Command Line Interface, acknowledge the warning, and select Next.

On the next page select Create access key. You'll then see a page with the access keys for the user. Use the copy icon to copy these values to your clipboard, then return to the Amplify CLI.

Enter the values you just copied into the corresponding CLI prompts.

1Enter the access key of the newly created user:
2? accessKeyId:  # YOUR_ACCESS_KEY_ID
3? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
4This would update/create the AWS Profile in your local machine
5? Profile Name:  # (default)
6
7Successfully set up the new user.

Manually configure the Amplify CLI

If you are using an IAM role or IAM Identity Center (previously AWS SSO), you can configure your local machine for use with Amplify CLI by creating AWS profile entries manually rather than the amplify configure wizard.

To create an AWS profile locally using IAM Identity Center, you can use the AWS CLI wizard, aws configure sso, or write to ~/.aws/config directly:

1[profile my-sso-profile]
2sso_session = my-sso
3sso_account_id = 123456789011
4sso_role_name = AdministratorAccess-Amplify
5region = us-west-2
6output = json
7
8[sso-session my-sso]
9sso_region = us-east-1
10sso_start_url = https://my-sso-portal.awsapps.com/start
11sso_registration_scopes = sso:account:access

Currently, the Amplify CLI requires a workaround for use with IAM Identity Center due to an issue in how it resolves credentials.

1[profile my-sso-profile]
2sso_session = my-sso
3sso_account_id = 123456789011
4sso_role_name = AdministratorAccess-Amplify
5region = us-west-2
6output = json
7+ credential_process = aws configure export-credentials --profile my-sso-profile
8
9[sso-session my-sso]
10sso_region = us-east-1
11sso_start_url = https://my-sso-portal.awsapps.com/start
12sso_registration_scopes = sso:account:access

Using the example above, when creating a new app or pulling an existing app, specify my-sso-profile as the AWS profile you'd like to use with the Amplify app.

To create an AWS profile locally using an IAM role, assign the AdministratorAccess-Amplify permissions set to the role and set the role in your ~/.aws/config file:

1[profile amplify-admin]
2role_arn = arn:aws:iam::123456789012:role/amplify-admin
3source_profile = amplify-user
4
5[profile amplify-user]
6region=us-east-1

Using the example above, when creating a new app or pulling an existing app, specify amplify-admin as the AWS profile you'd like to use with the Amplify app

Next, you'll set up the app and initialize Amplify!

Create your application

For this section you will set up a skeleton project so that Amplify categories can be added to it.

1. Create a new project

Create a new project using Flutter CLI:

1flutter create <your_app_name>

You now have an empty Flutter project into which you'll add Amplify in the next steps.

2. Install Amplify Libraries

Amplify for Flutter is distributed via pub.dev.

1. From your project root directory, find and modify pubspec.yaml and add required Amplify plugins to the project dependencies. E.g.

1environment:
2  sdk: ">=2.15.0 <3.0.0"
3
4dependencies:
5  flutter:
6    sdk: flutter
7
8  amplify_flutter: ^0.6.0
9  amplify_auth_cognito: ^0.6.0

2. Install the dependencies by running the following command. Depending on your development environment, you may perform this step via your IDE (or it may even be performed for you automatically).

   Copy code example

   1flutter pub get

3. Provision the backend with Amplify CLI

To start provisioning resources in the backend, change directories to your project directory and run amplify init:

1# Make sure you have Amplify CLI v4.28 and above for Flutter support
2amplify init

Amplify CLI then will suggest you an auto-generated options for you to speed up the process:

1Project information
2| Name: yourprojectname
3| Environment: dev
4| Default editor: Visual Studio Code
5| App type: flutter
6| Configuration file location: ./lib/
7
8? Initialize the project with the above configuration?

If any of the following does not work for you, you can say no to the question that is prompted.

After that, Amplify CLI will take you through the installation process. Enter the following when prompted:

1? Enter a name for the environment
2    `dev`
3? Choose your default editor:
4    `IntelliJ IDEA`
5? Choose the type of app that you're building:
6    'flutter'
7? Where do you want to store your configuration file?
8    ./lib/

After the project information is filled, you will be prompted to select the AWS profile for you to host your information.

1? Select the authentication method you want to use: (Use arrow keys)
2❯ AWS profile
3  AWS access keys
4
5# This is the profile you created with the `amplify configure` command in the introduction step.
6Please choose the profile you want to use (Use arrow keys)
7> default

Where possible, the CLI will infer the proper configuration based on the type of project Amplify is being initialized in. In this case, it knew you are using a Flutter app, source, distribution, build, and start options.

Upon successfully running amplify init, you will see a configuration file created in ./lib/ called amplifyconfiguration.dart.

This file will be bundled into your application so that the Amplify libraries know how to reach your provisioned backend resources at runtime.

4. Initialize Amplify in the application

Before using any methods in the Amplify Flutter Library, it's important to add all necessary plugins and to call configure once in your app. The steps below will guide you through configuring Amplify Flutter at the root level of your flutter app.

Add the necessary dart dependencies at the top of main.dart alongside to other imports:

1// Amplify Flutter Packages
2import 'package:amplify_flutter/amplify_flutter.dart';
3import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
4
5// Generated in previous step
6import 'amplifyconfiguration.dart';

Add the following code to your application's root Stateful Widget, for the default Flutter app this should be the class _MyHomePageState extends State<MyHomePage>.

1class _MyHomePageState extends State<MyHomePage> {
2
3  @override
4  initState() {
5    super.initState();
6    _configureAmplify();
7  }
8
9  Future<void> _configureAmplify() async {
10
11    // Add any Amplify plugins you want to use
12    final authPlugin = AmplifyAuthCognito();
13    await Amplify.addPlugin(authPlugin);
14
15    // You can use addPlugins if you are going to be adding multiple plugins
16    // await Amplify.addPlugins([authPlugin, analyticsPlugin]);
17
18    // Once Plugins are added, configure Amplify
19    // Note: Amplify can only be configured once.
20    try {
21      await Amplify.configure(amplifyconfig);
22    } on AmplifyAlreadyConfiguredException {
23      safePrint("Tried to reconfigure Amplify; this can occur when your app restarts on Android.");
24    }
25  }
26
27  // customize the rest of your Widget below as you wish...

Note that all calls to addPlugin() or addPlugins() are made before Amplify.configure() is called.

Next steps

Congratulations! You've created a skeleton app and are ready to start adding Amplify categories to your application. The following are some categories that you can start to build into your application:

• Analytics - for logging metrics and understanding your users
• API (GraphQL) - for adding a GraphQL endpoint to your app
• API (REST) - for adding a REST endpoint to your app
• Authentication - for managing your users
• DataStore - for making it easier to program for a distributed data store for offline and online scenarios
• Storage - store complex objects like pictures and videos to the cloud.

Further customization

Platform setup

iOS

From your project root, navigate to the ios/ directory and modify the Podfile using a text editor of your choice and update the target iOS platform to 11.0 or higher.

1platform :ios, '11.0'

Android

From your project root, navigate to the android/app/ directory and modify build.gradle using a text editor of your choice and update the target Android SDK version to 21 or higher:

1minSdkVersion 21

1buildscript {
2    ext.kotlin_version = '1.5.31'
3    ...
4}

Escape hatch

As an alternative to the Amplify client libraries, or in situations where the libraries do not provide the functionality you require, the underlying AWS services can be communicated with directly using an HTTP client and the AWS Signature V4 (SigV4) package.

Using the Signer

To get started using the signer, add it as a dependency in your pubspec.yaml like the following:

1dependencies:
2  aws_common: ^0.1.0
3  aws_signature_v4: ^0.1.0

After that create an instance of the signer in your project.

1import 'package:aws_signature_v4/aws_signature_v4.dart';
2
3const signer = AWSSigV4Signer();

AWS credentials are configured in the signer by overriding the credentialsProvider parameter of the constructor. By default, the signer pulls credentials from your environment via the AWSCredentialsProvider.environment() provider. On mobile and web, this means using the Dart environment which is configured by passing the dart-define flag to your flutter commands, like the following:

1$ flutter run --dart-define=AWS_ACCESS_KEY_ID=... --dart-define=AWS_SECRET_ACCESS_KEY=...

On Desktop, credentials are retrieved from the system's environment using Platform.environment.

Signing a Request

The signer works by transforming HTTP requests using your credentials to create signed HTTP requests which can be sent off in the same way as normal HTTP requests.

As an example, here's how you would sign a request to Cognito to gather information about a User Pool.

1import 'dart:convert';
2
3import 'package:aws_common/aws_common.dart';
4import 'package:aws_signature_v4/aws_signature_v4.dart';
5
6// Create the signer instance with credentials from the environment.
7const AWSSigV4Signer signer = AWSSigV4Signer(
8  credentialsProvider: AWSCredentialsProvider.environment(),
9);
10
11// Create the signing scope and HTTP request
12const region = '<YOUR-REGION>';
13
14Future<void> main() async {
15  final scope = AWSCredentialScope(
16    region: region,
17    service: AWSService.cognitoIdentityProvider,
18  );
19
20  final request = AWSHttpRequest(
21    method: AWSHttpMethod.post,
22    uri: Uri.https('cognito-idp.$region.amazonaws.com', '/'),
23    headers: const {
24      AWSHeaders.target: 'AWSCognitoIdentityProviderService.DescribeUserPool',
25      AWSHeaders.contentType: 'application/x-amz-json-1.1',
26    },
27    body: json.encode({
28      'UserPoolId': '<YOUR-USER-POOL-ID>',
29    }).codeUnits,
30  );
31
32  // Sign and send the HTTP request
33  final signedRequest = await signer.sign(
34    request,
35    credentialScope: scope,
36  );
37  final resp = await signedRequest.send();
38  final respBody = await resp.decodeBody();
39  print(respBody);
40}

For a full example, check out the example project in the GitHub repo. And for specifics on the different AWS operations you can perform, check out the AWS API Reference docs for the service. For example, here are the docs for the DescribeUserPool API used above.