Merge pull request #59 from yukia3/features/issue-58

#58 Add Firebase Auth Modules

Author: yukia3e

nuxt.config.ts

@@ -115,6 +115,18 @@ const config: NuxtConfig = {
     // https://baianat.github.io/vee-validate/examples/nuxt.html
     transpile: ['vee-validate/dist/rules'],
   },
+  serverMiddleware: ['~/api/auth'],
+  pwa: {
+    workbox: {
+      offline: false,
+      importScripts: [
+        'https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js',
+        'https://www.gstatic.com/firebasejs/7.2.1/firebase-auth.js',
+      ],
+      workboxExtensions: ['~/sw/firebase'],
+      dev: true,
+    },
+  },
 }
 
 export default config

package.json

@@ -34,6 +34,7 @@
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "date-fns": "^2.16.1",
     "firebase": "^7.20.0",
+    "firebase-admin": "^9.2.0",
     "nuxt": "^2.14.0",
     "nuxt-buefy": "^0.3.31",
     "vee-validate": "^3.3.11"

src/api/auth.js

@@ -0,0 +1,45 @@
+const admin = require('firebase-admin')
+
+// The Firebase Admin SDK is used here to verify the ID token.
+if (!admin.apps.length) {
+  admin.initializeApp({
+    credential: admin.credential.applicationDefault(),
+    databaseURL: process.env.DATABASEURL,
+  })
+}
+
+function getIdToken(req) {
+  // Parse the injected ID token from the request header.
+  const authorizationHeader = req.headers.authorization || ''
+  const components = authorizationHeader.split(' ')
+  return components.length > 1 ? components[1] : ''
+}
+
+export default async function (req, _res, next) {
+  // /_nuxt/以下ファイルで実行しない
+  if (req.url.includes('_nuxt')) {
+    return next()
+  }
+
+  const idToken = getIdToken(req)
+
+  if (idToken) {
+    try {
+      const decodedClaims = await admin.auth().verifyIdToken(idToken)
+
+      // 最新のUserData取得
+      const userData = await admin.auth().getUser(decodedClaims.uid)
+      if (userData) {
+        const data = userData.toJSON()
+        delete data.passwordHash
+        delete data.passwordSalt
+        delete data.tokensValidAfterTime
+        req.authUser = data
+      }
+    } catch (e) {
+      delete req.authUser
+    }
+  }
+
+  next()
+}

src/store/index.ts

@@ -0,0 +1,9 @@
+export const actions = {
+  async nuxtServerInit({ dispatch }: any, { req }: any) {
+    const user = req.authUser || null
+
+    if (user) {
+      await dispatch('serverAuth/saveUID', user.uid)
+    }
+  },
+}

src/store/serverAuth/index.ts

@@ -0,0 +1,12 @@
+export const state = () => ({
+  uid: '',
+})
+
+export const mutations = {
+  saveUID(state: any, uid: string) {
+    state.uid = uid
+  },
+  clearUID(state: any) {
+    state.uid = ''
+  },
+}

src/sw/firebase.js

@@ -0,0 +1,85 @@
+import firebase from '../plugins/firebase'
+
+/**
+ * Returns a promise that resolves with an ID token if available.
+ * @return {!Promise<?string>} The promise that resolves with an ID token if
+ *     available. Otherwise, the promise resolves with null.
+ */
+const getIdToken = () => {
+  return new Promise((resolve) => {
+    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
+      unsubscribe()
+      if (user) {
+        user.getIdToken().then(
+          (idToken) => {
+            resolve(idToken)
+          },
+          () => {
+            resolve(null)
+          }
+        )
+      } else {
+        resolve(null)
+      }
+    })
+  })
+}
+
+const getOriginFromUrl = (url) => {
+  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
+  const pathArray = url.split('/')
+  const protocol = pathArray[0]
+  const host = pathArray[2]
+  return protocol + '//' + host
+}
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.url.includes('firebasestorage.googleapis.com')) {
+    return
+  }
+
+  const requestProcessor = (idToken) => {
+    let req = event.request
+    // For same origin https requests, append idToken to header.
+    if (
+      self.location.origin === getOriginFromUrl(event.request.url) &&
+      (self.location.protocol === 'https:' ||
+        self.location.hostname === 'localhost') &&
+      idToken
+    ) {
+      // Clone headers as request headers are immutable.
+      const headers = new Headers()
+      for (const entry of req.headers.entries()) {
+        headers.append(entry[0], entry[1])
+      }
+      // Add ID token to header.
+      headers.append('authorization', 'Bearer ' + idToken)
+      try {
+        req = new Request(req.url, {
+          method: req.method,
+          headers,
+          mode: 'same-origin',
+          credentials: req.credentials,
+          cache: req.cache,
+          redirect: req.redirect,
+          referrer: req.referrer,
+          body: req.body,
+          bodyUsed: req.bodyUsed,
+          context: req.context,
+        })
+      } catch (e) {
+        // This will fail for CORS requests. We just continue with the
+        // fetch caching logic below and do not pass the ID token.
+      }
+    }
+    return fetch(req)
+  }
+  // Fetch the resource after checking for the ID token.
+  // This can also be integrated with existing logic to serve cached files
+  // in offline mode.
+  event.respondWith(getIdToken().then(requestProcessor, requestProcessor))
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(clients.claim())
+})