【Nuxt.js,Firebase】ゲストログイン機能の実装

#はじめに
こんにちは！
今回は多くの方に私が開発したアプリに触れていただきたいと思い簡単にログインできるようゲストログイン機能の実装についてアウトプットしていきます！

#対象
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・firebaseを使用してのゲストログインを実装したい方
・既にユーザー登録、ログイン/ログアウト機能の実装がお済みの方。
（こちら参考記事）

##使用環境

使用技術	バージョン
nuxt.js	2.15.7
firebase	9.6.1
firebase-tools	9.23.3
@nuxtjs/tailwindcss	4.2.0

##使用ファイル,概要

ファイル名	概要
pages/login.vue	ゲストログイン機能、テンプレート表示
plugins/firerbase.js	firebase導入
store/index.js	ログインデータの管理&保持

#store/index.js

store/index.js

export const state = () => ({
    user: {
        email: "",
        userId: "",
        login: false
    }
});


export const actions = {
    async confirmLogin({ commit }) {
        await this.$auth.onAuthStateChanged(function (user) {
            if (user) {
                commit("getData", {
                    email: user.email,
                    userId: user.uid
                });
                commit("yesLogin");
            } else {
                commit("noLogin");
            }
        });
    }
};

export const mutations = {
    getData(state, payload) {
        state.user.email = payload.email;
        state.user.userId = payload.userId
    },
    yesLogin(state) {
        state.user.login = true;
    },
    noLogin(state) {
        state.user.login = false;
    },
    signOut(state) {
        state.user.email = "";
        state.user.login = false;
    }
};

既存のコードを使用。

#plugins/firebase.js

plugins/firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'; //ログイン

const firebaseConfig = {
//省略
};

firebase.initializeApp(firebaseConfig);

export default function (app, inject) {

  inject('firebase', firebase)
  inject('auth', firebase.auth())
}

firebase関数authをinjectする。pages上でthis.$authで実装可能になる。

#ゲストログイン実装

pages/login.vue

<template>
  <button
    @click="guestsLogin"
     class="
      text-base
      my-8
      md:text-xl
      h-16
      w-10/12
      bg-green-400
      hover:bg-green-500
      duration-1000
    "
  >
    ゲストログイン
  </button>
</template>

<script>
export default {
  methods: {
    guestsLogin() {
      this.$auth
        .signInAnonymously()
        .then(() => {
          alert("ログイン成功しました！");
          this.$store.dispatch("confirmLogin");
          this.$router.push("/top");
        })
        .catch((error) => {
          console.log(error);
          alert("ログインに失敗しました");
        });
    },   
  },
};
</script>

・firebaseの匿名ログイン関数signInAnonymouslyを使用する。（詳しくはこちら）
・既存のログイン成功した時に発火するconfirmLoginを使用。（各自バラバラ）
・remplate側でゲストログインボタンをクリックしたら発火されるよう@click="guestsLogin"で紐つける。

#DB側の設定
①firebaseのプロジェクトにアクセスし、「Authentication」→「Sing-in-method」を開く

②「新しいプロバイダを追加」をクリックし「匿名」を選択、有効にして保存

③完了

#まとめ
今回はゲストログイン機能の実装について記事にしました。
既にログイン、新規登録機能が実装されていれば比較的簡単に実装できますので試してみてください！

今後もQiitaにアウトプットしていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！