Introducción

Este artículo es el primero de muchos en los que estaré explorando distintas tecnologías de AWS aplicadas al desarrollo móvil. Desde que comencé a colaborar como AWS Community Builder, siento la obligación de compartir conocimiento sobre herramientas y servicios clave, no solo para quienes ya tienen experiencia en AWS, sino también para quienes están dando sus primeros pasos en la plataforma. Mi objetivo es hacer que la integración de AWS en Flutter sea lo más accesible posible, desmitificando configuraciones y procesos que pueden parecer complicados al principio.

Antes de comenzar, es importante aclarar algo: en este artículo no nos enfocaremos en buenas prácticas de Flutter, arquitectura de proyectos ni lineamientos de desarrollo recomendados. Aunque estos aspectos son esenciales en cualquier proyecto profesional, en esta etapa inicial queremos priorizar la comprensión de la integración entre Flutter, AWS Amplify y Cognito. Para lograrlo, construiremos un proyecto lo más simple posible, sin preocuparnos por patrones de diseño o estructura de código sofisticada. Es posible que en algunos puntos la implementación parezca demasiado básica, pero esto es intencional: queremos que cualquier persona, sin importar su nivel de experiencia, pueda seguir los pasos sin complicaciones.

Dicho esto, en futuros artículos incrementaremos la complejidad del proyecto. No descarto la posibilidad de crear aplicaciones más completas donde exploremos múltiples servicios de AWS y adoptemos mejores prácticas en el desarrollo móvil. Pero por ahora, enfoquémonos en lo esencial: configurar nuestra aplicación Flutter para utilizar AWS Cognito a través de AWS Amplify y lograr un flujo de autenticación funcional. ¡Comencemos!

¿Que vamos a crear?

1 Pantalla principal: Aquí tendremos tres opciones:

• Registrar usuario
• Iniciar sesión
• Cerrar sesión

2 Segunda pantalla: Se mostrará únicamente después de haber iniciado sesión. En esta pantalla solo habrá un botón para cerrar sesión y regresar a la pantalla principal.

Como mencionamos anteriormente, mantendremos todo lo más simple posible. Aunque podríamos separar el código en múltiples archivos para mejorar la organización, en este caso realizaremos el registro, inicio de sesión y cierre de sesión dentro de un mismo archivo. Esto nos permitirá centrarnos en la integración de AWS Amplify y Cognito sin distraernos con estructuras más avanzadas.

Así es como se ve:

¿Que vamos a usar?

Antes de comenzar con la implementación, asegúrate de contar con lo siguiente:

1. Una cuenta de AWS activa
   AWS (Amazon Web Services) es una plataforma de servicios en la nube que ofrece soluciones para almacenamiento, cómputo, bases de datos, inteligencia artificial y más. En este caso, utilizaremos AWS para manejar la autenticación de usuarios con Amplify y Cognito. Si aún no tienes una cuenta, puedes registrarte en aws.amazon.com y aprovechar el nivel gratuito para comenzar sin costo.
2. Flutter(Vamos a necesitar crear un proyecto Flutter)
   Flutter es un framework de UI multiplataforma desarrollado por Google que permite crear aplicaciones nativas para iOS, Android, web y escritorio utilizando un solo código en Dart. Si aún no tienes instalado Flutter, puedes seguir la guía oficial en flutter.dev para configurarlo en tu sistema. También necesitarás tener un proyecto base de Flutter listo para implementar la autenticación.
3. AWS Amplify
   AWS Amplify es un conjunto de herramientas y servicios diseñados para facilitar la integración de AWS en aplicaciones móviles y web. Con Amplify podemos conectar fácilmente nuestra app Flutter con servicios de AWS, como Cognito, bases de datos (DynamoDB), almacenamiento (S3) y APIs sin necesidad de configurar manualmente cada servicio. En este proyecto, usaremos Amplify para gestionar la autenticación y facilitar la conexión con Cognito.
4. AWS Cognito
   AWS Cognito es un servicio de autenticación y autorización que permite gestionar usuarios de manera segura. Nos permite:
   • Registrar usuarios en un sistema seguro.
   • Manejar inicios de sesión con credenciales como correo y contraseña.
   • Administrar sesiones y tokens de autenticación.
   • Integrarse con otros servicios de AWS para controlar permisos y accesos.

En este proyecto, utilizaremos Cognito para gestionar el registro, inicio de sesión y cierre de sesión de usuarios dentro de nuestra aplicación Flutter.

Configuración de AWS Cognito

En general podemos decir que estos son los pasos:

• Ve a la consola de AWS Cognito.
• Crea un nuevo User Pool y configura los atributos necesarios (correo, teléfono, etc.).
• Habilita la autenticación con usuario y contraseña.
• Guarda el ID del User Pool y del Cliente de la aplicación.

Pero voy a ayudar con más detalles de los pasos que para eso es este artículo.

Mi recomendación es simple y directa: una vez dentro de AWS, utiliza la barra de búsqueda en la parte superior, escribe «Cognito» y selecciona la opción correspondiente, como se muestra en la imagen.

