fix: have isLoading wait for onUserLoadedData. (#26)

CHANGELOG.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## 1.0.7 - 2022-02-17
+## 1.1.1 - 2022-02-22
 
 - [#24](https://github.com/supabase-community/supabase-auth-helpers/pull/24): feat: onUserLoaded prop in UserProvider:
   - Added the `onUserDataLoaded` on the `UserProvider` component fro conveninet fetching of additional user data. See [the docs](./src/nextjs/README.md#loading-additional-user-data) for more details.

examples/nextjs/pages/_app.tsx

@@ -12,9 +12,11 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <UserProvider
       supabaseClient={supabaseClient}
-      onUserLoaded={async (supabaseClient) =>
-        (await supabaseClient.from('test').select('*').single()).data
-      }
+      onUserLoaded={async (supabaseClient) => {
+        // Since supabase is so fast, we need a 2s sleep here to test that it's working :D
+        await new Promise((r) => setTimeout(r, 2000));
+        return (await supabaseClient.from('test').select('*').single()).data;
+      }}
     >
       <Component {...pageProps} />
     </UserProvider>

examples/nextjs/pages/index.tsx

@@ -4,7 +4,7 @@ import type { NextPage } from 'next';
 import Link from 'next/link';
 
 const LoginPage: NextPage = () => {
-  const { user, onUserLoadedData, error } = useUser();
+  const { isLoading, user, onUserLoadedData, error } = useUser();
 
   if (!user)
     return (
@@ -27,6 +27,7 @@ const LoginPage: NextPage = () => {
         <Link href="/protected-page">supabaseServerClient</Link>]
       </p>
       <button onClick={() => supabaseClient.auth.signOut()}>Sign out</button>
+      {isLoading ? <h1>Loading...</h1> : <h1>Loaded!</h1>}
       <p>user:</p>
       <pre>{JSON.stringify(user, null, 2)}</pre>
       <p>client-side data fetching with RLS</p>

src/react/components/UserProvider.tsx

@@ -73,29 +73,34 @@ export const UserProvider = (props: Props) => {
 
   // Get cached user on every page render.
   useEffect(() => {
-    console.log(pathname);
     async function runOnPathChange() {
       setIsLoading(true);
       await checkSession();
-      setIsLoading(false);
+      if (onUserLoadedData || !onUserLoaded) {
+        setIsLoading(false);
+      }
     }
     runOnPathChange();
   }, [pathname]);
 
-  // Only load user Data when the access token changes.
+  // Only load user Data the first time after user is loaded.
   useEffect(() => {
     async function loadUserData() {
-      console.log(onUserLoaded, !onUserLoadedData, onUserLoadedData);
       if (onUserLoaded && !onUserLoadedData) {
         try {
           const response = await onUserLoaded(supabaseClient);
           setOnUserLoadedData(response);
+          setIsLoading(false);
         } catch (error) {
           console.log('Error in your `onUserLoaded` method:', error);
         }
       }
     }
-    if (user) loadUserData();
+    if (user) {
+      loadUserData();
+    } else {
+      setOnUserLoadedData(null);
+    }
   }, [user, accessToken]);
 
   useEffect(() => {