feat(auth): enables custom auth flows (#1444)

* feat(auth): enables custom auth flows

Author: haverchuck

packages/amplify/amplify_flutter/lib/src/categories/amplify_auth_category.dart

@@ -94,7 +94,7 @@ class AuthCategory {
 
   Future<SignInResult> signIn({
     required String username,
-    required String password,
+    String? password,
     SignInOptions? options,
   }) {
     var request =

packages/amplify_authenticator/example/lib/customization/authenticator_with_custom_auth_flow.dart

@@ -0,0 +1,225 @@
+/*
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import 'package:amplify_authenticator/amplify_authenticator.dart';
+import 'package:flutter/material.dart';
+
+import '../main.dart';
+
+// A custom authenticator widget which enables the Custom Auth Flow for Amazon Cognito
+// More information can be found (here)[https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-challenge.html]
+//
+// This authenticator provides custom views for Sign In and Confirm Sign In,
+// but falls back on the standard views for all other states
+//
+// The custom confirmSignIn form assumes that the CreateAuthChallenge Lambda returns two values
+// as part of the publicChallengeParameters object in the event.response:
+//
+//      event.response.publicChallengeParameters = {};
+//      event.response.publicChallengeParameters.fieldTitle = 'Enter the secret code.'
+//      event.response.publicChallengeParameters.fieldHint =  'Check your email for the code we sent you.'
+//
+// [fieldTitle] is displayed in the input field's title.
+// [fieldHint] is displayed in the input field's hint.
+
+class AuthenticatorWithCustomAuthFlow extends StatelessWidget {
+  const AuthenticatorWithCustomAuthFlow({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Authenticator(
+      // If a builder method is provided the authenticator will
+      // use this to build the authenticator based on the current state.
+      //
+      // state is the current state of the authenticator. It contains the
+      // current auth step (sign in, sign out, etc.), the form data, and
+      // methods for updating this state.
+      //
+      // child is widget that would be displayed without the use of a custom
+      // builder. If currentStep is AuthenticatorStep.authenticated, this will
+      // be the material app. Otherwise this will be a prebuilt widget from
+      // amplify_authenticator to handle the current AuthenticatorStep
+      authenticatorBuilder: (context, state) {
+        switch (state.currentStep) {
+          case AuthenticatorStep.signIn:
+            return CustomSignInView(state: state);
+          case AuthenticatorStep.confirmSignInCustomAuth:
+            return CustomConfirmSignInView(state: state);
+          default:
+            // returning null will default to the prebuilt authenticator for
+            // all steps other than signIn and signUp
+            return null;
+        }
+      },
+      child: MaterialApp(
+        theme: ThemeData.from(
+          colorScheme: ColorScheme.fromSwatch(
+            primarySwatch: Colors.deepPurple,
+            backgroundColor: Colors.white,
+            brightness: Brightness.light,
+          ),
+        ),
+        darkTheme: ThemeData.from(
+          colorScheme: ColorScheme.fromSwatch(
+            primarySwatch: Colors.deepPurple,
+            backgroundColor: Colors.black,
+            brightness: Brightness.dark,
+          ),
+        ),
+        themeMode: ThemeMode.system,
+        debugShowCheckedModeBanner: false,
+        builder: Authenticator.builder(),
+        initialRoute: '/routeA',
+        routes: {
+          '/routeA': (BuildContext context) => const RouteA(),
+          '/routeB': (BuildContext context) => const RouteB(),
+        },
+      ),
+    );
+  }
+}
+
+class CustomConfirmSignInView extends StatelessWidget {
+  const CustomConfirmSignInView({
+    Key? key,
+    required this.state,
+  }) : super(key: key);
+
+  final AuthenticatorState state;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: SingleChildScrollView(
+        child: AuthenticatorForm(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Column(
+              children: [
+                // app logo (flutter logo used for example)
+                const Center(child: FlutterLogo(size: 100)),
+
+                // custom challenge field
+                // Field Title and Field Hint can be set within the Lambda Code.
+                ConfirmSignInFormField.customChallenge(
+                    title: state.publicChallengeParams['fieldTitle'],
+                    hintText: state.publicChallengeParams['fieldHint']),
+
+                // prebuilt sign up button from amplify_authenticator package
+                const ConfirmSignInCustomButton(),
+                const SizedBox(height: 16),
+                const Divider(),
+
+                // custom button to take the user to sign in
+                NavigateToSignInButton(state: state),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class CustomSignInView extends StatelessWidget {
+  const CustomSignInView({
+    Key? key,
+    required this.state,
+  }) : super(key: key);
+
+  final AuthenticatorState state;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: SingleChildScrollView(
+        child: AuthenticatorForm(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Column(
+              children: [
+                // app logo (flutter logo used for example)
+                const Center(child: FlutterLogo(size: 100)),
+
+                // custom challenge field
+                SignInFormField.username(),
+
+                // custom challenge field
+                // SignInFormField.password(),
+
+                // prebuilt sign up button from amplify_authenticator package
+                const SignInButton(),
+
+                const SizedBox(height: 16),
+                const Divider(),
+
+                // custom button to take the user to sign in
+                NavigateToSignUpButton(state: state),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class NavigateToSignInButton extends StatelessWidget {
+  const NavigateToSignInButton({
+    Key? key,
+    required this.state,
+  }) : super(key: key);
+
+  final AuthenticatorState state;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        TextButton(
+          // abort sign in is called to make sure that the current auth flow is cancelled.
+          onPressed: state.abortSignIn,
+          child: const Text('Cancel Sign In'),
+        ),
+      ],
+    );
+  }
+}
+
+class NavigateToSignUpButton extends StatelessWidget {
+  const NavigateToSignUpButton({
+    Key? key,
+    required this.state,
+  }) : super(key: key);
+
+  final AuthenticatorState state;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        const Text('Don\'t have an account?'),
+        TextButton(
+          onPressed: () => state.changeStep(
+            AuthenticatorStep.signUp,
+          ),
+          child: const Text('Sign Up'),
+        ),
+      ],
+    );
+  }
+}

packages/amplify_authenticator/example/lib/customization/authenticator_with_custom_layout.dart

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
 import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
 import 'package:amplify_authenticator/amplify_authenticator.dart';
 import 'package:flutter/material.dart';

packages/amplify_authenticator/example/lib/customization/authenticator_with_onboarding.dart

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
 import 'package:amplify_authenticator/amplify_authenticator.dart';
 import 'package:amplify_authenticator_example/main.dart';
 import 'package:flutter/material.dart';

packages/amplify_authenticator/example/lib/l10n/amplify_en.arb

@@ -86,5 +86,9 @@
     "selectDialCode": "Select country",
     "@selectDialCode": {
         "description": "Label of the dial code selector modal"
+    },
+    "confirmSignInCustomAuth": "Custom Login Challenge",
+    "@confirmSignInCustomAuth": {
+        "description": "Label of the custom auth confirm sign in form"
     }
 }

packages/amplify_authenticator/example/lib/l10n/amplify_es.arb

@@ -16,5 +16,6 @@
     "backTo": "Regresar al {previousStep, select, signUp{registro}, signIn{inicio de sesión}, confirmSignUp{Confirmar registro}, confirmSignInMfa{Confirmar inicio de sesión} confirmSignInNewPassword{Confirmar inicio de sesión} sendCode{Enviar código} resetPassword{Restablecer contraseña} verifyUser{Verificar usuario} confirmVerifyUser{Confirmar verificación de usuario}}",
     "signInWith": "Iniciar Sesión con {provider, select, google{Google} facebook{Facebook} amazon{Amazon} apple{Apple}}",
     "us": "Estados Unidos",
-    "selectDialCode": "seleccionar país"
+    "selectDialCode": "seleccionar país",
+    "confirmSignInCustomAuth": "Título de formulario personalizado"
 }

packages/amplify_authenticator/example/lib/main.dart

@@ -1,7 +1,12 @@
 import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
 import 'package:amplify_authenticator/amplify_authenticator.dart';
+import 'package:amplify_authenticator_example/customization/authenticator_with_custom_auth_flow.dart';
+import 'package:amplify_authenticator_example/customization/authenticator_with_custom_layout.dart';
+import 'package:amplify_authenticator_example/customization/authenticator_with_onboarding.dart';
 import 'package:amplify_authenticator_example/resolvers/localized_button_resolver.dart';
 import 'package:amplify_authenticator_example/resolvers/localized_country_resolver.dart';
+import 'package:amplify_authenticator_example/resolvers/localized_input_resolver.dart';
+import 'package:amplify_authenticator_example/resolvers/localized_title_resolver.dart';
 import 'package:amplify_flutter/amplify_flutter.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -69,6 +74,8 @@ class _MyAppState extends State<MyApp> {
     const stringResolver = AuthStringResolver(
       buttons: LocalizedButtonResolver(),
       countries: LocalizedCountryResolver(),
+      titles: LocalizedTitleResolver(),
+      inputs: LocalizedInputResolver(),
     );
 
     // We wrap our MaterialApp in an Authenticator component. This component
@@ -190,6 +197,12 @@ class _MyAppState extends State<MyApp> {
   // Widget build(BuildContext context) {
   //   return const AuthenticatorWithOnboarding();
   // }
+
+  // Below is yet another example of a custom authenticator, with a widget to support Cognito's Custom Auth flow
+  // @override
+  // Widget build(BuildContext context) {
+  //   return const AuthenticatorWithCustomAuthFlow();
+  // }
 }
 
 /// The screen which is shown once the user is logged in. We can use [SignOutButton]

packages/amplify_authenticator/example/lib/resolvers/localized_button_resolver.dart

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
 import 'package:amplify_authenticator/amplify_authenticator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';

packages/amplify_authenticator/example/lib/resolvers/localized_country_resolver.dart

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
 import 'package:amplify_authenticator/amplify_authenticator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';