Small changes to Supabase Auth boilerplate code

[saminightshift]

The issue:

It's a small change but I think it'd help people that might not be 100% with how to set up Supabase in relation to RedwoodJS. The code in the doc's say to set our auth up like the below code, however in newer versions of Redwood AuthProvider is not present on @redwoodjs/auth and we have separated this code out into our src/web/auth.ts file.

Code displayed in doc's:

import { AuthProvider } from '@redwoodjs/auth'
import { createClient } from '@supabase/supabase-js'

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'

import FatalErrorPage from 'src/pages/FatalErrorPage'
import Routes from 'src/Routes'

import './index.css'

const supabaseClient = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <AuthProvider client={supabaseClient} type="supabase">
        <RedwoodApolloProvider>
          <Routes />
        </RedwoodApolloProvider>
      </AuthProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
)

export default App

Suggested amendment:

I would like to suggest that the doc's be changed to reflect the update.

web/src/App.[js/tsx]

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'

import FatalErrorPage from 'src/pages/FatalErrorPage'
import Routes from 'src/Routes'

import { AuthProvider, useAuth } from './auth'

import './index.css'

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <AuthProvider>
        <RedwoodApolloProvider useAuth={useAuth}>
          <Routes />
        </RedwoodApolloProvider>
      </AuthProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
)

export default App

Add a section to documentation highlighting that our AuthProvider is in src/web/auth.ts and should look like the below code block:

import { createClient } from '@supabase/supabase-js'

import { createAuth } from '@redwoodjs/auth-supabase-web'

const supabaseClient = createClient(
  process.env.SUPABASE_URL, process.env.SUPABASE_KEY
)

export const { AuthProvider, useAuth } = createAuth(supabaseClient)

[saminightshift]

Opened PR adding the updated code: https://github.com/redwoodjs/redwood/pull/10883