皆さんこんにちは！
今回はBaaSであるFirebaseを使って
メールアドレスログインを実装します！
前回挙げた記事がとても分かりにくかったと思うので
今回はログイン機能のみに絞っています。
登録自体はFirebase Consoleからのみできる仕様でいきます！
↑こうすればFirebase Consoleにアクセスできる人しかログインできないし
新規登録自体は済んだ状態と同じ状態を作れます。
Firebase ConsoleのAuthenticationページを使いますので
ご準備の方お願いいたします。
目次
1.FirebaseConsoleにてプロジェクトの追加
次にプロジェクトを作成します。
トップ画面に「プロジェクトを追加」があるので
そこをタップすれば追加できます。
名前はなんでも大丈夫です。
2.FirebaseConsoleでユーザー登録
新規登録と同じ状態を再現したいので
FirebaseConsoleに移ってもらって
Authenticationを開いてください。
そこで「ユーザーを追加」を押して
メールアドレスとパスワードを登録してください。
登録が完了しましたら新規登録完了となります。
3.api key登録
次にReactの方にAPI Keyなどを登録します。
※React側でfirebaseをyarn(npm)するのを忘れないように
プロジェクトの設定ページにAPI Keyなどの情報が載ってますので
それをコピーしましょう！
4.firebase.tsの作成
typescriptを使っているのでtsになっています。
firebase.tsを作成し中に以下のように記載します。
const config = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};※私はenvファイルに保存しているので上記のようになっています。
firebase.tsは初期化やデータベースとの接続を行う場所なので
まずは初期化し firebase.auth()をexportしておきます。
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
//この1行はdatabaseを使わないなら必要ないです
let database = firebase.database();
const auth = firebase.auth();
export { auth, firebase, database };5.ログイン処理を書く
pagesに書いたコードは以下の通りです
/**
* ログイン処理を走らせて所定のページへ遷移させる関数
* @return なし
*/
const loginOnClick = () => {
//firebaseに問い合わせてログイン、成功すると画面遷移させる
auth
.signInWithEmailAndPassword(mail, pass)
.then(async () => {
// Signed in
if (!isSafariOrIE()) {
router.replace("/roomMaking");
}
})
.catch((error) => {
addToast("メールアドレスもしくはパスワードが違います。", {
appearance: "error",
autoDismiss: true,
});
});
};firebase.auth().signInWithEmailAndPassword(mail,pass)で
mailとpassが新規登録したことのある情報であれば
次の画面の遷移するようにしてます。
違えばエラーが吐き出されます。
6.Firebaseにログインしているか問い合わせる
Firebaseにユーザーがログインしているか問い合わせる処理は
必要になるケースが多いです。
例えば外部に漏れてはいけない情報のあるページに飛ぶときなど
問い合わせることが必要になったりします。
そんな時に使えるメソッドがこちらです。
/**
* firebaseにログインしているかどうかを確認する
* @return boolean
*/
export const isSignedIn = async (): Promise<boolean> => {
return await new Promise((resolve, reject) => {
auth.onAuthStateChanged((user) => {
if (user) {
resolve(true);
} else {
resolve(false);
}
});
});
};7.強制ログアウトさせる関数
画面から離れるときなどユーザーをログアウトさせたいタイミングがあると思います。
その場所では以下のメソッドを使えば解決できます。
/** * ログアウトさせる関数 * @return なし */ const logoutOnclick = () => { auth.signOut().then(() => { localStorage.removeItem("name"); setUserStatus("logout"); addToast("ログアウトしました", { appearance: "success", autoDismiss: true, }); }); };
これで以上です！
最後までお読みいただきありがとうございました！