Ya después de dar click en Cognito, veremos algo como lo siguiente:

En la pantalla de AWS Cognito, podemos observar dos secciones principales: Grupos de usuarios y Grupos de identidades.

En la sección de Grupos de usuarios, encontramos una tabla con cuatro elementos clave:

1. Nombre del grupo de usuarios: Identifica el grupo de usuarios que hemos creado dentro de Cognito. Cada grupo permite gestionar autenticación y autorización de usuarios dentro de nuestra aplicación.
2. ID del grupo de usuarios: Es un identificador único asignado automáticamente por AWS para diferenciar cada grupo de usuarios dentro de Cognito.
3. Fecha y hora de creación: Indica el momento exacto en que se creó el grupo de usuarios, lo que es útil para llevar un control sobre su gestión y administración.
4. Fecha y hora de la última actualización: Muestra la última vez que se realizó un cambio en el grupo de usuarios, como modificaciones en la configuración o en los permisos de acceso.

Estos elementos son fundamentales para administrar y supervisar los grupos de usuarios dentro de AWS Cognito.

Si es la primera vez que utilizamos esta opción, debemos comenzar creando un grupo de usuarios. Para ello, haz clic en el botón «Crear grupo de usuarios», ubicado en la parte derecha de la pantalla anterior.

Al hacerlo, se abrirá una nueva pantalla con una guía de configuración que nos ayudará a completar el proceso paso a paso. En esta pantalla, encontraremos opciones para definir los ajustes del grupo de usuarios y configurar su integración con nuestra aplicación. A continuación, puedes ver una imagen de cómo luce esta pantalla.

Voy a seleccionar la opción «Aplicación móvil», ya que nuestro objetivo es integrar Cognito con Flutter. Aunque gran parte de la documentación de AWS se enfoca en Android e iOS, el proceso para Flutter es prácticamente el mismo, por lo que podemos seguir los mismos pasos sin inconvenientes.

En mi caso, nombraré el grupo de usuarios como «example-aws-auth-flutter», pero puedes elegir cualquier nombre que prefieras, ya que esto no afectará la funcionalidad. Si lo deseas, también puedes usar el mismo nombre sin problemas.

Si seguimos desplazándonos hacia abajo en la pantalla, encontraremos una sección llamada «Configurar opciones». En esta parte, podemos definir los identificadores de inicio de sesión, es decir, los métodos que los usuarios utilizarán para autenticarse en nuestra aplicación.

Para este ejemplo, seleccionaré correo electrónico como método de inicio de sesión. Más adelante, en otros artículos, exploraremos diferentes opciones y probaremos distintos métodos de autenticación. Sin embargo, en este caso, nos enfocaremos en la opción más sencilla y común: el correo electrónico.

Opciones de identificadores de inicio de sesión en AWS Cognito

AWS Cognito permite seleccionar uno o varios métodos de autenticación para los usuarios. Algunas de las opciones disponibles son:

1. Correo electrónico: Permite a los usuarios registrarse e iniciar sesión con su dirección de correo electrónico. AWS Cognito enviará correos de verificación automáticamente si se habilita la confirmación por correo.
2. Número de teléfono: Similar al correo electrónico, pero utilizando un número de teléfono como identificador. Se puede configurar para enviar códigos de verificación vía SMS.
3. Nombre de usuario: Los usuarios pueden registrarse con un nombre único en lugar de un correo o número de teléfono. Esta opción puede ser útil en aplicaciones donde no se requiere información personal como correo o teléfono.
4. Proveedor externo (Google, Facebook, Apple, etc.): AWS Cognito también permite la autenticación mediante proveedores de identidad como Google, Facebook, Apple y Amazon, utilizando OAuth2 o OpenID Connect. Esto permite a los usuarios iniciar sesión con sus cuentas existentes en estos servicios.

En este artículo, nos enfocaremos en el correo electrónico, ya que es un método fácil de implementar y ampliamente utilizado. Sin embargo, en otros artículos más adelante exploraremos otras opciones para ofrecer mayor flexibilidad en la autenticación.

En la sección de Atributos, podemos seleccionar qué información adicional queremos almacenar sobre los usuarios registrados en nuestro grupo de usuarios de Cognito.

Algunas de las opciones disponibles incluyen:

• Name (Nombre)
• Family name (Apellido)
• Email (Correo electrónico)
• Phone number (Número de teléfono)
• Birthdate (Fecha de nacimiento)
• Gender (Género)
• Address (Dirección)

En mi caso, seleccioné Name y Family name, lo que permitirá que los usuarios proporcionen su nombre y apellido al registrarse. Estos atributos pueden ser útiles si queremos personalizar la experiencia del usuario en la aplicación, por ejemplo, mostrando su nombre en la pantalla de bienvenida.

Dependiendo de las necesidades del proyecto, puedes seleccionar otros atributos o incluso requerir información adicional obligatoria para el registro.

