ReactNativeAuth

Reagieren Sie native Authentifizierungs -App

Vollständiger Benutzerauthentifizierungsfluss für mobile Anwendungen mit React Native, Expo, AWS Amplify, React-Navigation und nativer Base.

Überblick

Die in dieser App verwendeten Technologien sind Folgendes:

• Die Navigation erfolgt mit: React-Navigation.

• Frontend: Expo.

• Layout: Native-Base.

• Back End: AWS Verstärkung.

Authentifizierungsfluss

• Benutzer werden auf den Begrüßungsbildschirm gebracht.

• Benutzer können sich anmelden, anmelden, eine Passwortänderung anfordern und zwischen den Bildschirmen navigieren.

• Die internationale Telefoneingabe ist im Anmeldebildschirm enthalten.

• Benutzer werden nach dem Anmeldung zum Startbildschirm umgeleitet.

• Benutzer können zwischen den Bildschirmen mit dem unteren Registerkarte Navigator oder dem Schubladen -Navigator navigieren.

• Benutzer werden angemeldet, bis sie sich von der App abmelden.

Voraussetzungen

• Expo Cli

  • npm install -g expo-cli

• AWS -Konto

• Knoten JS mit NPM

• AWS verstärkt CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (Link für einen Schritt -für -Schritt -Video).

Konfigurieren des Projekts

1. Klonen Sie dieses Repo zu Ihrer lokalen Maschine.

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

cd ReactNativeAuth

2. Initialisiere das AWS -Verstärkungsprojekt.

 amplify init

Befolgen Sie die gleichen Anweisungen wie unten.

3. Konfigurieren Sie einen Amazon Cognito -Benutzerpool, um Benutzer -Anmeldeinformationen zu speichern.

 amplify add auth

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

4. Zeit für die Bereitstellung Ihres Projekts in AWS.

 amplify push

Are you sure you want to continue? Yes

Nach wenigen Minuten automatisierter Vorgänge erstellt die Amplify CLI einen Amazon -Cognito -Benutzerpool und einen Identitätspool, um die Benutzer von Benutzern zu speichern.

Ausführen der Anwendung

1. Installieren Sie Clientabhängigkeiten.

 yarn

# or

npm install

2. Starten Sie die React Native App in Ihrem Simulator unter Ihrem Projektverzeichnis.

 expo start --ios

# or

expo start --android

Schritt -für -Schritt -Tutorial

• Eine vollständige Reihe von Artikeln, in denen der Bauprozess dieser App beschrieben wird, finden Sie hier.

• Hier finden Sie ein Demo -Video des Authentifizierungsflusses.