ReactNativeAuth

React Application d'authentification native

Compléter le flux d'authentification de l'utilisateur pour les applications mobiles avec React Native, Expo, AWS Amplify, React Navigation et Native-Base.

Aperçu

Les technologies utilisées dans cette application sont les suivantes:

• La navigation se fait avec: React-Navigation.

• Front End: Expo.

• Disposition: base native.

• Back End: AWS Amplify.

Flux d'authentification

• Les utilisateurs sont emmenés sur l'écran de bienvenue.

• Les utilisateurs peuvent s'inscrire, se connecter, demander un changement de mot de passe, naviguer entre les écrans.

• La contribution internationale du téléphone est incluse dans l'écran d'inscription.

• Les utilisateurs sont redirigés vers l'écran d'accueil après la connexion.

• Les utilisateurs peuvent naviguer entre les écrans à l'aide du Navigator de Tab inférieur ou du Navigator de tiroir.

• Les utilisateurs sont maintenus connectés jusqu'à ce qu'ils se déconnectent de l'application.

Condition préalable

• EXPO CLI

  • npm install -g expo-cli

• Compte AWS

• Nœud js avec npm

• AWS Amplify CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (lien pour une vidéo étape par étape).

Configuration du projet

1. Clone ce repo à votre machine locale.

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

cd ReactNativeAuth

2. Initialiser le projet AWS Amplify.

 amplify init

Suivez les mêmes instructions que ci-dessous.

3. Configurez un pool d'utilisateurs Amazon Cognito pour stocker les informations d'identification des utilisateurs.

 amplify add auth

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

4. Il est temps de déployer votre projet dans AWS.

 amplify push

Are you sure you want to continue? Yes

Après quelques minutes d'opérations automatisées, l'amplification de la CLI créera un pool d'utilisateurs Amazon Cognito et un pool d'identité pour stocker les useurs Crendentials.

Exécution de l'application

1. Installez les dépendances des clients.

 yarn

# or

npm install

2. Lancez l'application React Native dans votre simulateur sous votre répertoire de projet.

 expo start --ios

# or

expo start --android

Tutoriel étape par étape

• Une série complète d'articles détaillant le processus de construction de cette application se trouve ici.

• Une vidéo de démonstration du flux d'authentification se trouve ici.