La última opción en esta sección es la URL de retorno (Redirect URL). Esta configuración es opcional y se utiliza principalmente cuando integramos Cognito con aplicaciones web o autenticación basada en OAuth.

¿Para qué sirve la URL de retorno?

Cuando un usuario completa el proceso de autenticación (registro o inicio de sesión), Cognito puede redirigirlo automáticamente a una URL específica. Esto es especialmente útil para aplicaciones web o flujos de autenticación en navegadores, donde se necesita enviar al usuario de vuelta a la aplicación después del proceso de login.

¿Es obligatoria?

No, esta opción es completamente opcional. Si no se proporciona una URL, Cognito simplemente completará el proceso de autenticación sin realizar una redirección.

En mi caso, ingresé josedlujan.com como URL de retorno. Sin embargo, puedes dejar este campo vacío o agregar la URL de tu aplicación si estás integrando Cognito con una web o un backend que necesite recibir la respuesta de autenticación.

Una vez que hemos creado el grupo de usuarios, todo está listo y veremos una pantalla que nos proporcionará información sobre cómo configurar el proyecto en general.

Es importante notar que, en la mayoría de los casos, las guías de AWS hacen referencia a Android e iOS como las principales plataformas de integración. Sin embargo, como mencionamos anteriormente, nosotros estaremos trabajando con Flutter. A pesar de esta diferencia, los pasos que seguiremos serán muy similares a los que se indican para Android e iOS, ya que Flutter puede aprovechar las mismas configuraciones y SDKs para interactuar con AWS Cognito a través de Amplify.

Crear proyecto Flutter

Ahora que hemos configurado AWS Cognito, es momento de crear nuestro proyecto en Flutter. Para esto, utilizaremos la línea de comandos, lo que nos permitirá generar el proyecto de forma rápida y ordenada.

A continuación, te dejo los pasos para crear el proyecto:

1. Verificar que Flutter está instalado

Antes de comenzar, asegúrate de que tienes Flutter instalado y configurado correctamente en tu sistema. Para verificarlo, ejecuta el siguiente comando en la terminal:

flutter doctor

Si todo está correcto, verás un mensaje indicando que Flutter está instalado y listo para usarse. Si hay algún problema, el mismo comando te dará indicaciones sobre cómo solucionarlo.

2. Crear un nuevo proyecto Flutter

Para generar un nuevo proyecto en Flutter, ejecuta el siguiente comando:

flutter create flutter_auth_aws

Esto creará una carpeta con el nombre flutter_auth_aws, que contendrá todos los archivos necesarios para el proyecto.

3. Acceder al directorio del proyecto

Una vez creado, entra en la carpeta del proyecto con:

cd flutter_auth_aws

4. Ejecutar el proyecto para verificar que funciona

Antes de continuar, es buena práctica ejecutar el proyecto base para asegurarnos de que todo está funcionando correctamente. Para esto, usa:

flutter run

Si tienes un emulador o un dispositivo físico conectado, Flutter iniciará la aplicación de ejemplo que viene por defecto.

Con esto ya estamos seguros que participios de un proyecto funcional en flutter.

Amplify

AWS Amplify es un conjunto de herramientas y servicios de AWS diseñados para facilitar la integración de aplicaciones móviles y web con la nube. Su objetivo es simplificar tareas como autenticación, almacenamiento, bases de datos y APIs, permitiendo a los desarrolladores enfocarse en la lógica de la aplicación sin preocuparse por la infraestructura subyacente.

Al utilizar Amplify en Flutter, obtenemos:

Autenticación rápida con AWS Cognito (inicio de sesión con email, teléfono o redes sociales).
Sincronización con la nube y almacenamiento de datos.
Escalabilidad sin necesidad de administrar servidores.
Integración sencilla con otros servicios de AWS como S3, DynamoDB y AppSync.

¿Cómo funciona Amplify?

Amplify tiene un CLI (Command Line Interface) y un SDK, que permiten configurar y conectar fácilmente los servicios de AWS a nuestra app. En este caso, usaremos Amplify CLI para configurar la autenticación con AWS Cognitoen Flutter.

Ahora que sabemos qué es Amplify, ¡vamos a configurarlo en nuestro proyecto! 

Para gestionar los recursos de AWS directamente desde la terminal, necesitamos instalar Amplify CLI en nuestro sistema de forma global. Esto nos permitirá inicializar y administrar servicios como Cognito, S3 y DynamoDB dentro de nuestro proyecto.

1. Instalar Amplify CLI

Ejecuta el siguiente comando en la terminal para instalar Amplify CLI de manera global:

npm install -g @aws-amplify/cli

2. Configurar Amplify con AWS

Una vez instalado, debemos vincular Amplify con nuestra cuenta de AWS. Para ello, ejecuta:

amplify configure

Este comando iniciará un proceso interactivo donde deberás iniciar sesión en AWS y asignar los permisos necesarios para que Amplify pueda administrar los servicios en tu nombre.

Vamos a compartir los pasos que nos pide la configuración.

Al ejecutar el comando amplify configure, el asistente de configuración nos guiará a través de tres pasos fundamentales:

