Nuxt.jsを勉強しているものです。
Nuxt.jsのWebアプリケーションでFirebaseの認証ユーザーの一覧を取得する処理を実装しようとしています。
作業手順
①プロジェクト作成
yarn create nuxt-app sample
②firebase-adminをインストール
npm install firebase-admin --save
③plugins配下にfirebaseAdmin.jsを作成
plugins/firebaseAdmin.js
js
1const admin = (function () { 2 if (process.server) { 3 const a = require('firebase-admin'); 4 if (!a.apps.length) { 5 const serviceAccount = require('../key.json'); 6 a.initializeApp({ 7 credential: a.credential.cert(serviceAccount), 8 databaseURL: 'XXXXXXXXXX' 9 }); 10 } 11 return a; 12 } 13})(); 14export default admin
④index.vueでユーザー一覧取得処理を呼び出す。
index.vue
vue
1<template> 2 <div class="container"> 3 <div> 4 <Logo /> 5 <h1 class="title"> 6 sample 7 </h1> 8 <div class="links"> 9 <a 10 href="https://nuxtjs.org/" 11 target="_blank" 12 rel="noopener noreferrer" 13 class="button--green" 14 > 15 Documentation 16 </a> 17 <a 18 href="https://github.com/nuxt/nuxt.js" 19 target="_blank" 20 rel="noopener noreferrer" 21 class="button--grey" 22 > 23 GitHub 24 </a> 25 </div> 26 </div> 27 </div> 28</template> 29 30<script> 31import admin from '~/plugins/firebaseAdmin' 32export default { 33 data() { 34 return { 35 } 36 }, 37 mounted() { 38 const listAllUsers = (nextPageToken) => { 39 // List batch of users, 1000 at a time. 40 admin 41 .auth() 42 .listUsers(1000, nextPageToken) 43 .then((listUsersResult) => { 44 listUsersResult.users.forEach((userRecord) => { 45 console.log('user', userRecord.toJSON()); 46 }); 47 if (listUsersResult.pageToken) { 48 // List next batch of users. 49 listAllUsers(listUsersResult.pageToken); 50 } 51 }) 52 .catch((error) => { 53 console.log('Error listing users:', error); 54 }); 55 }; 56 // Start listing users from the beginning, 1000 at a time. 57 listAllUsers(); 58 59 }, 60} 61</script> 62 63<style> 64.container { 65 margin: 0 auto; 66 min-height: 100vh; 67 display: flex; 68 justify-content: center; 69 align-items: center; 70 text-align: center; 71} 72 73.title { 74 font-family: 75 'Quicksand', 76 'Source Sans Pro', 77 -apple-system, 78 BlinkMacSystemFont, 79 'Segoe UI', 80 Roboto, 81 'Helvetica Neue', 82 Arial, 83 sans-serif; 84 display: block; 85 font-weight: 300; 86 font-size: 100px; 87 color: #35495e; 88 letter-spacing: 1px; 89} 90 91.subtitle { 92 font-weight: 300; 93 font-size: 42px; 94 color: #526488; 95 word-spacing: 5px; 96 padding-bottom: 15px; 97} 98 99.links { 100 padding-top: 15px; 101} 102</style> 103
⑤サーバー起動
yarn run dev
⑥アプリケーションにアクセスする
http://localhost:3000/
アプリケーションにアクセスすると「Cannot read property 'auth' of undefined」と表示されてしまいます。
解決方法について探していますが、なかなか解決できません。
Firebase Admin SDKの初期化手順が間違っているのでしょうか?
そもそもnuxtアプリケーションにFirebase Admin SDKを導入することはできないのでしょうか?
Firebaseに詳しい方がいましたら、ご回答いただけないでしょうか
よろしくお願いいたします。
あなたの回答
tips
プレビュー