Implement AuthCheck's requiredClaims

Author: jhuleatt

reactfire/auth/index.tsx

@@ -2,6 +2,7 @@ import { auth, User } from 'firebase/app';
 import * as React from 'react';
 import { user } from 'rxfire/auth';
 import { useObservable, useFirebaseApp, ReactFireOptions } from '..';
+import { from } from 'rxjs';
 
 function getAuthFromContext(): auth.Auth {
   const firebaseApp = useFirebaseApp();
@@ -42,13 +43,50 @@ export function useUser<T = unknown>(
   );
 }
 
+export function useIdTokenResult(user: User, forceRefresh: boolean = false) {
+  if (!user) {
+    throw new Error('you must provide a user');
+  }
+
+  const idToken$ = from(user.getIdTokenResult(forceRefresh));
+
+  return useObservable(idToken$, `${user.uid}-claims`);
+}
+
 export interface AuthCheckProps {
   auth?: auth.Auth;
   fallback: React.ReactNode;
   children: React.ReactNode;
   requiredClaims?: Object;
 }
 
+export interface ClaimsCheckProps {
+  user: User;
+  fallback: React.ReactNode;
+  children: React.ReactNode;
+  requiredClaims?: Object;
+}
+
+export function ClaimsCheck({ user, fallback, children, requiredClaims }) {
+  const { claims } = useIdTokenResult(user, false);
+  const missingClaims = {};
+
+  Object.keys(requiredClaims).forEach(claim => {
+    if (requiredClaims[claim] !== claims[claim]) {
+      missingClaims[claim] = {
+        expected: requiredClaims[claim],
+        actual: claims[claim]
+      };
+    }
+  });
+
+  if (Object.keys(missingClaims).length === 0) {
+    return children;
+  } else {
+    return fallback;
+  }
+}
+
 export function AuthCheck({
   auth,
   fallback,
@@ -57,33 +95,19 @@ export function AuthCheck({
 }: AuthCheckProps): React.ReactNode {
   const user = useUser<User>(auth);
 
-  React.useLayoutEffect(() => {
-    // TODO(jeff) see if this actually works
-    if (requiredClaims) {
-      throw user.getIdTokenResult().then(idTokenResult => {
-        const { claims } = idTokenResult;
-        const missingClaims = {};
-        Object.keys(requiredClaims).forEach(claim => {
-          if (requiredClaims[claim] !== claims[claim]) {
-            missingClaims[claim] = {
-              expected: requiredClaims[claim],
-              actual: claims[claim]
-            };
-          }
-        });
-
-        if (Object.keys(missingClaims).length > 0) {
-          throw new Error(
-            `Mismatched Claims: ${JSON.stringify(missingClaims)}`
-          );
-        }
-      });
-    }
-  });
-
-  if (!user) {
-    return fallback;
+  if (user) {
+    return requiredClaims ? (
+      <ClaimsCheck
+        user={user}
+        fallback={fallback}
+        requiredClaims={requiredClaims}
+      >
+        {children}
+      </ClaimsCheck>
+    ) : (
+      children
+    );
   } else {
-    return children;
+    return fallback;
   }
 }