1. Prácticas recomendadas y alternativas para la clave de acceso
   En este paso, se nos pedirá que elijamos cómo gestionar las credenciales de acceso a AWS. Amplify recomienda crear un nuevo usuario IAM con permisos específicos en lugar de usar credenciales root.
2. Establecer el valor de etiqueta de descripción
   Aquí debemos asignar un nombre descriptivo al usuario IAM que estamos creando. Este nombre nos ayudará a identificar fácilmente el propósito de las credenciales dentro de nuestra cuenta de AWS.
3. Recuperar claves de acceso
   Una vez creado el usuario IAM, se nos proporcionarán las claves de acceso (Access Key ID y Secret Access Key). Es importante guardarlas en un lugar seguro, ya que serán necesarias para que Amplify pueda interactuar con los servicios de AWS desde nuestro entorno de desarrollo.

Después de completar estos pasos, Amplify quedará configurado correctamente y podremos inicializarlo en nuestro proyecto Flutter. 🚀

Las opciones disponibles son:

1. Interfaz de línea de comandos (CLI)
   • Esta opción está pensada para quienes administrarán AWS desde la terminal, ejecutando comandos para desplegar y gestionar recursos.
   • Es útil para desarrolladores que interactúan con AWS directamente sin necesidad de ejecutar código en una aplicación.
2. Código local
   • Se usa cuando el acceso a AWS es directamente desde un entorno de desarrollo local, como un script en una computadora personal.
   • Ideal para pruebas y desarrollo antes de desplegar en producción.
3. Aplicación ejecutada en un servicio de computación AWS
   • Recomendada cuando la aplicación se ejecutará en instancias EC2, AWS Lambda, Fargate u otros servicios de AWS.
   • En este caso, se recomienda usar roles IAM en lugar de claves de acceso estáticas para mayor seguridad.
4. Servicios de terceros
   • Se usa cuando queremos que nuestra aplicación se integre con herramientas externas que necesitan interactuar con AWS (como GitHub Actions, CI/CD pipelines, etc.).
   • Generalmente, en este caso se usan credenciales de AWS IAM asociadas a la herramienta externa.
5. Aplicación ejecutada fuera de AWS(Opción que SELECCIONE)
   • Se elige cuando la aplicación no se ejecutará en la infraestructura de AWS, sino en dispositivos móviles, navegadores web o servidores ajenos a AWS.
   • Ejemplo: Aplicaciones Flutter, React, Angular o backend en otro proveedor de nube (Google Cloud, Azure, etc.).
   • En este caso, AWS Amplify utilizará claves de acceso IAM configuradas en el entorno local para autenticarse con AWS.
6. Otros
   • Opción genérica cuando ninguna de las anteriores se ajusta completamente al caso de uso.
   • Se puede usar cuando se tiene un entorno híbrido o se necesita una configuración personalizada.

Ahora que hemos seleccionado la opción adecuada, el siguiente paso es establecer el valor de etiqueta de descripción. Este campo es opcional, pero nos permite asignar un nombre descriptivo para identificar el propósito de la configuración.

En mi caso, ingresé «flutter-app», pero puedes elegir cualquier nombre que te ayude a reconocer fácilmente esta configuración dentro de AWS. Como la imagen siguiente:

En esta última parte del proceso de configuración, recuperaremos las claves de acceso, que son esenciales para que Amplify pueda interactuar con AWS desde nuestro proyecto.

Al completar la configuración del usuario IAM, AWS nos proporcionará dos claves importantes:

1. Access Key ID (Clave de acceso)
   • Es un identificador público que AWS utiliza para reconocer la cuenta y los permisos asignados a nuestra aplicación.
2. Secret Access Key (Clave de acceso secreta)
   • Es una clave privada utilizada para autenticar las solicitudes a AWS.
   • ⚠️ Importante: AWS no mostrará esta clave nuevamente después de la creación, por lo que debes guardarla en un lugar seguro, como un gestor de contraseñas o un archivo protegido.

¿Para qué sirven estas claves?

Estas credenciales serán utilizadas por AWS Amplify CLI para gestionar los servicios de AWS dentro de nuestro proyecto Flutter. Con ellas, podremos inicializar Amplify, conectar Cognito y utilizar otros servicios de AWS como S3 o DynamoDB.

En la imagen no mostrare las clases de acceso completa claramente, pero es para que vean en donde se ubican.

Una vez que tengamos ambas claves, estamos listos para continuar con la integración de Amplify en Flutter. 🚀

Hemos terminado con la configuración.

Amplify en nuestro repositorio

• Una vez instalado el CLI en tu computadora, dentro de tu proyecto Flutter debes inicializar Amplify amplify init
• Esto crea una carpeta amplify/ dentro de tu proyecto que almacena la configuración del backend en AWS.
• Luego, agregas la autenticación con Cognito usando amplify add auth
• Finalmente, implementas los cambios en AWS con amplify push

Dependencias dentro del proyecto Flutter:

En el código de Flutter, debes instalar los paquetes necesarios con:

