flutter_amplify_auth_ui 0.1.4
flutter_amplify_auth_ui: ^0.1.4 copied to clipboard

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.

Demo

Features #

SignInPage #

  • Sign in via password and one of the following
    • username
    • email
    • phone number
  • Sign in as guest (if configured)
  • Sign in with social providers:
    • Facebook
    • Google
    • Amazon
  • Sign in with multi-factor authentication (SMS)

SignUpPage #

  • Sign up via password and one of the following (plus confirmation code):
    • username
    • email
    • phone number
  • Additional required attributes (if configured):
    • Address
      • Street address
      • Locality
      • Region
      • Postal code
      • Country
    • Email
    • Phone number
    • Nickname
    • Preferred username
    • Name
    • Given name
    • Middle name
    • Family name
    • Gender
    • Date of Birth
    • Picture
    • Profile
    • Website
    • Updated at

PasswordResetPage #

  • Reset password via confirmation code and one of the following
    • username
    • email
    • phone number

PasswordChangePage #

  • Change password by providing the old and a new password

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.4

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 #

Preview Preview

SignUpPage #

Preview Preview

Preview Preview

PasswordResetPage #

Preview Preview

PasswordChangePage #

Preview Preview

1
likes
120
pub points
44%
popularity

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

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

BSD-3-Clause (LICENSE)

Dependencies

amplify_auth_cognito, amplify_flutter, flutter, path

More

Packages that depend on flutter_amplify_auth_ui