Zenn
Closed6

Expo（React Native）+TypeScript+Firebaseでユーザー認証

Firebase
React Native
Expo
かるカンかるカン

React NativeでFirebase Autificationを使用して、ユーザー認証を実装していくメモ

かるカンかるカン

Firebase設定

Authentication

  • Firebaseのプロジェクトを開き、構築->Authenticationを表示する。
  • Sign-in methodで使用するログイン形式を選択する。今回はメールアドレス、Google、Appleを選択。
  • メールアドレスは、メールリンク認証を使用するので有効化する。
かるカンかるカン

メールリンク

Dynamic Links設定

メールリンクタップ後、再びアプリに戻ってくるために必要。
Firebaseコンソールで設定可能。

  • URL接頭辞を追加
    今回は、google提供の無料ドメインを設定
  • 認証済みドメインの追加
    Authentication > 承認済みドメインに設定したドメインを追加する
かるカンかるカン

React Native

Firebase関連のパッケージを追加

npm
npm install -d firebase

Firebaseの設定ファイルを作成

firebaseの設定ファイルを作成。
必要な情報はFirebaseのプロジェクトの設定で確認できる。（ページ下部にSDKの設定と構成という項目があり、構成を選択した時に表示される内容をコピペすれば問題ない）

firebase.ts
import firebase from 'firebase/app';
import 'firebase/auth';

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: API_KEY,
  authDomain: AUTH_DOMAIN,
  projectId: PROJECT_ID,
  storageBucket: STORAGE_BUCKET,
  messagingSenderId: MESSAGEING_SENDER_ID,
  appId: APP_ID,
  measurementId: MEASUREMENT_ID,
};

firebase.initializeApp(firebaseConfig);

ユーザ登録機能、ログイン機能を実装（メールアドレスログイン）

Firebaseの認証機能の動作を確認するため、メールアドレス形式でのログインを実装してみる。
今回はサインアップ、サインイン、サインアウトを実装。
ログイン画面から呼び出して使用。

firebase.ts
// 省略

// 現在ログインしているユーザーを取得するときに Auth オブジェクトが中間状態（初期化など）ではないことを確認
firebase.auth().onAuthStateChanged((user) => {
  if (user != null) {
    console.log('We are authenticated now!');
  } else {
    console.log('We are not autheticated now...');
  }
});

// ユーザ登録
export const signup = (email: string, password: string): void => {
  firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((user) => {
      if (user) {
        console.log('Success to Signup');
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

// メール＆パスワードログイン
export const signin = (email: string, password: string): void => {
  firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(() => {
      alert('Login Success!');
    })
    .catch((error) => {
      alert(error);
    });
};

// ログアウト
export const signout = (): void => {
  firebase.auth().onAuthStateChanged(() => {
    firebase
      .auth()
      .signOut()
      .then(() => {
        console.log('ログアウトしました');
      })
      .catch((error: string) => {
        console.log(`ログアウト時にエラーが発生しました (${error})`);
      });
  });
};
かるカンかるカン

GoogleSignIn

expoのGoogleSignInライブラリをインストール

npm
npx expo install expo-google-sign-in
このスクラップは2023/02/19にクローズされました