flutter pub add amplify_flutter amplify_auth_cognito

Luego, configuras Amplify en main.dart para manejar la autenticación.

Con estos pasos, Amplify quedará correctamente configurado tanto en tu computadora como dentro del proyecto Flutter. 🚀

Estructura del proyecto

Esta será la estructura del proyecto:

flutter_aws_auth/
│-- lib/
│ │-- main.dart
│ │-- amplifyconfiguration.dart
│ │-- authentication_service.dart
│ │-- login_screen.dart
│ │-- home_screen.dart
│-- amplify/
│-- android/
│-- ios/
│-- pubspec.yaml

Archivo main.dart

import 'package:flutter/material.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'amplifyconfiguration.dart';
import 'login_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await configureAmplify();
  runApp(const MyApp());
}

Future<void> configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyconfig);
    print("Amplify configurado correctamente");
  } catch (e) {
    print("Error configurando Amplify: $e");
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginScreen(),
    );
  }
}

Veamos primero sobre los imports.

• flutter/material.dart → Librería principal de Flutter para construir la UI.
• amplify_flutter → Permite interactuar con AWS Amplify dentro de Flutter.
• amplify_auth_cognito → Plugin específico para manejar autenticación con AWS Cognito.
• amplifyconfiguration.dart → Archivo que contiene la configuración de Amplify (clave JSON generada al inicializar Amplify).
• login_screen.dart → Pantalla de inicio de sesión (UI principal de la app).

Ahora veamos lo que tenemos en la función main.

• WidgetsFlutterBinding.ensureInitialized();
  • Se usa para asegurarse de que Flutter ha inicializado su motor antes de ejecutar código asíncrono.
• await configureAmplify();
  • Llama a la función que configura AWS Amplify antes de iniciar la app.
• runApp(const MyApp());
  • Inicia la aplicación con MyApp como widget principal.

Ahora expliquemos la configuración del método configureAmplify()

Amplify.addPlugin(AmplifyAuthCognito());

• Agrega el plugin de autenticación con AWS Cognito a Amplify.

Amplify.configure(amplifyconfig);

• Configura Amplify utilizando la configuración almacenada en amplifyconfiguration.dart.

print("Amplify configurado correctamente");

• Mensaje de éxito en la consola.

catch (e) { print("Error configurando Amplify: $e"); }

• Maneja cualquier error en la configuración.

Y por ultimo vamos a explicar la clase MyApp que en general es lo más común en Flutter:

• Extiende StatelessWidget → No requiere estado mutable.
• MaterialApp
  • debugShowCheckedModeBanner: false → Oculta la etiqueta de depuración.
  • home: LoginScreen(), → La pantalla principal será LoginScreen(), donde se manejará la autenticación.

• En resumen en nuestra clase main tenemos lo siguiente:
• Configura AWS Amplify con Cognito en Flutter.
• Usa amplifyconfiguration.dart para conectar la app con AWS.
• Lanza la app con LoginScreen() como pantalla principal.
• Maneja errores si la configuración de Amplify falla.

Archivo amplifyconfiguration.dart

const amplifyconfig = ''' 
{
  "auth": {
    "plugins": {
      "awsCognitoAuthPlugin": {
        "UserAgent": "aws-amplify-cli/2.0",
        "Version": "1.0",
        "IdentityManager": {
          "Default": {}
        },
        "CognitoUserPool": {
          "Default": {
            "PoolId": "us-east-1_examplePoolId",
            "AppClientId": "exampleAppClientId",
            "Region": "us-east-1"
          }
        }
      }
    }
  }
}
''';

Aunque este un ejemplo general del archivo, ya que este archivo contiene datos especificos como el PoolID, AppClientId, no te debes preocupar ya que generalmente este archivo se creo con lo que hicimos anteriormente de amplify, pero vamos a dar un breve repaso sobre lo que contiene el archivo.

Se almacena en una variable constante (const amplifyconfig) para que la aplicación pueda acceder a esta configuración en cualquier momento.

"auth"

• Indica que esta configuración es para autenticación con AWS.

"plugins"

• Aquí se definen los plugins que AWS Amplify utilizará en la aplicación.

"awsCognitoAuthPlugin"

• Es el plugin de autenticación que habilita AWS Cognito en la app.

"UserAgent" & "Version"

• Muestran la versión de AWS Amplify CLI que generó este archivo.

"IdentityManager"

• Es una sección reservada para futuras configuraciones de administración de identidad.

"CognitoUserPool"

• Aquí se define la conexión con el grupo de usuarios de Cognito.

"PoolId" (us-east-1_examplePoolId)

• Es el ID del grupo de usuarios de Cognito que creamos en AWS.
• Este valor debe coincidir con el grupo de usuarios configurado en AWS Cognito.

"AppClientId" (exampleAppClientId)

• Identificador de la aplicación cliente dentro del grupo de usuarios.
• Se usa para que la app Flutter pueda autenticar usuarios contra Cognito.

"Region" (us-east-1)

