Firebase
【Firebase】ユーザーが認証されていない場合、ログイン画面へ遷移する方法
作成日：2022年02月28日
更新日：2022年03月01日
前回は、Firebase Authentication の機能を使って、React でログアウト機能を実装しました。
【Firebase】Firebase Authenticationの機能を使って、Reactでログアウト機能を実装する
今回は、ユーザーが認証されていない場合、ログイン画面へ遷移します。
今のままでは、ログインできていなくてもホーム画面へアクセスできます。
ログインできていない場合、ログイン画面へリダイレクトします。
Home.tsx で、firebaseApp をインポートします。
tsx
import { firebaseApp } from "../firebase/firebaseConfig";
firebaseApp の中身はこちらです。
【Firebase】Authenticationを使って、Reactでユーザー登録機能を実装する
getAuthの中のonAuthStateChangedを使うと、ログイン情報を取得できます。
また、userが null の場合、navigateを使って login へ遷移するようにします。
tsx
firebaseApp.fireauth.onAuthStateChanged((user) => {
if (!user) {
navigate("/login");
}
});
では、動作確認します。
ログアウトした状態で、ホーム画面へアクセスすると、
ログイン画面へリダイレクトされました。
ログインしてみると、
ホーム画面へ遷移しましたが、ログイン画面へリダイレクトされませんでした。
次回は、パスワード再設定機能を実装します。
【Firebase】Reactでパスワード再設定機能を実装する
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら（Udemyの外部サイトへ遷移します）
