flutter_amplify_auth_ui 0.1.6 icon indicating copy to clipboard operation
flutter_amplify_auth_ui: ^0.1.6 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

Prerequisites #

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

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

Run flutter pub get to install the plugin.

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


Support #

If you like this project, please support by starring the Github repository.

2
likes
130
pub points
48%
popularity

Publisher

unverified uploader

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

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

amplify_auth_cognito, amplify_flutter, flutter, path

More

Packages that depend on flutter_amplify_auth_ui