• Define la región de AWS donde está alojado el grupo de usuarios.

Este archivo es clave para la autenticación, ya que permite a la aplicación conectarse con AWS Cognito.
Se genera automáticamente al inicializar Amplify en el proyecto Flutter. Debe ser actualizado con los valores correctos de PoolId y AppClientId después de crear el grupo de usuarios en AWS Cognito.

Una vez configurado correctamente, la app podrá gestionar registro, inicio de sesión y autenticación de usuarios con AWS Cognito.

Al agregar más configuraciones relacionadas con Auth  amplifyconfiguration.dart, el archivo se vuelve más detallado y define cómo se gestionará la autenticación dentro de la aplicación.

"Auth": {
    "Default": {
        "authenticationFlowType": "USER_SRP_AUTH",
        "socialProviders": [],
        "usernameAttributes": [
            "EMAIL"
        ],
        "signupAttributes": [
            "EMAIL"
        ],
        "passwordProtectionSettings": {
            "passwordPolicyMinLength": 8,
            "passwordPolicyCharacters": []
        },
        "mfaConfiguration": "OFF",
        "mfaTypes": [
            "SMS"
        ],
        "verificationMechanisms": [
            "EMAIL"
        ]
    }
}

authenticationFlowType: "USER_SRP_AUTH"

• Define el método de autenticación que se usará.
• "USER_SRP_AUTH" (Secure Remote Password) es el flujo recomendado porque no almacena contraseñas en la appy ofrece un proceso más seguro.

socialProviders: []

• Aquí se pueden definir proveedores de autenticación externos como Google, Facebook o Apple.
• Como está vacío [], significa que no estamos utilizando autenticación social en este caso.

usernameAttributes: ["EMAIL"]

• Indica que el correo electrónico será el identificador principal del usuario (en lugar de un nombre de usuario tradicional).

signupAttributes: ["EMAIL"]

• Define los atributos que se solicitan al usuario al registrarse. En este caso, solo se requiere el correo electrónico.

passwordProtectionSettings

• Controla las reglas de seguridad de las contraseñas.
• passwordPolicyMinLength: 8 → La contraseña debe tener al menos 8 caracteres.
• passwordPolicyCharacters: [] → No se establecen requisitos adicionales como caracteres especiales o mayúsculas/minúsculas.

mfaConfiguration: "OFF"

• Indica que la autenticación multifactor (MFA) está desactivada por defecto.

mfaTypes: ["SMS"]

• Aunque MFA está desactivado, si se activara, la opción de verificación sería a través de SMS.

verificationMechanisms: ["EMAIL"]

• Establece que la verificación de cuentas se hará por correo electrónico (AWS enviará un código de confirmación al usuario).

Vamos a ver ahora el archivo authentication_service.dart

class AuthenticationService {
  Future<String> signUp(String email, String password) async {
    try {
      SignUpResult result = await Amplify.Auth.signUp(
        username: email,
        password: password,
        options: SignUpOptions(userAttributes: {
          AuthUserAttributeKey.email: email,
        }),
      );
      if (result.nextStep.signUpStep == "confirmSignUp") {
        print("Usuario necesita confirmar su cuenta.");
        return "confirmSignUp"; // ✅ Devuelve este string si se requiere confirmación
      }
      print("Usuario registrado correctamente.");
      return "signedUp"; // ✅ Usuario registrado correctamente
    } catch (e) {
      print("Error en el registro: $e");
      return "error"; // ✅ Devuelve "error" en caso de excepción
    }

  }

  /// Confirmar el registro del usuario con el código de verificación enviado al email
  Future<void> confirmSignUp(String email, String confirmationCode) async {
    try {
      SignUpResult result = await Amplify.Auth.confirmSignUp(
        username: email,
        confirmationCode: confirmationCode,
      );
      print("Usuario confirmado correctamente.");
    } catch (e) {
      print("Error al confirmar usuario: $e");
    }
  }

  // Future<void> signIn(String username, String password) async {
  Future<String> signIn(String username, String password) async {
    print('Iniciando sesión');
    print(username + password);
    try {
      SignInResult result = await Amplify.Auth.signIn(
        username: username,
        password: password,
      );
      
      if (result.isSignedIn) {
        print("Inicio de sesión exitoso.");
        return "signedIn"; // ✅ Esto activa la redirección a HomeScreen
      } else if (result.nextStep.signInStep == "confirmSignUp") {
        print("Usuario necesita confirmar su cuenta.");
        return "confirmSignUp";
      } else {
        print("Inicio de sesión incompleto.");
        return "incomplete";
      }
    } catch (e) {
      print("Error en el inicio de sesión: $e");
      return "error";
    }
  }

  Future<void> signOut() async {
    try {
      await Amplify.Auth.signOut();
      print('Sesión cerrada');
    } catch (e) {
      print('Error al cerrar sesión: $e');
    }
  }
}

