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
redwoodjs · Feb 13, 2023 · 279a314 · 279a314
1 parent 284b429
commit 279a314
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 {