flutter_amplify_auth_ui

Description:

flutter amplify auth ui

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 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: ^1.1.0
copied to clipboard
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
copied to clipboard
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/
copied to clipboard
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.");
}
}
}
copied to clipboard

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




SignUpPage #








PasswordResetPage #




PasswordChangePage #





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