From 265c0651c30c8b3db4fde28629df236d226b057c Mon Sep 17 00:00:00 2001
From: Kang Ming <kang.ming1996@gmail.com>
Date: Mon, 4 Mar 2024 16:59:34 +0800
Subject: [PATCH] chore: update react example

---
 example/react/package.json |  3 +++
 example/react/src/App.js   | 21 +++++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/example/react/package.json b/example/react/package.json
index 9d7398d5a..3ecd47ac3 100644
--- a/example/react/package.json
+++ b/example/react/package.json
@@ -12,6 +12,9 @@
     "react-scripts": "5.0.1",
     "tailwindcss": "^1.8.10"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+  },
   "scripts": {
     "build:tailwind": "tailwindcss build src/App.css -o src/tailwind.output.css",
     "prestart": "npm run build:tailwind",
diff --git a/example/react/src/App.js b/example/react/src/App.js
index 7353a3bf2..1e30a7cbf 100644
--- a/example/react/src/App.js
+++ b/example/react/src/App.js
@@ -6,7 +6,7 @@ const supabaseURL = process.env.REACT_APP_SUPABASE_URL
 const supabaseAnon = process.env.REACT_APP_SUPABASE_ANON_KEY
 
 const auth = new AuthClient({
-  url: `${supabaseURL}/auth/v1`,
+  url: `${supabaseURL}`,
   headers: {
     accept: 'json',
     apikey: supabaseAnon,
@@ -41,13 +41,11 @@ function App() {
       console.log(event, session)
       if (event === 'SIGNED_OUT' || event === 'SIGNED_IN') {
         setSession(session)
-        window.location.reload()
       }
     })
 
     return () => {
-      if (subscription) {
-        console.log('Subscription: ', subscription)
+      if (subscription.subscription) {
         subscription.unsubscribe()
       }
     }
@@ -94,6 +92,10 @@ function App() {
     let { error } = await auth.signOut()
     if (error) console.log('Error: ', error)
   }
+  async function handleSignInAnonymously(data) {
+    let { error } = await auth.signInAnonymously({ options: { data } })
+    if (error) alert(error.message)
+  }
   async function forgotPassword() {
     var email = prompt('Please enter your email:')
     if (email === null || email === '') {
@@ -393,6 +395,17 @@ function App() {
                   </button>
                 </span>
               </div>
+              <div className="mt-6">
+                <span className="block w-full rounded-md shadow-sm">
+                  <button
+                    onClick={() => handleSignInAnonymously({ color: 'blue' })}
+                    type="button"
+                    className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
+                  >
+                    Sign In Anonymously
+                  </button>
+                </span>
+              </div>
             </div>
           </div>
         </div>