React Navigationを使用した認証フローの構築

更新日:2017年3月27日

React Native Schoolの一部として、この記事の更新版をまとめました。

React Navigationを使用して認証フローを設定することについて頻繁に尋ねられます。今日はそれについて説明します。TabNavigatorを使用したサインインレイアウトと、2画面のStackNavigatorを使用したサインアウトレイアウトの2つの「レイアウト」があります。

React Native Elementsを使用して、このアプリのUIを処理します。

概要

アプリは次のように動作します…

ユーザーが最初にアプリを開くと、ログイン可能なSignedOutレイアウトが表示されます(ログインはログインボタンを押すだけで、他のすべては見た目だけです)。 SignedInレイアウトにログインすると、SignedOutレイアウトを置き換える必要があります。ユーザーはログアウトしない限り、スワイプしたり、前のレイアウトに戻ったりすることはできません。

ユーザーが以前にログインした場合は、アプリに戻ったときにすぐにSignedInlayoutを表示する必要があります。

ログアウトすると、SignedOutレイアウトが再び表示されるはずです。繰り返しますが、ユーザーはサインインしない限りSignedInレイアウトに戻ることはできません。

フォロー中

確認したい場合、または完成したコードをチェックアウトしたい場合は、GitHubでプロジェクトをチェックアウトしてください。開始するには、すべての画面が既にセットアップされているため、ルーティングロジックのみに焦点を当てます。

  • 開始コード
  • 完成したコード

アプローチ

アプリの概要を考えると、2つの「レイアウト」が必要であることがわかります。 SignedOutレイアウトはStackNavigatorで表すことができます。 SignedInレイアウトはTabNavigatorで表されます(代わりにDrawerNavigatorを簡単に使用できます)。

また、どの初期レイアウトを表示するかを決定する方法も必要です。これをアプリのプライマリエントリポイント(app / index.js)で処理します。ユーザーが以前にサインインしたかどうかを追跡するには、AsyncStorageを使用します。ログインするときに、それを記録するためのキーを設定します。

最後に、プライマリレイアウトを変更するために使用するルートSwitchNavigatorが必要です。

SignedOutレイアウトのセットアップ

まず、SignedOutレイアウトを設定します。 app / router.jsで、SignIn画面とSignUp画面を持つ新しいStackNavigatorを作成します。

アプリのエントリポイントでこのSignedOutコンポーネントを使用することもできます。

最後に、SignUp.jsを更新して、[サインイン]ボタンを押したときに、サインイン画面に移動します。

それはこのようなもので去るべきです

SignedInレイアウトのセットアップ

次に、SignedInレイアウト用にTabNavigatorを設定しましょう。

次に、それをエントリポイントからレンダリングします

以下を残して

サインイン状態の追跡

さまざまなレイアウトをまとめたので、まずapp / auth.jsで行われるログインロジックを処理しましょう。これは純粋にデモンストレーションのためです-明らかに、実際には実際の認証システムに接続したいでしょう。

onSignInおよびonSignOut関数については、AsyncStorageに書き込むか、AsyncStorageから削除しています。 isSignedIn関数でpromiseを返し、そのpromiseで「USER_KEY」の存在を確認します-存在する場合(ログインしていることを意味します)、promiseからtrueを解決し、そうでない場合はfalseを解決します。

すべてのログインロジックを1か所に保持するために、これらの抽象化を作成しました。

その後、app / index.jsを更新して、この情報を呼び出して使用し、レンダリングするレイアウトを決定します。

componentDidMountでisSignedIn関数を呼び出して、このユーザーが以前にログインしたかどうかを確認し、その情報でコンポーネントの状態を更新します。また、コンポーネントに、チェックを行い、その関数から応答が返されたことを伝えます。

次に、レンダリングメソッドでコンポーネントの状態を使用して、何をレンダリングするかを決定します。関数からの応答をまだ待っている場合は、nullをレンダリングするため、間違ったレイアウトのフラッシュはありません。残りは自明です。

Sign Up / InボタンとSign OutボタンはすでにonSignInおよびonSignUp関数を呼び出しているため、これをテストできます。ボタンを押しても何も表示されませんが、アプリを更新すると、新しいレイアウトが表示されます。

ルートナビゲータの構成

ルート用に新しいSwitchNavigatorを作成します。ただし、実際に新しいルートナビゲーターを返す関数を作成し、サインイン状態に応じて初期ルートを変更できます。

私のさまざまな「レイアウト」がこのナビゲーターの画面であることがわかります。大きな違いは、これを関数でラップし、関数のsignedIn引数によって初期ルートを決定することです。

そうすると、アプリのエントリポイントから呼び出すことができます。

これにより、ナビゲーターを使用するだけで、以前とまったく同じエクスペリエンスが得られます。

ここで、SignIn.jsまたはSignUp.jsでonSignInの呼び出しを更新して、返されたプロミスを解決した後、SignedInレイアウトに移動すると、次の相互作用が得られます。

そのためのコードは次のようになります

同様に、Profile.jsに対して反対のことができます

このアプローチについて注意したいことの1つは、nav状態と呼ばれるたびに失われるため、createRootNavigatorを呼び出すファイルの再レンダリングを意図的に意識しなければならないことです。

React Navigationを使用する場合、認証フローをどのように処理しますか?

React Nativeの他の一般的なタスクに対する私の戦略に興味がありますか?私の多くのReact Nativeコースのいずれかをチェックしてください!