chore: Updates Supabase readme, docs and tests for sign up with optio…

…ns and user/session (redwoodjs#7765)

* Update supabase web readme. Adds session docs.

* Adds test for sign up options

* Docs for sign up with options

* rm suspicious looking comment string

* fix indentation

* Corrects Sign in a user through OAuth doc example

* Updated async examples to include the useEffect hooks

---------

Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>

docs/docs/auth/supabase.md

@@ -1,7 +1,6 @@
 ---
 sidebar_label: Supabase
 ---
-
 # Supabase Authentication
 
 To get started, run the setup command:
@@ -10,8 +9,6 @@ To get started, run the setup command:
 yarn rw setup auth supabase
 ```
 
-<!-- vA47SZpaCR7BinC9 -->
-
 This installs all the packages, writes all the files, and makes all the code modifications you need.
 For a detailed explanation of all the api- and web-side changes that aren't exclusive to Supabase, see the top-level [Authentication](../authentication.md) doc. For now, let's focus on Supabase's side of things.
 
@@ -44,8 +41,6 @@ Lastly, in `redwood.toml`, include `SUPABASE_URL` and `SUPABASE_KEY` in the list
   includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"]
 ```
 
-
-
 ## Authentication UI
 
 Supabase doesn't redirect to a hosted sign-up page or open a sign-up modal.
@@ -75,8 +70,8 @@ const HomePage = () => {
 
       <p>{JSON.stringify({ isAuthenticated })}</p>
       <button onClick={() => signUp({
-        // email: 'your.email@email.com',
-        // password: 'super secret password',
+        email: 'your.email@email.com',
+        password: 'super secret password',
       })}>sign up</button>
     </>
   )
@@ -123,6 +118,41 @@ await signUp({
 })
 ```
 
+### Sign Up with email and password and additional user metadata
+
+Creates a new user with additional user metadata.
+
+```ts
+const { signUp } = useAuth()
+
+await signUp({
+email: 'example@email.com',
+  password: 'example-password',
+  options: {
+    data: {
+      first_name: 'John',
+      age: 27,
+    }
+  }
+})
+```
+
+### Sign Up with email and password and a redirect URL
+
+Creates a new user with a redirect URL.
+
+```ts
+const { signUp } = useAuth()
+
+await signUp({
+email: 'example@email.com',
+  password: 'example-password',
+  options: {
+    emailRedirectTo: 'https://example.com/welcome'
+  }
+})
+```
+
 ### Sign in a user with email and password
 
 Log in an existing user with an email and password or phone and password.
@@ -171,11 +201,8 @@ Log in an existing user via a third-party provider.
 const { logIn } = useAuth()
 
 await logIn({
-  authenticationMethod: 'otp',
-  email: 'example@email.com',
-  options: {
-    emailRedirectTo: 'https://example.com/welcome'
-  }
+  authMethod: 'oauth',
+  provider: 'github',
 })
 ```
 
@@ -207,6 +234,26 @@ await logIn({
 })
 ```
 
+### Get Current User
+
+Gets the content of the current user set by API side authentication.
+
+```ts
+const { currentUser } = useAuth()
+
+<p>{JSON.stringify({ currentUser })}</p>
+```
+
+### Get Current User Metadata
+
+Gets content of the current Supabase user session, i.e., `auth.getSession()`.
+
+```ts
+const { userMetadata } = useAuth()
+
+<p>{JSON.stringify({ userMetadata })}</p>
+```
+
 ### Sign out a user
 
 Inside a browser context, signOut() will remove the logged in user from the browser session and log them out - removing all items from localStorage and then trigger a "SIGNED_OUT" event.
@@ -219,7 +266,6 @@ const { logOut } = useAuth()
 logOut()
 ```
 
-
 ### Verify and log in through OTP
 
 Log in a user given a User supplied OTP received via mobile.
@@ -238,7 +284,9 @@ So, in order to use the `verifyOtp` method, you would:
 ```ts
 const { client } = useAuth()
 
-const { data, error } = await client.verifyOtp({ phone, token, type: 'sms'})
+useEffect(() => {
+  const { data, error } = await client.verifyOtp({ phone, token, type: 'sms'})
+}, [client])
 ```
 
 ### Access the Supabase Auth Client
@@ -251,6 +299,7 @@ const { client } = useAuth()
 
 You can then use it to work with Supabase sessions, or auth events.
 
+When using in a React component, you'll have to put any method that needs an `await` in a `useEffect()`.
 
 ### Retrieve a session
 
@@ -259,7 +308,9 @@ Returns the session, refreshing it if necessary. The session returned can be nul
 ```ts
 const { client } = useAuth()
 
-const { data, error } = await client.getSession()
+useEffect(() => {
+  const { data, error } = await client.getSession()
+}, [client])
 ```
 
 ### Listen to auth events
@@ -271,7 +322,13 @@ Receive a notification every time an auth event happens.
 ```ts
 const { client } = useAuth()
 
-client.onAuthStateChange((event, session) => {
-  console.log(event, session)
-})
+useEffect(() => {
+  const { data: { subscription } } = client.onAuthStateChange((event, session) => {
+    console.log(event, session)
+  })
+
+  return () => {
+    subscription.unsubscribe()
+  }
+}, [client])
 ```