Nuxt3 + Firebase Authenticationで認証機能を実装する

Nuxt3 + Firebase Authenticationで認証機能を実装する

Nuxt.js

前提の話

Firebaseの初期化の設定などはここでは省略します。今回はGoogleアカウントでの認証を例にメモ的な感じでまとめています。

実装としてはGoogleアカウントで認証し、登録情報をFirestoreに登録するといった流れです。

NuxtとFirebaseのバージョンは以下の通りです。

  • Nuxt: 3.0.0
  • Firebase: 9.15.0

 

Googleアカウントで認証する

Googleアカウントで登録する流れを実装していきます。

まずは登録するための画面をcomponentsに作成します。このコンポーネントはpagesで呼び出すイメージです。

「Googleで登録」のボタンを押下するとgoogleSignUpメソッドが呼び出されます。ここでのuseAuth()とgoogleSignUpメソッドは後ほど実装していきます。

・components/SignUpForm.vue

 

「Googleで登録」のボタンを押下したgoogleSignUpメソッドがここで呼ばれます。GoogleAuthProviderのインスタンスを作成し、signInWithPopupを呼び出すことで、Google認証にポップアップが表示されます。

Google認証が完了したら、そのデータを元にgetUserメソッドでFirestoreのデータを取得しにいきます。

既にFirestoreにデータがある場合は、認証完了済みなのでログイン画面に遷移させます。データがない場合は新規登録なので、新しくFirestoreにuserデータを登録し、mypage画面に遷移させます。

最後にupdateUserメソッドを呼び出し、useState() を使ってuserの状態管理をしています。alertのところはいい感じのポップアップかトーストを実装したいところです。

・composables/useAuth.ts

 

updateUserメソッドを使ってuserのstateの状態を管理しています。

認証後はuserのstateにUser情報を入れ、ログアウトなどの認証情報が破棄された場合はnullを入れます。

・composables/useUser.ts

 

認証状態のチェック

認証後のマイページに認証されていない場合はアクセスできないようにしたい場合、認証状態をチェックするなどの処理が必要になります。

その場合はmiddlewareで認証状態をチェックし、認証されていない場合はログインページに遷移させるなどの処理を実装します。

definePageMetaで指定してあげることで、このmiddlewareの処理が実行されます。

また、ログイン済みの場合にログインページを表示する場合は、マイページに遷移させるなどの処理も必要になるかと思います。

・middleware/auth.global.ts

 

全てのルートで実行したい処理がある場合は、Nuxt3のグローバルミドルウェアを使うことで実現できます。

.globalが付いたファイルは呼び出し処理を書かずに全てのルートで実行されます。

・middleware/auth-check.global.ts