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.

Sign up for GitHub

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

Supabase How To updated for auth setup changes #10883

Merged
merged 2 commits into from
Jun 27, 2024
Merged

Supabase How To updated for auth setup changes #10883

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55664a7
Update supabase-auth.md
saminightshift Jun 26, 2024
9a0e86c
Merge branch 'main' into patch-1
dthyresson Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions docs/docs/how-to/supabase-auth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,24 +53,21 @@ yarn redwood setup auth supabase
By specifying `supabase` as the provider, Redwood automatically added the necessary Supabase config to our app. Let's open up `web/src/App.[js/tsx]` and inspect. You should see:

```jsx {1-2,12,17} title="web/src/App.[js/tsx]"
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'
import { AuthProvider, useAuth } from './auth'

const supabaseClient = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)
import './index.css'

const App = () => (
<FatalErrorBoundary page={FatalErrorPage}>
<RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
<AuthProvider client={supabaseClient} type="supabase">
<RedwoodApolloProvider>
<AuthProvider>
<RedwoodApolloProvider useAuth={useAuth}>
<Routes />
</RedwoodApolloProvider>
</AuthProvider>
Expand All @@ -81,6 +78,21 @@ const App = () => (
export default App
```

As you can see our AuthProvider is exported from our `web/src/auth.[js/tsx]`, lets take a look at what that looks like:

```jsx {1-2,12,17} title="web/src/auth.[js/tsx]"
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)
```

Now it's time to add the Supabase URL, public API KEY, and JWT SECRET (`SUPABASE_URL`, `SUPABASE_KEY`, and `SUPABASE_JWT_SECRET`) to your `.env` file.
You can find these items in your Supabase management console, under **Settings > API**:

Expand Down
Loading