Ahora vamos a la explicación, pero recordemos que como mencione al inicio del artículo he tratado de dejar todo lo más simple posible aun no se sigan practicas muy particulares e importantes en el código, pero el objetivo principal es no complicar el ejemplo. Por ejemplo he dejado bastantes print en el código para que sea fácil de saber lo que se hace en el código y sumado a comentarios, de verdad debería ser muy fácil de leer.

Expliquemos los metodos:

signUp(String email, String password) → Registra un nuevo usuario en AWS Cognito.

• Usa el correo electrónico como identificador de usuario.
• Devuelve "confirmSignUp" si el usuario necesita confirmar su cuenta.
• Devuelve "signedUp" si el usuario se registra sin problemas.
• Devuelve "error" si ocurre alguna excepción.

confirmSignUp(String email, String confirmationCode) → Confirmar Usuario

• Confirma la cuenta del usuario con el código enviado a su email.
• Si el código es correcto, el usuario queda habilitado para iniciar sesión.
• Maneja errores en caso de un código incorrecto o expirado.

signIn(String username, String password) → Iniciar Sesión

• Autentica al usuario con su correo y contraseña.
• Si el usuario aún no ha confirmado su cuenta, devuelve "confirmSignUp".
• Si el inicio de sesión es exitoso, devuelve "signedIn".
• Maneja errores en caso de credenciales incorrectas o problemas de conexión.

signOut() → Cerrar Sesión

• Cierra la sesión del usuario actual.
• Maneja errores en caso de fallos al cerrar sesión.

En resumen:

Método	Función
signUp(email, password)	Registra un usuario en Cognito
confirmSignUp(email, confirmationCode)	Confirma el usuario con código de verificación
signIn(username, password)	Inicia sesión en Cognito
signOut()	Cierra sesión del usuario actual

Ahora vamos con el archivo login_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_aws_auth/home_screen.dart';
import 'authentication_service.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  final _usernameSignupController = TextEditingController();
  final _passwordSignupController = TextEditingController();
  final _confirmationCodeController = TextEditingController();
  final _authService = AuthenticationService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Iniciar Sesión")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _usernameSignupController,
              decoration: const InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordSignupController,
              decoration: const InputDecoration(labelText: 'Contraseña'),
            ),
            ElevatedButton(
              onPressed: () async {
                var result = await _authService.signUp(
                  _usernameSignupController.text.trim(),
                  _passwordSignupController.text.trim(),
                );
                if (result == "confirmSignUp") {
                  _showConfirmationDialog();
                }
              },
              child: const Text("Registrarse"),
            ),
            TextField(
              controller: _usernameController,
              decoration: const InputDecoration(labelText: 'Usuario'),
            ),
            TextField(
              controller: _passwordController,
              decoration: const InputDecoration(labelText: 'Contraseña'),
              obscureText: true,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                var result = await _authService.signIn(
                  _usernameController.text.trim(),
                  _passwordController.text.trim(),
                );
                if (result == "signedIn") {
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(builder: (_) => HomeScreen()),
                  );
                } else if (result == "confirmSignUp") {
                  _showConfirmationDialog();
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text("Error: No se pudo iniciar sesión")),
                  );
                }
              },
              child: const Text("Iniciar Sesión"),
            ),
            ElevatedButton(
              onPressed: () {
                _authService.signOut();
              },
              child: const Text("Sign out"),
            )
          ],
        ),
      ),
    );
  }

  void _showConfirmationDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("Confirmar Cuenta"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: _confirmationCodeController,
                decoration:
                    InputDecoration(labelText: "Código de Confirmación"),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () async {
                await _authService.confirmSignUp(
                  _usernameSignupController.text.trim(),
                  _confirmationCodeController.text.trim(),
                );
                Navigator.pop(context);
              },
              child: Text("Confirmar"),
            ),
          ],
        );
      },
    );
  }
}

Ahora expliquemos el código, empecemos por los imports.

• flutter/material.dart → Importa los widgets de Flutter.
• home_screen.dart → Pantalla a la que se navega después del login exitoso.
• authentication_service.dart → Servicio que maneja la autenticación con AWS Cognito.

Ahora comenzamos comenzamos con la definición de LoginScreen

• Se define un StatefulWidget porque maneja el estado de los formularios de entrada y la autenticación.
• Crea el estado con _LoginScreenState.

Tambien definimos los controladores para los campos que de texto que utilizaremos:

TextEditingController → Se usa para manejar la entrada de datos en los TextField.

• _usernameController y _passwordController → Para el inicio de sesión.
• _usernameSignupController y _passwordSignupController → Para el registro de usuario.
• _confirmationCodeController → Para ingresar el código de confirmación de AWS Cognito.

_authService → Instancia del servicio de autenticación AuthenticationService.

Nos apoyamos en el Scaffold para comenzar la estructura de la pantalla

• Usa Scaffold para definir la estructura de la pantalla.
• AppBar con título "Iniciar Sesión".
• Padding para espaciar el contenido.
• Column organiza los widgets en una estructura vertical.

Los primeros elementos son referentes a la parte de Registro.

