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

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

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

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

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

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

firebaseApp の中身はこちらです。

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

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

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

では、動作確認します。

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

image2

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

ログインしてみると、

image3

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

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

ブログ一覧