Nuxt.jsプロジェクトの作成

h-sakano.hatenablog.com

Firebaseプロジェクトの作成

https://console.firebase.google.comでFirebaseプロジェクトを作成することができます。

また、Authenticationの「ログイン方法」タブでメール/パスワードによる認証とGoogleログインを有効にしておきます。

f:id:h-sakano:20180919131722p:plain

Firebase SDKの準備

プロジェクトにfirebaseパッケージを追加します。

$ yarn add firebase

次に、先程作成したプロジェクトページから接続情報を取得します。プロジェクトページ上段の画像のボタンをクリックすると認証情報が表示できます。

f:id:h-sakano:20180919115616p:plain f:id:h-sakano:20180919120038p:plain

これを使用して初期化処理を書きます。

// ~/plugins/firebase.ts
import firebase from "firebase"

const config = {
  apiKey: "xxxx",
  authDomain: "xxxx",
  databaseURL: "xxxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx"
}
const googleProvider = new firebase.auth.GoogleAuthProvider()

export default !firebase.apps.length ? firebase.initializeApp(config) : firebase.app()
export { googleProvider }

他のファイルでfirebaseを使用したいときは、このファイルをimportするようにします。

import firebase from "~/plugins/firebase"

なお、googleProviderは、Firebase AuthenticationでGoogleログインを実装するための前準備です。詳細はhttps://firebase.google.com/docs/auth/web/google-signin?hl=jaを参照のこと。

サインアップ/サインイン用のページ作成

このページは以下のコンポーネントを含んでいます。

コンポーネント	機能
EmailSignup	メールアドレスとパスワードによるサインアップ
EmailSignin	メールアドレスとパスワードによるサインイン
GoogleSignin	Googleログイン

次の章からは、これらのコンポーネントを実装していきます。
なお、今回はCSSフレームワークとしてMaterializeを使用しています。

コンポーネントの実装

EmailとPasswordによるサインアップ

参考: https://firebase.google.com/docs/auth/web/password-auth?hl=ja

firebase.auth().createUserWithEmailAndPasswordにemailとpasswordを渡すだけでサインアップ処理が完了します。
メールアドレスやパスワードが不正の場合など、何かエラーが出た場合はcatchで捕捉できます。

EmailとPasswordによるサインイン

サインアップの時の似ていますが、clickした時の関数がサインイン用のものになっています。

Googleログイン

参考: https://firebase.google.com/docs/auth/web/google-signin?hl=ja

Googleログイン用のボタンはhttps://developers.google.com/identity/branding-guidelinesから拾ってこれます。

ログイン中のユーザー情報の保持

サインアップ/サインイン機能に関してはここまでの内容で完了ですが、実際にユーザー情報を使用するためには、ユーザー情報をどこかに保持しておかなければなりません。
今回はVuexストアを使って、ページ遷移のたびにユーザー情報を取得することにしました。

Vuexストアの準備

ユーザーを保持するためのVuexストアを作成します。モジュールモードで定義しています。

Vuex ストア - Nuxt.js

Do not mutate vuex store state outside mutation handlersエラーを無効にするため、strictモードはオフにします。

参考: Error: [vuex] Do not mutate vuex store state outside mutation handlers · Issue #1917 · nuxt/nuxt.js · GitHub

ページ遷移時にユーザー情報をセット

plugins/auth.tsを作成し、ページ遷移の際に、ユーザー情報をストアに設定するようにします。
https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed_in_userの通り、onAuthStateChangedを使用してログイン中のユーザー情報を取得します。

上記の処理がロード時に読み込まれるように、nuxt.config.jsに以下の設定を追加します。
このとき、クライアント側でのみ処理を行いたいため、ssr: falseを指定します。

  plugins: [
    { src: "~/plugins/auth.ts", ssr: false }
  ]

また、以下の部分はサインインが完了しているのにサインインページにアクセスしようとした際に、トップページにリダイレクトする処理となっています。

if (user) {
  if (to.name === "signin") {
    redirect("/")
  }
}

まとめ

今回はNuxt.jsとFirebase Authenticationで遊んでみました。

とても簡単に認証機能が実装できるFirebase Authenticationですが、実際のサービスを作るためにはFirestoreを使用してユーザーとデータを紐付ける必要があります。
今回でFirebase Authenticationは全貌は掴めたので、次回はFirestoreも触れたら良いなと思います。

Web系エンジニアのアウトプット練習場

エンジニアリングのことはもちろん、全然関係無い話もします。

Nuxt.js + TypeScriptでFirebase Authenticationを使ってみる