From 279a314e24f8a7ad2c205edd7231f6a5006855b8 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Fri, 10 Feb 2023 23:14:37 +0100
Subject: [PATCH] Check if client has loaded before saying that loading is
 finished (#7608)

* Check if client has loaded before saying that loading is finished

* Get rid of ClerkLoaded
---
 .../clerk/setup/src/templates/web/auth.tsx.template        | 4 ++--
 packages/auth-providers/clerk/web/src/clerk.tsx            | 3 +++
 packages/auth/src/AuthImplementation.ts                    | 1 +
 packages/auth/src/AuthProvider/useReauthenticate.ts        | 7 +++++++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/auth-providers/clerk/setup/src/templates/web/auth.tsx.template b/packages/auth-providers/clerk/setup/src/templates/web/auth.tsx.template
index b9ab145b87aa..0477ab324047 100644
--- a/packages/auth-providers/clerk/setup/src/templates/web/auth.tsx.template
+++ b/packages/auth-providers/clerk/setup/src/templates/web/auth.tsx.template
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 
-import { ClerkLoaded, ClerkProvider, useUser } from '@clerk/clerk-react'
+import { ClerkProvider, useUser } from '@clerk/clerk-react'
 
 import { createAuth } from '@redwoodjs/auth-clerk-web'
 import { navigate } from '@redwoodjs/router'
@@ -40,7 +40,7 @@ export const AuthProvider = ({ children }: Props) => {
   return (
     <ClerkProvider {...clerkOptions} navigate={(to) => navigate(to)}>
       <ClerkRwAuthProvider>
-        <ClerkLoaded>{children}</ClerkLoaded>
+        {children}
         <ClerkStatusUpdater />
       </ClerkRwAuthProvider>
     </ClerkProvider>
diff --git a/packages/auth-providers/clerk/web/src/clerk.tsx b/packages/auth-providers/clerk/web/src/clerk.tsx
index cfd5c609bd9e..87ba1673a548 100644
--- a/packages/auth-providers/clerk/web/src/clerk.tsx
+++ b/packages/auth-providers/clerk/web/src/clerk.tsx
@@ -64,5 +64,8 @@ function createAuthImplementation() {
       const clerk = (window as any).Clerk as Clerk
       return clerk?.user
     },
+    clientHasLoaded: () => {
+      return (window as any).Clerk !== undefined
+    },
   }
 }
diff --git a/packages/auth/src/AuthImplementation.ts b/packages/auth/src/AuthImplementation.ts
index 458875fdf67a..a6da3ce629e0 100644
--- a/packages/auth/src/AuthImplementation.ts
+++ b/packages/auth/src/AuthImplementation.ts
@@ -20,6 +20,7 @@ export interface AuthImplementation<
   forgotPassword?(username: string): Promise<TForgotPassword>
   resetPassword?(options?: unknown): Promise<TResetPassword>
   validateResetToken?(token: string | null): Promise<TValidateResetToken>
+  clientHasLoaded?(): boolean
 
   /**
    * The user's data from the AuthProvider
diff --git a/packages/auth/src/AuthProvider/useReauthenticate.ts b/packages/auth/src/AuthProvider/useReauthenticate.ts
index 70438aacf353..fcf5fdf2576c 100644
--- a/packages/auth/src/AuthProvider/useReauthenticate.ts
+++ b/packages/auth/src/AuthProvider/useReauthenticate.ts
@@ -29,8 +29,15 @@ export const useReauthenticate = <TUser>(
       const userMetadata = await authImplementation.getUserMetadata()
 
       if (!userMetadata) {
+        let loading = false
+
+        if (authImplementation.clientHasLoaded) {
+          loading = !authImplementation.clientHasLoaded()
+        }
+
         setAuthProviderState({
           ...notAuthenticatedState,
+          loading,
           client: authImplementation.client,
         })
       } else {