Amplify UI


Authenticator component adds complete authentication flows to your application with minimal boilerplate.

The Authenticator component adds complete authentication flows to your application with minimal boilerplate.

The Authenticator demo below uses a mock backend. Any users you create are stored in memory. You can verify accounts that you create with the code "123456".

Quick start

Setup with Amplify Gen 2 backend

To get up and running with the Authenticator, follow the Amplify Gen2 quickstart guide.

Setup with Amplify Gen 1 backend

To setup Amplify using the Gen1 CLI, follow the steps below:

Step 1. Configure backend

The Authenticator works seamlessly with the Amplify CLI to automatically work with your backend.

First, update @aws-amplify/cli with npm or yarn if you're using a version before 6.4.0:

npm install -g @aws-amplify/cli@latest
yarn global add @aws-amplify/cli@latest

Then run amplify pull to sync your amplifyconfiguration.json with your cloud backend:

amplify pull

This will update your amplifyconfiguration.json with your latest backend configuration for the Authenticator.

Step 2. Install dependencies

Add amplify_authenticator, amplify_flutter, and amplify_auth_cognito packages as a dependencies.

    sdk: ">=2.18.0 <4.0.0"
    flutter: ">=3.3.0"

    amplify_flutter: ^1.0.0
    amplify_auth_cognito: ^1.0.0
    amplify_authenticator: ^1.0.0

Step 3. Add the Authenticator

The quickest way to get started is by wrapping your MaterialApp widget with the Authenticator widget. Once an end-user has created an account & signed in, the MaterialApp will be displayed.

Add the authenticator to your app by wrapping the MaterialApp widget in the Authenticator widget, and then set the MaterialApp's builder to Authenticator.builder().

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  State<MyApp> createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  void initState() {

  void _configureAmplify() async {
    try {
      await Amplify.addPlugin(AmplifyAuthCognito());
      await Amplify.configure(amplifyconfig);
      safePrint('Successfully configured');
    } on Exception catch (e) {
      safePrint('Error configuring Amplify: $e');

  Widget build(BuildContext context) {
return Authenticator(
child: MaterialApp(
builder: Authenticator.builder(),
home: const Scaffold( body: Center( child: Text('You are logged in!'), ), ), ), ); } }

Next steps

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.