Flutter3 と Amplify UI Components で MFA(SMS)が有効な認証つきアプリを作ってみました

			
			
% amplify --v
9.2.1

		

			
			
% flutter --version
Flutter 3.3.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision e3c29ec00c (8 days ago) • 2022-09-14 08:46:55 -0500
Engine • revision a4ff2c53d8
Tools • Dart 2.18.1 • DevTools 2.15.0

		

			
			
% flutter create sample_app
% cd sample_app
% flutter pub add amplify_flutter
% flutter pub add amplify_auth_cognito
% flutter pub add amplify_authenticator

		

			
			
% amplify init

		

			
			
% amplify add auth
 Do you want to use the default authentication and security configuration?
  Default configuration
  Default configuration with Social Provider (Federation)
❯ Manual configuration
  I want to learn more.

		

			
			
 Select the authentication/authorization services that you want to use:
  User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)
❯ User Sign-Up & Sign-In only (Best used with a cloud API only)
  I want to learn more.

		

			
			
Provide a friendly name for your resource that will be used to label this category in the project:
　sampleapp519f64ce519f64ce
Provide a name for your user pool: 
 sampleapp519f64ce_userpool_519f64ce

		

			
			
 How do you want users to be able to sign in? (Use arrow keys)
❯ Username
  Email
  Phone Number
  Email or Phone Number
  I want to learn more.

		

			
			
 Do you want to add User Pool Groups?
❯ No
 Do you want to add an admin queries API?
❯ No

		

			
			
 Multifactor authentication (MFA) user login options:
  OFF
❯ ON (Required for all logins, can not be enabled later)
  OPTIONAL (Individual users can use MFA)
  I want to learn more.

		

			
			
 For user login, select the MFA types: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ SMS Text Message
 ◯ Time-Based One-Time Password (TOTP)

		

			
			
 Specify an SMS authentication message: (Your authentication code is {####})

		

			
			
 Email based user registration/forgot password:
  Enabled (Requires per-user email entry at registration)
❯ Disabled (Uses SMS/TOTP as an alternative)

		

			
			
Please specify an SMS verification message: (Your verification code is {####})

		

			
			
 Do you want to override the default password policy for this User Pool? (y/N)

		

			
			
 What attributes are required for signing up?
 ◯ Zone Info (This attribute is not supported by Facebook, Google, Login With Amazon, Signinwithapple.)
 ◯ Address (This attribute is not supported by Facebook, Google, Login With Amazon, Signinwithapple.)
 ◯ Birthdate (This attribute is not supported by Login With Amazon, Signinwithapple.)
❯◯ Email
 ◯ Family Name (This attribute is not supported by Login With Amazon.)
 ◯ Middle Name (This attribute is not supported by Google, Login With Amazon, Signinwithapple.)
 ◯ Gender (This attribute is not supported by Login With Amazon, Signinwithapple.)

		

			
			
 Specify the app's refresh token expiration period (in days): 30
 Do you want to specify the user attributes this app can read and write? No

		

			
			
 Do you want to enable any of the following capabilities? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ Add Google reCaptcha Challenge
 ◯ Email Verification Link with Redirect
 ◯ Add User to Group
 ◯ Email Domain Filtering (denylist)
 ◯ Email Domain Filtering (allowlist)
 ◯ Custom Auth Challenge Flow (basic scaffolding - not for production)
 ◯ Override ID Token Claims

		

			
			
 Do you want to use an OAuth flow?
  Yes
❯ No
  I want to learn more.

		

			
			
? Do you want to configure Lambda Triggers for Cognito? (Y/n) N

		

			
			
% amplify push

		

			
			
⚠️ You have enabled SMS based auth workflow. Verify your SNS account mode in the SNS console: https://console.aws.amazon.com/sns/v3/home#/mobile/text-messaging
If your account is in "Sandbox" mode, you can only send SMS messages to verified recipient phone numbers.

		

			
			
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 'package:sample_app/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> {
  final _amplify = Amplify;

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

  Future<void> _configureAmplify() async {
    try {
      await _amplify.addPlugins([
        AmplifyAuthCognito(),
      ]);
      await _amplify.configure(amplifyconfig);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        debugShowCheckedModeBanner: true,
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        builder: Authenticator.builder(),
        home: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  final title = 'Sample';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      drawer: AppDrawer(
        title: title,
      ),
      body: const Center(
        child: Text(
          "Hello World.",
        ),
      ),
    );
  }
}

class AppDrawer extends StatelessWidget {
  const AppDrawer({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: SingleChildScrollView(
        child: Column(
          children: [
            AppBar(
              title: Text(title),
              automaticallyImplyLeading: false,
            ),
            ListTile(
              leading: const Icon(Icons.exit_to_app),
              title: const Text('Logout'),
              onTap: () {
                Amplify.Auth.signOut();
              },
            ),
          ],
        ),
      ),
    );
  }
}