Merge pull request #70 from lupas/dev

added getAuthUserFromCookie() and SSR feature for firebase auth

Author: lupas

packages/docs/.vuepress/config.js

@@ -10,6 +10,7 @@ module.exports = {
       '/getting-started/',
       '/options/',
       '/usage/',
+      '/helpers/',
       '/advanced/',
       '/demo/'
     ],

packages/docs/advanced/README.md

@@ -1,31 +1,49 @@
 # Advanced
 
-## Helpers
+## Firebase Auth in Universal Mode
 
-Nuxt-Fire provides helper functions that can generally be accessed like so:
+The nuxt-fire plugin provides helpers for the easy setup of **server-side authentication** via WebTokens and Cookies for Firebase Auth in **Nuxt Universal Mode (SSR)**.
 
-```js
-import { **helperFunctionName** } from 'nuxt-fire/src/helpers'
-```
+#### Step 1 - Initialize Firebase Auth
 
-### movePluginBeforeInitAuthPlugin(plugins, pluginName)
+Use the [auth.initialize option](/options/#auth) with at least `onSuccessMutation` and `setAuthCookie = true` defined. Make sure to create the respective mutation that saves the authUser to the state.
 
-If the initAuth config is set, nuxt-fire will add two (instead of one) plugins to your Nuxt application:  
-**nuxt-fire/plugins/main.js** and **nuxt-fire/plugins/initAuth.js**.
+#### Step 2 - Add the getAuthUserFromCookie() helper
 
-If you use initAuth and want another plugin to be called AFTER firebase initialization but BEFORE initAuth gets called, you can use this helper function to move the other plugin inbetween these two.
-
-Just add the following to your nuxt.config.js:
+Add the `getAuthUserFromCookie()` helper function as follows to your nuxtServerInit action and commit the authUser object to the mutation defined in step 1.
 
 ```js
-import { movePluginBeforeInitAuthPlugin } from 'nuxt-fire/src/helpers'
+import { getAuthUserFromCookie } from 'nuxt-fire/src/helpers'
+
+export default {
+  nuxtServerInit({ commit }, ctx) {
+    const authUser = getAuthUserFromCookie({ commit, req: ctx.req })
+    if (authUser) {
+      commit('SET_AUTH_USER', {
+        authUser
+      })
+    }
+  }
+}
+```
 
-extendPlugins(plugins) {
-  movePluginBeforeInitAuthPlugin(plugins, 'yourPluginName.js')
-  return plugins
-},
+#### Step 3 - Delete cookie at logout
+
+Make sure to delete the cookie at logout, e.g. in an action:
+
+```js
+import Cookie from "js-cookie";
+
+async logoutUser({ commit }) {
+    await this.$fireAuth.signOut()
+    // Reset store
+    commit("RESET_STORE");
+    // ADD THIS LINE
+    Cookie.remove("nuxt_fire_auth_access_token");
+  }
+}
 ```
 
 ## Usage with vuexfire
 
-This [example](https://github.com/lupas/nuxt-fire-vuexfire-example) shows how to use both vuexfire and nuxt-fire together.
+This [example](https://github.com/lupas/nuxt-fire-vuexfire-example) shows how to use both vuexfire and nuxt-fire together, working with SSR.

packages/docs/helpers/README.md

@@ -0,0 +1,37 @@
+# Helpers
+
+Nuxt-Fire provides helper functions that can generally be accessed like so:
+
+```js
+import { **helperFunctionName** } from 'nuxt-fire/src/helpers'
+```
+
+## movePluginBeforeInitAuthPlugin()
+
+If the initAuth config is set, nuxt-fire will add two (instead of one) plugins to your Nuxt application:  
+**nuxt-fire/plugins/main.js** and **nuxt-fire/plugins/initAuth.js**.
+
+If you use initAuth and want another plugin to be called AFTER firebase initialization but BEFORE initAuth gets called, you can use this helper function to move the other plugin inbetween these two.
+
+Just add the following to your nuxt.config.js:
+
+```js
+import { movePluginBeforeInitAuthPlugin } from 'nuxt-fire/src/helpers'
+
+extendPlugins(plugins) {
+  movePluginBeforeInitAuthPlugin(plugins, 'yourPluginName.js')
+  return plugins
+},
+```
+
+## getAuthUserFromCookie()
+
+Parses the request cookie named `nuxt_fire_auth_access_token` in the nuxtServerInit action and returns an authUser object, if user is signed in.
+
+For usage see [here](/advanced/#firebase-auth-in-universal-mode).
+
+```js
+import { getAuthUserFromCookie } from 'nuxt-fire/src/helpers'
+// in nuxtServerInit
+const authUser = getAuthUserFromCookie(req)
+```

packages/docs/options/README.md

@@ -130,8 +130,6 @@ Preloads dynamically loaded services. More information [here](https://webpack.js
 Only applies if `static === false`.
 :::
 
-
-
 #### chunkName
 
 Be default, the dynamically imported services are named `vendors.firebase-${serviceName}.js` in development mode, and `[id]` in production mode (`process.env.NODE_ENV === 'production'`). If you want to change this behaviour, you can do so with this option.
@@ -157,17 +155,14 @@ auth: {
     onSuccessMutation: 'ON_SUCCESS_MUTATION',
     onSuccessAction: null,
     onErrorMutation: null,
-    onErrorAction: 'onErrorAction'
+    onErrorAction: 'onErrorAction',
+    setAuthCookie: false // default
   }
 }
 ```
 
 #### initialize <Badge text="EXPERIMENTAL" type="warn"/>
 
-::: warning <Badge text="EXPERIMENTAL FEATURE" type="warn"/>
-This feature is experimental and has not been fully tested for all cases. Use it with care and don't use it in production environemnts. It might get changed completely in future updates. If you have any issues or questions for this feature please feel free to create an issue [here](https://github.com/lupas/nuxt-fire/issues) to help us improve it.
-:::
-
 This sets up SSR-ready `onAuthStateChanged()` without any effort.
 
 Just add a mutation/action to your vuex store that handles what to do with the authUser object (e.g. save it to the state or get user data from FireStore) and then define the name of the action/mutation in the initAuth configuration as below
@@ -192,20 +187,23 @@ onErrorAction: (ctx, error) => {
 }
 ```
 
+The `setAuthCookie = true` option sets a cookie after every `onAuthStateChanged()` trigger. The cookie can be used for server-side authentication as described [here](/advanced/#firebase-auth-in-universal-mode).
+
 ::: warning
 Do not save `authUser` directly to the store, since this will save an object reference to the state which gets directly updated by Firebase Auth periodically and therefore throws a `vuex` error if `strict != false`.
 
 ```js
 export const mutations = {
-    onSuccessMutation: (state, { authUser, claims }) => {
-        // Don't do this:
-        state.user = authUser,
-        // Do this:
-        state.user.id = authUser.uid,
-        state.user.email = authUser.email
-    }
+  onSuccessMutation: (state, { authUser, claims }) => {
+    // Don't do this:
+    state.user = authUser
+    // Do this:
+    state.user.id = authUser.uid
+    state.user.email = authUser.email
+  }
 }
 ```
+
 :::
 
 ### firestore
@@ -269,7 +267,7 @@ More information [here](https://firebase.google.com/docs/functions/locations).
 
 Sets up `useFunctionsEmulator("http://localhost:EMULATOR_PORT")` to point to a Cloud Functions emulator running locally instead of the productive one.
 
-More information in the official Firebase [API Docs](https://firebase.google.com/docs/reference/android/com/google/firebase/functions/FirebaseFunctions.html#useFunctionsEmulator(java.lang.String)) and [Functions Docs](https://firebase.google.com/docs/functions/local-emulator).
+More information in the official Firebase [API Docs](<https://firebase.google.com/docs/reference/android/com/google/firebase/functions/FirebaseFunctions.html#useFunctionsEmulator(java.lang.String)>) and [Functions Docs](https://firebase.google.com/docs/functions/local-emulator).
 
 ### storage
 

packages/nuxt-fire/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-fire",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "license": "MIT",
   "description": "Intergrate Firebase into your Nuxt project.",
   "main": "src/index.js",
@@ -19,6 +19,9 @@
     "firebase": "^7.5.0"
   },
   "dependencies": {
+    "cookieparser": "^0.1.0",
+    "js-cookie": "^2.2.1",
+    "jwt-decode": "^2.2.0",
     "lodash": "^4.17.15"
   }
 }

packages/nuxt-fire/src/helpers/index.js

@@ -1,7 +1,12 @@
-export function movePluginBeforeInitAuthPlugin(plugins, pluginName) {
-  // Moves a plugin that needs access to $this.fireFOO but needs to get run BEFORE nuxt-auth in between the nuxt-fire and the auth plugin.
-  // This function needs to be applied in extendPlugins in nuxt.config.js.
+import cookieparser from 'cookieparser'
+import JWTDecode from 'jwt-decode'
 
+/**
+ * Moves a plugin that needs access to $this.fireFOO but needs to get run BEFORE
+ * nuxt-auth in between the nuxt-fire and the auth plugin.
+ * This function needs to be applied in extendPlugins in nuxt.config.js.
+ */
+export function movePluginBeforeInitAuthPlugin(plugins, pluginName) {
   const indexOfPluginToMove = _getPluginIndex(plugins, pluginName)
   const indexOfNuxtFirePlugin = _getPluginIndex(plugins, 'nuxt-fire/main')
 
@@ -34,3 +39,29 @@ function _getPluginIndex(plugins, pluginName) {
   }
   return plugins.findIndex((x) => includesPlugin(x))
 }
+
+/**
+ * Parses the request cookie and returns an authUser, if user is signed in.
+ */
+export function getAuthUserFromCookie({ req }) {
+  if (process.server && process.static) return
+  if (!req.headers.cookie) return
+
+  const cookie = cookieparser.parse(req.headers.cookie)
+  const accessWebToken = cookie.nuxt_fire_auth_access_token
+
+  if (!accessWebToken) return
+
+  const decodedAuthUser = JWTDecode(accessWebToken)
+  // Note: Not the same authUser Object as .currentUser from the Firebase Auth SDK.
+
+  // Trying to "recreate" the authUser object as similarly as possible
+  // from available data we received from the web token:
+  const authUser = {
+    uid: decodedAuthUser.user_id,
+    email: decodedAuthUser.email,
+    emailVerified: decodedAuthUser.email_verified
+  }
+
+  return authUser
+}

packages/nuxt-fire/src/plugins/initAuth.js

@@ -1,3 +1,5 @@
+import Cookie from "js-cookie";
+
 export default async ({ store, app }) => {
   const options = <%= serialize(options) %>
 
@@ -9,6 +11,9 @@ export default async ({ store, app }) => {
         if (authUser) {
           try {
             await _handleAuthSuccess(authUser)
+            if (options.setAuthCookie) {
+              _setAuthCookie(authUser)
+            }
           } catch (e) {
             await _handleAuthError(e)
             Promise.reject(e)
@@ -23,6 +28,11 @@ export default async ({ store, app }) => {
   /** -------------------------------------- Local Functions -------------------------------------- **/
   /** --------------------------------------------------------------------------------------------- **/
 
+  async function _setAuthCookie(authUser) {
+    const token = await authUser.getIdToken()
+    Cookie.set("nuxt_fire_auth_access_token", token)
+  }
+
   async function _handleAuthSuccess(authUser) {
     const onSuccessMutation = options.onSuccessMutation
     const onSuccessAction = options.onSuccessAction