Fix with-firebase-authentication example: Update the cookie when ID token refreshes on client

examples/with-firebase-authentication/components/FirebaseAuth.js

@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react'
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
 import firebase from 'firebase/app'
 import 'firebase/auth'
-import cookie from 'js-cookie'
 import initFirebase from '../utils/auth/initFirebase'
+import { setUserCookie } from '../utils/auth/userCookies'
+import { mapUserData } from '../utils/auth/mapUserData'
 
 // Init the Firebase app.
 initFirebase()
@@ -23,17 +24,8 @@ const firebaseAuthConfig = {
   credentialHelper: 'none',
   callbacks: {
     signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
-      // xa is the access token, which can be retrieved through
-      // firebase.auth().currentUser.getIdToken()
-      const { uid, email, xa } = user
-      const userData = {
-        id: uid,
-        email,
-        token: xa,
-      }
-      cookie.set('auth', userData, {
-        expires: 1,
-      })
+      const userData = mapUserData(user)
+      setUserCookie(userData)
     },
   },
 }

examples/with-firebase-authentication/pages/index.js

@@ -51,7 +51,7 @@ const Index = () => {
         </Link>
       </div>
       {error && <div>Failed to fetch food!</div>}
-      {data ? (
+      {data && !error ? (
         <div>Your favorite food is {data.food}.</div>
       ) : (
         <div>Loading...</div>

examples/with-firebase-authentication/utils/auth/mapUserData.js

@@ -0,0 +1,8 @@
+export const mapUserData = (user) => {
+  const { uid, email, xa } = user
+  return {
+    id: uid,
+    email,
+    token: xa,
+  }
+}

examples/with-firebase-authentication/utils/auth/useUser.js

@@ -1,9 +1,14 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import cookies from 'js-cookie'
 import firebase from 'firebase/app'
 import 'firebase/auth'
 import initFirebase from '../auth/initFirebase'
+import {
+  removeUserCookie,
+  setUserCookie,
+  getUserFromCookie,
+} from './userCookies'
+import { mapUserData } from './mapUserData'
 
 initFirebase()
 
@@ -17,8 +22,6 @@ const useUser = () => {
       .signOut()
       .then(() => {
         // Sign-out successful.
-        cookies.remove('auth')
-        setUser()
         router.push('/auth')
       })
       .catch((e) => {
@@ -27,12 +30,26 @@ const useUser = () => {
   }
 
   useEffect(() => {
-    const cookie = cookies.get('auth')
-    if (!cookie) {
+    // Firebase updates the id token every hour, this
+    // makes sure the react state and the cookie are
+    // both kept up to date
+    firebase.auth().onIdTokenChanged((user) => {
+      if (user) {
+        const userData = mapUserData(user)
+        setUserCookie(userData)
+        setUser(userData)
+      } else {
+        removeUserCookie()
+        setUser()
+      }
+    })
+
+    const userFromCookie = getUserFromCookie()
+    if (!userFromCookie) {
       router.push('/')
       return
     }
-    setUser(JSON.parse(cookie))
+    setUser(userFromCookie)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

examples/with-firebase-authentication/utils/auth/userCookies.js

@@ -0,0 +1,19 @@
+import cookies from 'js-cookie'
+
+export const getUserFromCookie = () => {
+  const cookie = cookies.get('auth')
+  if (!cookie) {
+    return
+  }
+  return JSON.parse(cookie)
+}
+
+export const setUserCookie = (user) => {
+  cookies.set('auth', user, {
+    // firebase id tokens expire in one hour
+    // set cookie expiry to match
+    expires: 1 / 24,
+  })
+}
+
+export const removeUserCookie = () => cookies.remove('auth')