Closed6
Expo（React Native）+TypeScript+Firebaseでユーザー認証
かるカンReact NativeでFirebase Autificationを使用して、ユーザー認証を実装していくメモ
かるカン前提
- Firebaseでプロジェクトを作成済
かるカン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にクローズされました