質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

969閲覧

firebase-adminがNuxtのpluginで読み込めません

Daimian

総合スコア53

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/28 05:42

編集2020/01/28 05:45

前提・実現したいこと

Firebase (Hosting × Functions) × Nuxt.js (universal) で ユーザ認証のベストプラクティスを探る旅 その1

↑この内容を参考に、firebase-adminをnuxtで使い、登録されたユーザーのパスワードの変更を実装しようとしています。

上記リンクのpluginの通り、全く同じように該当のソースコードにあるような内容を実装しましたが、
エラー内容
このようなエラーが出てしまいます。

しかし、この該当のソースコード内にあるconsole.warnで記載している内容はターミナル上に出力されます。

なぜでしょうか?

該当のソースコード

plugins/firebase-admin.js

Javascript

1if (process.server) { 2 const admin = require('firebase-admin'); 3 console.warn('admin', admin); 4 5 if (!admin.apps.length) { 6 const serviceAccount = require('./service-account-key.json'); 7 8 admin.initializeApp({ 9 credential: admin.credential.cert(serviceAccount), 10 databaseURL: process.env.databaseURL 11 }); 12 } 13} 14 15export default admin

nuxt.config.js

Javascript

1module.exports = { 2 mode: 'universal', 3 buildDir: 'nuxt-dist/', 4 env: { 5 割愛 6 }, 7 /* 8 ** Headers of the page 9 */ 10 head: { 11 title: 割愛, 12 meta: [割愛] 13 }, 14 /* 15 ** Customize the progress-bar color 16 */ 17 loading: { color: '#fff' }, 18 /* 19 ** Global CSS 20 */ 21 css: [割愛], 22 /* 23 ** Plugins to load before mounting the App 24 */ 25 plugins: [ 26 '@/plugins/firebase-admin', 27   他割愛 28 ], 29 /* 30 ** Nuxt.js dev-modules 31 */ 32 buildModules: [ 33 ], 34 /* 35 ** Nuxt.js modules 36 */ 37 modules: [ 38 // Doc: https://axios.nuxtjs.org/usage 39 '@nuxtjs/axios', 40 '@nuxtjs/style-resources', 41 ], 42 styleResources: { 43 scss: [割愛] 44 }, 45 /* 46 ** Axios module configuration 47 ** See https://axios.nuxtjs.org/options 48 */ 49 axios: { 50 }, 51 /* 52 ** Build configuration 53 */ 54 build: { 55 publicPath: '/assets/', 56 transpile: [/^element-ui/], 57 /* 58 ** You can extend webpack config here 59 */ 60 extend (config, ctx) { 61 } 62 }, 63 router: { 64 middleware: [] 65 }, 66 serverMiddleware: [], 67 vue: { 68 config: { 69 productionTip: true, 70 devtools: true 71 } 72 } 73} 74

試したこと

スコープの問題かなと思い、

plugins/firebase-admin.js

const admin = require('firebase-admin'); if (process.server) { console.warn('admin', admin); if (!admin.apps.length) { const serviceAccount = require('./service-account-key.json') admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: process.env.databaseURL }) } } export default admin

このようにadminの宣言をスコープから外しましたがこれはこれで、firebase-adminはサーバーサイドのみ、読み込みができると言う制約にひっかかてしまい、エラーが発生してしまいます。

ヒントだけでもとても嬉しいです、また、同じようにNuxtとfirebase-adminでパスワード変更を実装されたと言う方、いらっしゃいましたら教えていただけるととても嬉しいです。

何卒、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

試してみたことに書かれているようにadminのスコープがifブロックにあるためエラーになります
関数を定義してその中で分岐させてreturnするのがシンプルな解決方法かと思います

以下のようにIIFEとして返り値を設定するなども可能です

js

1const admin = (function () { 2 if (process.server) { 3 const a = require('firebase-admin'); 4 5 if (!a.apps.length) { 6 const serviceAccount = require('./service-account-key.json'); 7 8 a.initializeApp({ 9 credential: a.credential.cert(serviceAccount), 10 databaseURL: process.env.databaseURL 11 }); 12 } 13 14 return a; 15 } 16})(); 17 18export default admin

投稿2020/01/28 13:58

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Daimian

2020/02/02 13:27

ありがとうございます!おかげさまで解決しました!とても参考になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問