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(() => {