Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small changes to Supabase Auth boilerplate code #143

Closed
saminightshift opened this issue Jun 26, 2024 · 1 comment
Closed

Small changes to Supabase Auth boilerplate code #143

saminightshift opened this issue Jun 26, 2024 · 1 comment

Comments

@saminightshift
Copy link

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
Copy link
Author

Opened PR adding the updated code: redwoodjs/redwood#10883

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant