chore: Updates Supabase readme, docs and tests for sign up with options and user/session

[dthyresson]

This PR:

• Updates Supabase auth readme and docs to include examples of sign up with options (user metadata, redirectUrl)
• Updates also with how to get current user and user metadata
• Adds tests for signing up with options

Addresses #6146 via documentation (and the prior v2 upgrades).

[replay-io]

16 replays were recorded for 4ff023f.

0 Failed

16 Passed

requireAuth graphql checks

    ```
    locator.waitFor: Target closed
    =========================== logs ===========================
    waiting for locator('.rw-form-error-title').locator('text=You don\'t have permission to do that') to be visible
    ============================================================
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/aff8ee4a-1e34-4b9d-9d52-e2b6da475912>useAuth hook, auth redirects checks</a></li>
<li><a href=https://app.replay.io/recording/ef85653a-d169-48ef-bb58-fa01fd8419f8>Check that a specific blog post is prerendered</a></li>
<li><a href=https://app.replay.io/recording/e07af5a3-9f5e-4d1d-89ca-4daa5f2d08a6>Check that about is prerendered</a></li>
<li><a href=https://app.replay.io/recording/ee8a47a3-5003-46fd-8d82-e355ea367bcd>Check that homepage is prerendered</a></li>
<li><a href=https://app.replay.io/recording/f3688adb-e326-4815-bca5-d7a4146e3fdc>Check that meta-tags are rendering the correct dynamic data</a></li>
<li><a href=https://app.replay.io/recording/5dc9a5b0-4669-4d49-9219-bb59834f2daf>Check that you can navigate from home page to specific blog post</a></li>
<li><a href=https://app.replay.io/recording/46d0d720-47ae-4e16-93ea-951b8b074525>Waterfall prerendering (nested cells)</a></li>
<li><a href=https://app.replay.io/recording/869bdf4d-b876-4b17-9d62-aaceb2955b37>RBAC: Admin user should be able to delete contacts</a></li>
<li><a href=https://app.replay.io/recording/c5fc1c37-34a4-4ab7-ae8d-94cbd6f1cae9>RBAC: Should not be able to delete contact as non-admin user</a></li>
<li><a href=https://app.replay.io/recording/b91989af-feb8-4f36-a7a1-35b63b2d468a>Smoke test with dev server</a></li>
<li><a href=https://app.replay.io/recording/bce7b808-0cfb-4fd6-80d8-10cf4629dfde>Smoke test with rw serve</a></li>
<li><a href=https://app.replay.io/recording/2e2c213e-3596-411e-8392-7948702c647b>Loads Cell mocks when Cell is nested in another story</a></li>
<li><a href=https://app.replay.io/recording/5b358110-c7e8-4c1b-a339-6b5d160f3b0a>Loads Cell Stories</a></li>
<li><a href=https://app.replay.io/recording/825939d6-af10-4951-bdb6-e0d5273dc443>Loads MDX Stories</a></li>
<li><a href=https://app.replay.io/recording/48a9bb46-0aaf-4e98-aa50-daf1160aea3b>Mocks current user, and updates UI while dev server is running</a></li>

View test run on Replay ↗︎

[KrisCoulson]

Just dropping this here for when we get around to SSR with render modes and using supabase cookies

https://supabase.com/docs/guides/auth/server-side-rendering

[jtoar]

@dthyresson I think some of the existing docs are incorrect. I can't comment on all the relevant lines but here are my notes:

• the code block in Sign in a user through Passwordless/OTP and Sign in a user through OAuth is the same
• I'm not sure the code block in Verify and log in through OTP is helpful because it won't work in react component (you have to put the await in a useEffect)
  • same with Retrieve a session
  • Listen to auth events should also be in a useEffect because it's setting up an event listener; when do we clean it up? does that happen automatically?

These changes would have to be replicated in the readme.

[dthyresson]

@dthyresson I think some of the existing docs are incorrect. I can't comment on all the relevant lines but here are my notes:

• the code block in Sign in a user through Passwordless/OTP and Sign in a user through OAuth is the same

Thanks for catching. Fixing.

• I'm not sure the code block in Verify and log in through OTP is helpful because it won't work in react component (you have to put the await in a useEffect)

  • same with Retrieve a session
  • Listen to auth events should also be in a useEffect because it's setting up an event listener; when do we clean it up? does that happen automatically?

These changes would have to be replicated in the readme.

For these, I referenced the Supabase docs, such as:

https://supabase.com/docs/reference/javascript/auth-getsession

const { data, error } = await supabase.auth.getSession()

I'm not sure if it needs to be in a useEffect(). I'll ask Supabase.

[dthyresson]

Turns out, they do need to be in a useEffect() as shown in this Remix example: https://supabase.com/docs/guides/auth/auth-helpers/remix

const { env, session } = useLoaderData<typeof loader>()
const fetcher = useFetcher()

const [supabase] = useState(() =>
  createBrowserClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
)

const serverAccessToken = session?.access_token

useEffect(() => {
  const {
    data: { subscription },
  } = supabase.auth.onAuthStateChange((event, session) => {
    if (session?.access_token !== serverAccessToken) {
      // server and client are out of sync.
      // Remix recalls active loaders after actions complete
      fetcher.submit(null, {
        method: 'post',
        action: '/handle-supabase-auth',
      })
    }
  })

  return () => {
    subscription.unsubscribe()
  }
}, [serverAccessToken, supabase, fetcher])

@jtoar I've made those doc updates. Thanks!