flutter_amplify_auth_ui 0.1.0

Flutter plugin that automatically generates authentication widget templates based on your Amplify CLI Authentication configuration.

Flutter Amplify Auth UI

Flutter plugin that automatically generates authentication widget templates based on your Amplify CLI Authentication configuration.

Features

SignInPage

• Sign in via password and
  • username or
  • email
• Sign in as guest (if configured)
• Sign in with social providers:
  • Facebook
  • Google
  • Amazon

SignUpPage

• Sign up via username, password and email address (plus confirmation code)
• Additional required attributes (if configured):
  • Nickname
  • Date of Birth

PasswordResetPage

• Reset password via confirmation code and
  • username or
  • email

Install

To use this plugin, add flutter_amplify_auth_ui as a dev_dependency in your pubspec.yaml:

dev_dependencies:
  flutter_amplify_auth_ui: ^0.1.0

Run flutter pub get to install the plugin.

If you have not already done so, follow the official Amplify documentation in order to integrate Amplify with Authentication into your project.

Generate Authentication Widgets

Execute the following command in your project's root folder in order to generate authentication widgets based on your Amplify configuration:

flutter packages pub run flutter_amplify_auth_ui:main

Options:

• --amplifyDir=path/to/amplify/folder :

  Path to Amplify configuration (usually the amplify folder) in your project root (defaults to ./amplify/).

• --targetDir=path/to/target/folder :

  Generated Flutter widgets will be generated within the specified folder (defaults to ./lib/generated_auth_classes/).

Full example with options:

flutter packages pub run flutter_amplify_auth_ui:main --amplifyDir=./amplify/ --targetDir=./lib/generated_auth_classes/

Use Generated Widgets

Easily integrate the generated authentication widgets in your project, e.g.:

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

import 'generated_auth_classes/sign_in/sign_in_page.dart'; // <-- Import the generated widget

import 'amplifyconfiguration.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  initState() {
    super.initState();
    _configureAmplify();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Amplify Auth UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: SignInPage( // <-- Include the generated widget in your widget tree
        onSignIn: (context) {
          //TODO Define what to do after sign in
        },
      ),
    );
  }

  void _configureAmplify() async {
    if (!mounted) return;

    Amplify.addPlugins([
      AmplifyAuthCognito(),
    ]);

    try {
      await Amplify.configure(amplifyconfig);
    } on AmplifyAlreadyConfiguredException {
      print("Tried to reconfigure Amplify; this can occur when your app restarts on Android.");
    }
  }
}

Showroom

The following images display the outcome of a particular Amplify configuration.

SignInPage

SignUpPage

PasswordResetPage