【Firebase】ユーザーが認証されていない場合、ログイン画面へ遷移する方法
Firebase

【Firebase】ユーザーが認証されていない場合、ログイン画面へ遷移する方法

作成日:2022年02月28日
更新日:2022年03月01日

前回は、Firebase Authentication の機能を使って、React でログアウト機能を実装しました。

firebase-user-logout

【Firebase】Firebase Authenticationの機能を使って、Reactでログアウト機能を実装する

今回は、ユーザーが認証されていない場合、ログイン画面へ遷移します。

今のままでは、ログインできていなくてもホーム画面へアクセスできます。

ログインできていない場合、ログイン画面へリダイレクトします。

Home.tsx で、firebaseApp をインポートします。

tsx
import { firebaseApp } from "../firebase/firebaseConfig";

firebaseApp の中身はこちらです。

firebase-user-signup

【Firebase】Authenticationを使って、Reactでユーザー登録機能を実装する

getAuthの中のonAuthStateChangedを使うと、ログイン情報を取得できます。

また、userが null の場合、navigateを使って login へ遷移するようにします。

tsx
firebaseApp.fireauth.onAuthStateChanged((user) => {
if (!user) {
navigate("/login");
}
});

では、動作確認します。

ログアウトした状態で、ホーム画面へアクセスすると、

image2

ログイン画面へリダイレクトされました。

ログインしてみると、

image3

ホーム画面へ遷移しましたが、ログイン画面へリダイレクトされませんでした。

次回は、パスワード再設定機能を実装します。

firebase-react-password-reset

【Firebase】Reactでパスワード再設定機能を実装する

© 2024あずきぱんウェブスタジオ