• Campos de entrada para el email y contraseña del registro.
• Al hacer clic en «Registrarse», llama a signUp().
• Si el usuario necesita confirmar su cuenta, muestra _showConfirmationDialog().

Ahora el segundo bloque es para la parte de Inicio de Sesión.

• Campos de entrada para el usuario y contraseña.
• Al hacer clic en «Iniciar Sesión», llama a signIn().
• Si el inicio de sesión es exitoso, navega a HomeScreen().
• Si el usuario aún no ha confirmado su cuenta, muestra _showConfirmationDialog().
• Muestra un SnackBar en caso de error.

Tenemos por último un botón para cerrar sesión.

• Llama al método signOut() para cerrar sesión.

Tenemos tambien un cuadro de dialogo, Diálogo de Confirmación (_showConfirmationDialog())

• Muestra un cuadro de diálogo cuando el usuario necesita confirmar su cuenta.
• Permite ingresar el código de verificación enviado por AWS Cognito.
• Llama a confirmSignUp() para completar el registro.
• Cierra el diálogo (Navigator.pop(context)) después de la confirmación.

En resumen:

Sección	Descripción
Registro	Captura email/contraseña y llama a signUp(). Si se requiere confirmación, muestra _showConfirmationDialog().
Inicio de sesión	Captura usuario/contraseña y llama a signIn(). Si el login es exitoso, redirige a HomeScreen().
Cierre de sesión	Llama a signOut() para cerrar sesión.
Confirmación de cuenta	Muestra un AlertDialog para ingresar el código de verificación y confirma el usuario en Cognito.

Así es como queda nuestra pantalla:

Vamos por el último archivo home_screen.dart

import 'package:flutter/material.dart';
import 'authentication_service.dart';

class HomeScreen extends StatelessWidget {
  final _authService = AuthenticationService();

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Inicio")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _authService.signOut();
            Navigator.pop(context);
          },
          child: const Text("Cerrar Sesión"),
        ),
      ),
    );
  }
}

Este código define la pantalla principal de la aplicación después de que un usuario ha iniciado sesión correctamente. Es una pantalla simple que muestra un botón para cerrar sesión y regresar a la pantalla de inicio de sesión.

Tenemos 2 imports:

flutter/material.dart → Permite construir la interfaz gráfica en Flutter.authentication_service.dart → Se importa el servicio de autenticación para manejar el cierre de sesión con AWS Cognito.

No necesitamos mucha más explicación ya que este pantalla solo tiene elementos básicos, podríamos decir que es el código más básico del ejemplo, es casi un «hola mundo». Tenemos un HomeScreen que es un StatelessWidger y tenemos una instancia de AuthenticationService (_authService) para acceder al método signOut().

En la interfaz tenemos 3 elementos base:

• Scaffold → Estructura de la pantalla con un AppBar titulado «Inicio».
• Center → Asegura que el botón esté centrado en la pantalla.
• ElevatedButton (Botón de Cerrar Sesión)

• onPressed() →
  1. Llama a _authService.signOut() para cerrar sesión con AWS Cognito.
  2. Usa Navigator.pop(context); para regresar a la pantalla anterior (LoginScreen).

En resumen:

Sección	Descripción
Pantalla principal	Se muestra después del inicio de sesión exitoso.
Cierre de sesión	Llama a _authService.signOut() para cerrar sesión en Cognito.
Regresar a LoginScreen	Usa Navigator.pop(context); para volver atrás.

Así es como se ve esta pantalla:

En este proyecto, nuestro objetivo fue crear una implementación sencilla de autenticación en Flutter utilizando AWS Amplify y Cognito. Desde la configuración de AWS hasta la integración con nuestra aplicación, seguimos un enfoque paso a paso para que cualquier desarrollador pueda realizar su primer inicio de sesión y autenticación sin complicaciones.

Sabemos que este es solo el comienzo. Más adelante, iremos incorporando ajustes y mejoras, explorando características adicionales que AWS nos ofrece para el desarrollo móvil. Si tienes sugerencias sobre temas que te gustaría ver en los próximos artículos, serán bienvenidas.

Además, este mismo proyecto servirá como base para aprender e integrar nuevas funcionalidades, como autenticación multifactor (MFA), autenticación con redes sociales (Google, Facebook, Apple), autorización con roles y mucho más.

 ¡Mantente atento a próximas actualizaciones! Muy pronto estaremos ampliando el desarrollo móvil con AWS y llevando esta integración al siguiente nivel.

Bueno, mi nombre es José Luján, desarrollador con 20 años de experiencia trabajando como desarrollador, manager y explorando el mundo del desarrollo mobile, IA y crypto.

Este fue solo el primer paso en la integración de AWS con Flutter, pero aún hay mucho más por descubrir. Seguiremos explorando nuevas herramientas, optimizando nuestro código y llevando nuestras apps al siguiente nivel.

Nos vemos pronto en el siguiente artículo, y si quieres seguir en contacto o tienes alguna sugerencia de tema, me puedes encontrar en cualquier red social como @josedlujan. 🚀 ¡Hasta la próxima!