ReactNativeAuth

ネイティブ認証アプリを反応します

React Native、Expo、AWS Amplify、React-Navigation、Native-Baseを使用したモバイルアプリケーションの完全なユーザー認証フロー。

概要

このアプリで使用されるテクノロジーは次のとおりです。

• ナビゲーションは次のように行われます：React-Navigation。

• フロントエンド：博覧会。

• レイアウト：ネイティブベース。

• バックエンド：AWS Amplify。

認証フロー

• ユーザーはウェルカム画面に連れて行かれます。

• ユーザーは、サインアップ、サインイン、パスワードの変更をリクエストし、画面間でナビゲートできます。

• 国際的な電話入力は、サインアップ画面に含まれています。

• ユーザーは、ログイン後にホーム画面にリダイレクトされます。

• ユーザーは、下部タブナビゲーターまたは引き出しナビゲーターを使用して、画面間でナビゲートできます。

• ユーザーは、アプリからサインアウトするまでログインし続けます。

前提条件

• 博覧会CLI

  • npm install -g expo-cli

• AWSアカウント

• npmのノードJS

• AWSはCLIを増幅します

  • npm install -g @aws-amplify/cli
  • amplify configure （ステップバイステップビデオのリンク）。

プロジェクトの構成

1. このレポをローカルマシンにクローンします。

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

cd ReactNativeAuth

2. AWS Amplifyプロジェクトを初期化します。

 amplify init

以下と同じ指示に従ってください。

3. Amazon Cognitoユーザープールを構成して、ユーザーの資格情報を保存します。

 amplify add auth

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

4. プロジェクトをAWSに展開する時間。

 amplify push

Are you sure you want to continue? Yes

数分間の自動操作の後、Amplify CLIはAmazon CognitoユーザープールとIDプールを作成して、ユーザーのクレンディングを保存します。

アプリケーションの実行

1. クライアントの依存関係をインストールします。

 yarn

# or

npm install

2. プロジェクトディレクトリの下で、シミュレーターでReactネイティブアプリを起動します。

 expo start --ios

# or

expo start --android

ステップバイステップのチュートリアル

• このアプリの構築プロセスを詳述する一連の記事は、こちらをご覧ください。

• 認証フローのデモビデオはここにあります。