[Advent Calendar 2021][Day12]Firebase Authenticationを利用してユーザ登録・削除機能を作る

undefined
はじめに
Advent Calendar 2021のDay12。 今回は、Firebase Authenticationを利用してユーザ登録・削除機能を作ります。
firebaseプロジェクトを作成する
FirebaseプロジェクトをFirebaseのコンソールから作成する。
プロジェクト名には、すでに作成しているGCPプロジェクトを指定します。
表示されたfirebaseConfig
をenv.development.ts
にコピーします。先頭にexportをつけておき、後ほどimportします。
- nuxt3-app/env.development.ts
export const firebaseConfig = { apiKey: "xxx", // 省略};
firebaseをインストールする
yarn add firebase
firebaseのPluginを作成する
env.development.ts
を読み込めるようnuxt.config.ts
を修正します。
- nuxt3-app/nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'+import { firebaseConfig } from './env.development'// https://v3.nuxtjs.org/docs/directory-structure/nuxt.configexport default defineNuxtConfig({ publicRuntimeConfig: { graphqlURL: process.env.GRAPHQL_URL,+ firebaseConfig },})
今回は、ユーザ登録削除機能をつくります。また、ログイン・ログアウト機能もつくります。ユーザ登録は、SignInにより自動的にFirebaseAuthenticationによりユーザ登録されます。StateにToken
とUser
を保存します。
- nuxt3-app/plugins/firebase.ts
import { initializeApp } from "firebase/app";import { getAuth, signInWithPopup, signOut, deleteUser, GoogleAuthProvider, UserCredential } from "firebase/auth";import { defineNuxtPlugin } from '#app'import { ref } from "vue";export default defineNuxtPlugin(nuxt => { const { vueApp } = nuxt // Initialize Firebase initializeApp(nuxt.$config.firebaseConfig); const auth = getAuth() const provider = new GoogleAuthProvider(); // state const tokenState = useState('token', () => null) const userState = useState('user', () => null) if (process.client) { auth.onAuthStateChanged(async (user) => { if (user) { console.log('loggedIn') userState.value = user user.getIdToken().then(token => { tokenState.value = token }) } else { console.log('loggedOut') userState.value = null tokenState.value = null } }) } // provide firebase const firebase: FirebasePlugin = { signIn: () => { return signInWithPopup(auth, provider) }, signOut: () => { return signOut(auth) }, deleteUser: () => { return deleteUser(auth.currentUser) } } nuxt.provide('firebase', firebase) vueApp.provide('$firebase', ref(firebase))})interface FirebasePlugin { signIn: () => Promise<UserCredential> signOut: () => Promise<void> deleteUser: () => Promise<void>}declare module '#app' { interface NuxtApp { $firebase: FirebasePlugin }}
urqlにTokenを設定する
useStateを使って、Tokenを設定します。
const client = createClient({ url: nuxt.$config.graphqlURL,+ fetchOptions: () => {+ if (process.client) {+ const token = useState('token').value+ return {+ headers: { authorization: token ? `Bearer ${token}` : '' },+ };+ }+ return {}+ },+ exchanges: [ dedupExchange, ssr,
参考
https://formidable.com/open-source/urql/docs/basics/vue/#setting-up-the-client
pageにログイン・ログアウト機能を追加する
<em>no results</em> </div> </div>+ <button v-if="!user" @click="nuxtApp.$firebase.signIn()">login</button>+ <template v-else>+ <button @click="nuxtApp.$firebase.signOut()">logout</button>+ <button v-if="user" @click="nuxtApp.$firebase.deleteUser()">deleteUser</button>+ </template> </section></template><script setup lang="ts">import { MyQueryDocument } from "~/gql/queries/calendar";import { useClientHandle } from "@urql/vue";+import { useNuxtApp } from '#app'const urql = useClientHandle();const { data, fetching } = await urql.useQuery({ query: MyQueryDocument })+const nuxtApp = useNuxtApp()+const user = useState<boolean>('user')</script>
まとめ
今回は、Firebase Authenticationを利用してユーザ登録・削除機能を作りました。 次回は、HasuraGraphQLの認可機能を使って権限を制御します。
