ReactNativeAuth

Aplicación de autenticación nativa reaccionar

Flujo de autenticación de usuario completo para aplicaciones móviles con React Native, Expo, AWS Amplify, React-Navigation y Native-Base.

Descripción general

Las tecnologías utilizadas en esta aplicación son las siguientes:

• La navegación se realiza con: react-navegación.

• Front End: Expo.

• Diseño: base nativa.

• Back End: AWS Amplify.

Flujo de autenticación

• Los usuarios son llevados a la pantalla de bienvenida.

• Los usuarios pueden registrarse, iniciar sesión, solicitar un cambio de contraseña, navegar entre pantallas.

• La entrada telefónica internacional está incluida en la pantalla de registro.

• Los usuarios son redirigidos a la pantalla de inicio después del inicio de sesión.

• Los usuarios pueden navegar entre pantallas usando el navegador de pestaña inferior o el navegador de cajones.

• Los usuarios se mantienen conectados hasta que se registren desde la aplicación.

Requisitos previos

• Expo CLI

  • npm install -g expo-cli

• Cuenta de AWS

• Nodo JS con NPM

• AWS amplifica CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (enlace para un video paso a paso).

Configuración del proyecto

1. Clone este repositorio a su máquina local.

 git clone https://github.com/yhenni1989/ReactNativeAuth.git

cd ReactNativeAuth

2. Inicializar el proyecto AWS Amplify.

 amplify init

Siga las mismas instrucciones que a continuación.

3. Configure un grupo de usuarios de Amazon Cognito para almacenar las credenciales de los usuarios.

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

4. Es hora de implementar su proyecto en AWS.

 amplify push

Are you sure you want to continue? Yes

Después de unos minutos de operaciones automatizadas, la CLI de Amplify creará un grupo de usuarios de Amazon Cognito y un grupo de identidad para almacenar los usuarios de los usuarios.

Ejecutando la aplicación

1. Instale las dependencias del cliente.

 yarn

# or

npm install

2. Inicie la aplicación React Native en su simulador en su directorio de proyecto.

 expo start --ios

# or

expo start --android

Tutorial paso a paso

• Aquí se puede encontrar una serie completa de artículos que detallan el proceso de construcción de esta aplicación.

• Aquí se encuentra un video de demostración del flujo de autenticación.