push example of reading from supabase from client;

migrations/0001_create_users_forms_responses.sql

@@ -43,4 +43,9 @@ end;
 $$ language plpgsql security definer;
 create trigger on_auth_user_created
   after insert on auth.users
-  for each row execute procedure public.handle_new_user();
+  for each row execute procedure public.handle_new_user();
+
+
+create policy "Users are viewable by users who created them."
+  on users for select
+  using ( auth.uid()::text = id );

src/components/home/HomeContainer.tsx

@@ -4,30 +4,19 @@ import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { Session } from '@supabase/supabase-js'
 import { useRouter } from 'next/router'
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import { Database } from '../../../types/supabase'
 
-const user = {
-  name: 'Tom Cook',
-  email: '[email protected]',
-  imageUrl:
-    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-}
-const navigation = [
-  { name: 'Dashboard', href: '#', current: true },
-  { name: 'Team', href: '#', current: false },
-  { name: 'Projects', href: '#', current: false },
-  { name: 'Calendar', href: '#', current: false },
-  { name: 'Reports', href: '#', current: false },
-]
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
+type User =  Database['public']['Tables']['users']['Row'] 
+
 type HomeContainerProps = {
-    session: Session
-  }
+  user: User;
+}
 
 export default function HomeContainer(props: HomeContainerProps) {
-  const { session } = props;
   const { push } = useRouter();
   const supabase = createClientComponentClient<Database>()
 
@@ -41,6 +30,7 @@ export default function HomeContainer(props: HomeContainerProps) {
   ]
 
 
+
   return (
     <>
       <div className="min-h-full">
@@ -57,25 +47,6 @@ export default function HomeContainer(props: HomeContainerProps) {
                         alt="Your Company"
                       />
                     </div>
-                    <div className="hidden md:block">
-                      <div className="ml-10 flex items-baseline space-x-4">
-                        {navigation.map((item) => (
-                          <a
-                            key={item.name}
-                            href={item.href}
-                            className={classNames(
-                              item.current
-                                ? 'bg-gray-900 text-white'
-                                : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                              'rounded-md px-3 py-2 text-sm font-medium'
-                            )}
-                            aria-current={item.current ? 'page' : undefined}
-                          >
-                            {item.name}
-                          </a>
-                        ))}
-                      </div>
-                    </div>
                   </div>
                   <div className="hidden md:block">
                     <div className="ml-4 flex items-center md:ml-6">
@@ -94,7 +65,7 @@ export default function HomeContainer(props: HomeContainerProps) {
                           <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                             <span className="absolute -inset-1.5" />
                             <span className="sr-only">Open user menu</span>
-                            <img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
+                            <img className="h-8 w-8 rounded-full" src={props.user.avatar_url} alt="" />
                           </Menu.Button>
                         </div>
                         <Transition
@@ -143,30 +114,15 @@ export default function HomeContainer(props: HomeContainerProps) {
               </div>
 
               <Disclosure.Panel className="md:hidden">
-                <div className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
-                  {navigation.map((item) => (
-                    <Disclosure.Button
-                      key={item.name}
-                      as="a"
-                      href={item.href}
-                      className={classNames(
-                        item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                        'block rounded-md px-3 py-2 text-base font-medium'
-                      )}
-                      aria-current={item.current ? 'page' : undefined}
-                    >
-                      {item.name}
-                    </Disclosure.Button>
-                  ))}
-                </div>
+
                 <div className="border-t border-gray-700 pb-3 pt-4">
                   <div className="flex items-center px-5">
                     <div className="flex-shrink-0">
-                      <img className="h-10 w-10 rounded-full" src={user.imageUrl} alt="" />
+                      <img className="h-10 w-10 rounded-full" src={props.user.avatar_url} alt="" />
                     </div>
                     <div className="ml-3">
-                      <div className="text-base font-medium leading-none text-white">{user.name}</div>
-                      <div className="text-sm font-medium leading-none text-gray-400">{user.email}</div>
+                      <div className="text-base font-medium leading-none text-white">{props.user.email}</div>
+                      <div className="text-sm font-medium leading-none text-gray-400">{props.user.email}</div>
                     </div>
                     <button
                       type="button"
@@ -201,7 +157,9 @@ export default function HomeContainer(props: HomeContainerProps) {
           </div>
         </header>
         <main>
-          <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">{/* Your content */}</div>
+          <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+            {JSON.stringify(props.user)}
+          </div>
         </main>
       </div>
     </>

src/pages/home.tsx

@@ -1,28 +1,55 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useEffect } from 'react';
 import { useSessionContext } from '@supabase/auth-helpers-react'
 import { useRouter } from 'next/router';
 import HomeContainer from '@/components/home/HomeContainer';
 import Spinner from '@/components/home/Spinner';
 import ErrorMode from '@/components/home/ErrorMode';
+import { Database } from '../../types/supabase';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
 
+type User =  Database['public']['Tables']['users']['Row'] 
 
 export default function AuthPage() {
   const { isLoading, session, error } = useSessionContext();
+  const supabase = createClientComponentClient<Database>()
+  const [user, setUser] = useState<null | User>(null);
   const { push } = useRouter();
 
 
   useEffect(() => {
+    const getUserFromSupabase = async () => {
+      if (!session) {
+        return;
+      }
+      const { data, error } = await supabase
+        .from('users')
+        .select()
+        .eq('id', session?.user.id)
+        .maybeSingle();
+      if (error) {
+        console.error(error);
+        return;
+      } else if (data === null) {
+        console.error('No user found');
+        return;
+      } else {
+        setUser(data);
+      }
+    }
     if (!isLoading && !session) {
       push('/auth');
     }
+    if (!isLoading && session) {
+      getUserFromSupabase();
+    }
   }, [isLoading, session]);
 
   if (isLoading) {
     return (<Spinner/>);
-  } else if (session) {
+  } else if (user) {
     return (<HomeContainer
-      session={session}
+      user={user}
     />)
   } else {
     return (<ErrorMode