chore: update nextjs user management example.

examples/user-management/nextjs-ts-user-management/README.md

@@ -1,4 +1,4 @@
-# Supabase Next.js User Management
+# Supabase Next.js Auth & User Management Starter
 
 This example will set you up for a very common situation: users can sign up or sign in and then update their account with public profile information, including a profile image.
 
@@ -27,7 +27,13 @@ The Vercel deployment will guide you through creating a Supabase account and pro
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fnextjs-ts-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-nextjs-ts-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management)
 
-## Build from scratch
+## Build locally
+
+Or create a new projec locally with `create-next-app`:
+
+```bash
+npx create-next-app -e with-supabase
+```
 
 ### 1. Create new project
 
@@ -129,6 +135,23 @@ create policy "Anyone can update their own avatar." on storage.objects
   for update using ( auth.uid() = owner ) with check (bucket_id = 'avatars');
 ```
 
+## More Supabase Examples & Resources
+
+## Examples
+
+These official examples are maintained by the Supabase team:
+
+- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
+- [Next.js Slack Clone](https://github.com/supabase/supabase/tree/master/examples/slack-clone/nextjs-slack-clone)
+- [Next.js 13 Data Fetching](https://github.com/supabase/supabase/tree/master/examples/caching/with-nextjs-13)
+- [And more...](https://github.com/supabase/supabase/tree/master/examples)
+
+## Other resources
+
+- [[Docs] Next.js User Management Quickstart](https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs)
+- [[Egghead.io] Build a SaaS product with Next.js, Supabase and Stripe](https://egghead.io/courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20)
+- [[Blog] Fetching and caching Supabase data in Next.js 13 Server Components](https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components)
+
 ## Authors
 
 - [Supabase](https://supabase.com)

examples/user-management/nextjs-ts-user-management/components/Account.tsx

@@ -14,36 +14,36 @@ export default function Account({ session }: { session: Session }) {
   const [avatar_url, setAvatarUrl] = useState<Profiles['avatar_url']>(null)
 
   useEffect(() => {
-    getProfile()
-  }, [session])
+    async function getProfile() {
+      try {
+        setLoading(true)
+        if (!user) throw new Error('No user')
 
-  async function getProfile() {
-    try {
-      setLoading(true)
-      if (!user) throw new Error('No user')
+        let { data, error, status } = await supabase
+          .from('profiles')
+          .select(`username, website, avatar_url`)
+          .eq('id', user.id)
+          .single()
 
-      let { data, error, status } = await supabase
-        .from('profiles')
-        .select(`username, website, avatar_url`)
-        .eq('id', user.id)
-        .single()
+        if (error && status !== 406) {
+          throw error
+        }
 
-      if (error && status !== 406) {
-        throw error
+        if (data) {
+          setUsername(data.username)
+          setWebsite(data.website)
+          setAvatarUrl(data.avatar_url)
+        }
+      } catch (error) {
+        alert('Error loading user data!')
+        console.log(error)
+      } finally {
+        setLoading(false)
       }
-
-      if (data) {
-        setUsername(data.username)
-        setWebsite(data.website)
-        setAvatarUrl(data.avatar_url)
-      }
-    } catch (error) {
-      alert('Error loading user data!')
-      console.log(error)
-    } finally {
-      setLoading(false)
     }
-  }
+
+    getProfile()
+  }, [session, user, supabase])
 
   async function updateProfile({
     username,

examples/user-management/nextjs-ts-user-management/components/Avatar.tsx

@@ -19,21 +19,21 @@ export default function Avatar({
   const [uploading, setUploading] = useState(false)
 
   useEffect(() => {
-    if (url) downloadImage(url)
-  }, [url])
-
-  async function downloadImage(path: string) {
-    try {
-      const { data, error } = await supabase.storage.from('avatars').download(path)
-      if (error) {
-        throw error
+    async function downloadImage(path: string) {
+      try {
+        const { data, error } = await supabase.storage.from('avatars').download(path)
+        if (error) {
+          throw error
+        }
+        const url = URL.createObjectURL(data)
+        setAvatarUrl(url)
+      } catch (error) {
+        console.log('Error downloading image: ', error)
       }
-      const url = URL.createObjectURL(data)
-      setAvatarUrl(url)
-    } catch (error) {
-      console.log('Error downloading image: ', error)
     }
-  }
+
+    if (url) downloadImage(url)
+  }, [url, supabase.storage])
 
   const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => {
     try {

examples/user-management/nextjs-ts-user-management/components/Footer.tsx

@@ -1,4 +1,4 @@
-export default function Footer({}) {
+export default function Footer() {
   return (
     <div className="footer">
       <div className=""></div>
@@ -9,6 +9,7 @@ export default function Footer({}) {
       <div className="flex-end flex">
         <a
           target="_blank"
+          rel="noreferrer"
           href="https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fnextjs-ts-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-nextjs-ts-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management"
         >
           <img src="https://vercel.com/button" alt="vercel button" />

examples/user-management/nextjs-ts-user-management/package.json

@@ -8,10 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "@supabase/auth-helpers-nextjs": "^0.4.2",
+    "@supabase/auth-helpers-nextjs": "^0.5.4",
     "@supabase/auth-helpers-react": "^0.3.1",
-    "@supabase/auth-ui-react": "^0.2.2",
-    "@supabase/supabase-js": "^2.0.4",
+    "@supabase/auth-ui-react": "^0.2.6",
+    "@supabase/supabase-js": "^2.5.0",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"