ExcelとFireBaseによる電子メールとパスワードベースの認証

これは、エキスポメールとパスワードベースの認証エキスポとFireBaseを使用して、ブログの記事のシリーズの一部1/3です.

Part 1 :プロジェクトのセットアップ

しばらくの間、私はすぐに電子メールとパスワードベースの認証フローを設定するために私の移動ツールとしてFireBaseを使用しているときにEXPOで働いている.そこに他の多くの解決策がある間、私はまだ私がFirebaseがそうであるように速く始められるのを許す1つを見つけません.
ブログの記事のこのシリーズの目標は、電子メールやパスワードベースの認証とEXPOとFireBaseを設定する方法の簡単な例を提供することです.完了すると、このアプリは、サインアップ、サインイン、サインアウトをサポートし、電子メールの検証、パスワードを忘れて、パスワードを更新します.ブログ記事のこのシリーズのためのすべてのコードは、利用できますthis Github repository . 右にジャンプしましょう.

新しい博覧会アプリを作成
既に実行されていない場合は、実行してExponpm install --global expo-cli アプリケーションが作成できるように.次に、実行して新しいアプリケーションを作成しますexpo init --npm と空白のテンプレートを選択します.今すぐアプリケーションを提供することができますnpm start そして、ローカルまたはデバイス/シミュレータのあなたの好みのオープンしました.シンプルのために、私はそれを介して実行されますReact Native for web , これは万博SDKのボックスから動作します.これを行うには、単にプレスw EXPO CLIを実行しているターミナルで.
万博CLIオプションは、アプリケーションを開きます.
すべてがスムーズに行ったと仮定して、新しく作成された博覧会のアプリはhttp://localhost:19006/ , それが身近な歓迎メッセージを表示する場所.

Firebaseプロジェクトを作成する
FireBaseアカウントに移動し、新しいプロジェクトを作成します.プロジェクトが作成されると、サイドバー“認証”メニュー項目をクリックし、“電子メール/パスワード”プロバイダを有効にします.
“電子メール/パスワード”FireBase認証プロバイダーを有効にします.
次に、プロジェクトの設定に移動し、プロジェクトのWebアプリケーションを登録します.
Webアプリケーションを登録するWebアプリケーションプラットフォームを選択します.
最後に、FireBase SDKをWebアプリケーションに追加します(この設定は、後でEXPOプロジェクトのFireBaseアプリケーションを初期化するために使用されます).
Firebase SDKの設定例.

エキスポとFirebaseの設定
これは、万博アプリでFireBaseプロジェクトの設定を使用する時間です.そのためには、まず実行してFirebase SDKをインストールしますexpo install firebase . また、インストールreact-native-dotenv 走ることでnpm install react-native-dotenv , ので、環境変数を介してアプリケーションでインポートすることができます.env ファイル.次に、module:react-native-dotenv デフォルトのEXPOへのプラグインbabel.config.js ファイル.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv'], // Add this
    ],
  };
};

babel.config.js 設定ファイル.
作成する.env 実行しているプロジェクトのルートディレクトリのファイルtouch .env , そして、正しいfirebase SDK設定の詳細を入力します.私は彼らを接待したFIREBASE_ それで、これらが何であるかは明らかです.

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=

例.env ファイル.Firebase SDK Webアプリケーションプロジェクトの設定を入力します.
実行してアプリケーションのAPIディレクトリを作成するmkdir -p src/api とその中のインデックスファイルtouch src/api/index.js . これは、FireBaseアプリが初期化される場所です.これを行うには、環境変数を使用します.

import firebase from 'firebase';
import {
  FIREBASE_API_KEY,
  FIREBASE_AUTH_DOMAIN,
  FIREBASE_PROJECT_ID,
  FIREBASE_STORAGE_BUCKET,
  FIREBASE_MESSAGING_SENDER_ID,
  FIREBASE_APP_ID,
} from '@env'

const firebaseConfig = {
  apiKey: FIREBASE_API_KEY,
  authDomain: FIREBASE_AUTH_DOMAIN,
  projectId: FIREBASE_PROJECT_ID,
  storageBucket: FIREBASE_STORAGE_BUCKET,
  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
  appId: FIREBASE_APP_ID,
};

firebase.initializeApp(firebaseConfig);

最後に、このファイルをインポートしますApp.js (ルートディレクトリにあります):

import './src/api'; // Import the Firebase API configuration file
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// Rest of the file omitted...

アプリケーションの構造と依存性
アプリケーションを簡素化するために、以下のライブラリを使用します.これらのライブラリのどれも技術的に必要とされていないことに注意してください.

NativeBase : モバイル最初、アクセスネイティブのネイティブ＆ウェブのコンポーネント.

npm install native-base styled-components styled-system
expo install react-native-svg
expo install react-native-safe-area-context

Formik : フォームの作成、管理、および状態の検証.

npm install formik

Yup : 値解析と検証のためのスキーマビルダwhich integrates nicely with Formik ).

npm install yup

React Navigation : ルーティングとナビゲーションエキスポとネイティブアプリの反応.

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context

では、「アプリケーション構造」を作りましょう.アプリケーション構造は、各機能(すなわち、サインアップ、電子メールの検証など)がディレクトリ内に含まれている“機能ベース”アプローチを使用します.

src/
  Root.js
  api/ # API-only methods (Firebase)
  components/ # Re-usable components (among many features)
  features/
    sign-up/
      components/ # Components used by the sign-up feature only
      screens/ # Container type component(s) which setup layout/structure and higher level logic

最初のステップはRoot.js ファイル.これを行うにはApp.js 走ることでcp App.js src/Root.js , その後App.js ( rm App.js ), と更新package.json そうするファイルmain ポイントsrc/Root.js :

"main": "src/Root.js"

次に、Root.js Firebase APIをインポートするにはnative-base プロバイダ、およびルートEXPOコンポーネントを登録します.

import './api';
import { registerRootComponent } from 'expo';
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NativeBaseProvider, Box } from 'native-base';

const Root = () => (
  <NativeBaseProvider>
    <Box>Hello world</Box>
    <StatusBar style="auto" />
  </NativeBaseProvider>
);

registerRootComponent(Root);

実行して、再度EXPOサーバーを起動しますnpm start そして、「Hello World」メッセージが正しく示されることを確認してください.

キャップ
このブログのポストでは、電子メールとパスワードベースの認証システムを実装するゴールと共に、EXPOとFireBaseをセットアップしました.また、ライブラリの一般的なセットがインストールされ、セットアップが簡単にアプリが必要になります今後の機能を実装するために.次のブログ記事では、サインアップ、電子メールの検証、およびサインアウト機能を実装します.