Authenticator

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

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:

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.

  environment:
    sdk: ^3.3.0
    flutter: '>=3.19.0'

  dependencies:
    amplify_flutter: ^2.0.0
    amplify_auth_cognito: ^2.0.0
    amplify_authenticator: ^2.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});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _configureAmplify();
  }

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

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

Next steps