Fix email verification links and publishing shortly after verification (#1049)

* Disable i18n logging by default

* Redirect auth handler paths to existing firebase hosting

* Refresh auth token on change
Refresh the auth token when profile role or email verified changes.

* Remove logs

* Fix index

* simplify/fix firebase auth redirect

Author: alexjball

components/auth/service.tsx

@@ -1,6 +1,8 @@
+import { useProfile } from "components/db"
+import { useProfileState } from "components/db/profile/redux"
 import { User } from "firebase/auth"
 import Router, { useRouter } from "next/router"
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect, useRef } from "react"
 import { auth } from "../firebase"
 import { useAppDispatch } from "../hooks"
 import { createService } from "../service"
@@ -9,21 +11,64 @@ import { Claim } from "./types"
 
 export const { Provider } = createService(() => {
   const dispatch = useAppDispatch()
-  useEffect(
-    () =>
-      auth.onAuthStateChanged(async user => {
-        let claims: Claim | undefined = undefined
-        if (user) {
-          const token = await user.getIdTokenResult()
-          const fromToken = Claim.validate(token.claims)
-          if (fromToken.success) claims = fromToken.value
-        }
-        dispatch(authChanged({ user, claims }))
-      }),
-    [dispatch]
-  )
+  const getToken = useGetTokenWithRefresh()
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged(async user => {
+      let claims: Claim | undefined = undefined
+      if (user) {
+        let token = await getToken(user)
+        const fromToken = Claim.validate(token.claims)
+        if (fromToken.success) claims = fromToken.value
+      }
+      dispatch(authChanged({ user, claims }))
+    })
+    return () => {
+      unsubscribe()
+    }
+  }, [dispatch, getToken])
 })
 
+/**
+ * The token does not refresh when the user's profile or claims in firebase auth change,
+ * So we need to manually refresh it if the user's profile or claims change.
+ * It's always possible (but a bug) that the profile is out of sync with the auth database,
+ * so we need to avoid refresh loops by only refreshing once per service instance.
+ */
+const useGetTokenWithRefresh = () => {
+  const hasRefreshedToken = useRef(false)
+  const profile = useProfileState(),
+    hasProfile = !profile.loading,
+    roleInProfile = profile.profile?.role
+
+  return useCallback(
+    async (user: User) => {
+      let token = await user.getIdTokenResult()
+
+      const isRoleOutOfSyncInToken =
+          hasProfile && roleInProfile !== token.claims.role,
+        isEmailVerifiedOutOfSyncInToken =
+          user.emailVerified !== Boolean(token.claims.email_verified),
+        isTokenOutOfSync =
+          isRoleOutOfSyncInToken || isEmailVerifiedOutOfSyncInToken
+
+      // If the profile has a role but the token doesn't, try refreshing the token.
+      // If the user indicates email is verified but the token doesn't, try refreshing the token.
+      // Only refresh once per service instance.
+      if (isTokenOutOfSync && !hasRefreshedToken.current) {
+        console.log(
+          "Refreshing token because it is out of sync with profile or user"
+        )
+        token = await user.getIdTokenResult(true)
+        hasRefreshedToken.current = true
+      }
+
+      return token
+    },
+    [hasProfile, roleInProfile]
+  )
+}
+
 /**
  * Renders the given component if authenticated, otherwise redirects.
  */

firestore.indexes.json

@@ -6,7 +6,7 @@
       "queryScope": "COLLECTION_GROUP",
       "fields": [
         {
-          "fieldPath": "authorUid",
+          "fieldPath": "authorRole",
           "order": "ASCENDING"
         },
         {

next-i18next.config.js

@@ -2,7 +2,7 @@
  * @type {import('next-i18next').UserConfig}
  */
 module.exports = {
-  debug: process.env.NODE_ENV === "development",
+  debug: Boolean(process.env.I18N_DEBUG),
   i18n: {
     defaultLocale: "en",
     locales: ["en"]

next.config.js

@@ -1,7 +1,3 @@
-/**
- * @type {import('next').NextConfig}
- */
-
 const i18Config = require("./next-i18next.config")
 
 const config = {
@@ -17,8 +13,12 @@ const config = {
   i18n: i18Config.i18n
 }
 
+/** @type {import('next').NextConfig} */
 module.exports = {
   ...config,
+  async redirects() {
+    return [redirectFirebaseAuthHandlers()]
+  },
   async rewrites() {
     return [
       {
@@ -28,3 +28,23 @@ module.exports = {
     ]
   }
 }
+
+/**
+ * Redirect auth handler paths to the hosted firebase pages. This avoids having
+ * to implement these pages ourselves in next.js but continues to depend on
+ * firebase hosting a bit.
+ *b
+ * In production, FIREBASE_AUTH_DOMAIN is set to digital-testimony-prod.web.app.
+ *
+ * @see https://firebase.google.com/docs/auth/custom-email-handler
+ */
+const redirectFirebaseAuthHandlers = () => {
+  const firebaseDomain =
+    process.env.FIREBASE_AUTH_DOMAIN ?? "digital-testimony-dev.web.app"
+
+  return {
+    source: "/__/:path*",
+    destination: `https://${firebaseDomain}/__/:path*`,
+    permanent: false
+  }
+}

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build:dev": "MAPLE_ENV=dev next build",
+    "build:prod": "MAPLE_ENV=prod next build",
     "build:functions": "next lint -d functions/src && yarn --cwd functions build",
     "check-formatting": "prettier --check .",
     "check-types": "tsc --noEmit",