docs(examples): add `integrations-supabase` #2058

atinux · 2021-11-21T12:16:28Z

❓ Type of change

📖 Documentation (updates to the documentation or readme)

📚 Description

This example showcases how to use Supabase with Nuxt.

Features

useSupabase() composable
User sessions with SSR support
Handle auth changes (and removes the session)

netlify · 2021-11-21T12:16:34Z

✔️ Deploy Preview for nuxt3-docs canceled.

🔨 Explore the source changes: ac77c69

🔍 Inspect the deploy log: https://app.netlify.com/sites/nuxt3-docs/deploys/61a4fa13e9ff33000865eb4f

pi0 · 2021-11-21T12:21:03Z

examples/integrations-supabase/nuxt.config.ts

+export default defineNuxtConfig({
+  publicRuntimeConfig: {
+    supabase: {
+      url: process.env.SUPABASE_URL,


Key shall be same as env name to allow overriding un runtime (and top level)

Not sure to understand, what feature does it bring?

Overriding env variables at runtime. Current config basically adds env on build-time to bundle. Check this:

framework/packages/nitro/src/runtime/app/config.ts

Line 7 in d68318f

// Allow override from process.env and deserialize

What would be the purpose of changing these keys at runtime? Do you have an example?

it is runtime config :) Changing config without need to rebuild

examples/integrations-supabase/package.json

pi0 · 2021-11-21T12:22:45Z

examples/integrations-supabase/plugins/supabase.server.ts

+  // Supabase needs to read from req.cookies
+  req.cookies = useCookies(req)
+  // Check authenticated user during SSR
+  user.value = (await auth.api.getUserByCookie(req)).user


This logic can be handle on demand in composable without using a global plugin (unless global guard is the purpose)

Well actually having it by default offers a lot of features directly (feature flags per user, redirects, etc).

But if Nuxt exposes a smarter way to cachify() the user to speed up the process that would be neat.

I need to time the time execution of the plugin.

Something that Nuxt itself should expose (through hooks) so we can display them in the devtools (performance tabs)

Not quite sure to understand what you mean but yes we can cache promise within a composable/context :)

pi0 · 2021-11-21T12:23:39Z

examples/integrations-supabase/server/api/supabase/session.ts

+  req.cookies = useCookies(req)
+  res.status = () => ({ json: () => ({}) })
+
+  supabase.auth.api.setAuthCookie(req, res)


I believe this can also be handled in app namespace (ssr only) instead of adding an additional api route

Well actually when doing the login it needs to also call our server to store the cookie as secured. How to would want to handle it without calling back the server?

Or we need to have a saveSession() exposed from Nuxt to easily create HTTP only cookies for secured sessions experience from day 1

Sure we probaly need useSession. My main point is that it can be in a composable and yet running in server-only to set secure cookie. This reduces boilerplate and allows logic working with rest of ssr context.

You need to try the demo to understand, when using Supabase, you basically no need to create API routes.

So I don't see how you want to implement this without an API call to works.

Same server logic just in composable :) Will make refactor

DamianGlowala · 2021-11-21T13:35:06Z

examples/integrations-supabase/README.md

+
+## Development
+
+Start the development server on http://localhost:3000


Suggested change

Start the development server on http://localhost:3000

Start the development server on http://localhost:3000:

It feels weird to me to add the : at the end

What do you think @danielroe ?

This convention can also potentially make formatting issues. If we do decide to add :, should use explicit markdown syntax for generated link or add a space after 3000

DamianGlowala · 2021-11-21T13:38:02Z

examples/integrations-supabase/README.md

+
+- `useSupabase()` composable
+- User sessions with SSR support
+- Handle auth changes (and removes the session)


I would suggest either of the following:

Handles auth changes (and removes the session)

Handling auth changes (and removing the session)

DamianGlowala · 2021-11-21T13:38:42Z

examples/integrations-supabase/README.md

+npx nuxi init nuxt3-app -t nuxt/framework/examples/integrations/supabase
+```
+
+Make sure to install the dependencies and setup the `.env`.


Suggested change

Make sure to install the dependencies and setup the `.env`.

Make sure to install the dependencies and setup the `.env`:

sduduzog · 2021-11-21T23:36:56Z

This is so awesome. I've been trying to experiment with ways to try add SSR support to https://github.com/supabase-community/nuxt-supabase with no luck but I'll definitely take learnings here and work on a PR there.

examples/integrations-supabase/composables/useSupabase.ts

eMeRiKa13 · 2021-12-01T12:00:50Z

Thanks a lot for this code. It's very helpful.

Could you add an example of how to query Supabase in a page, (other to the authenticated user) please?

supabase.from("my_table").select('*').eq(...)

I'm trying to use the useSupabase() composable to do that but I can't make it work.

pi0 · 2022-02-03T11:23:02Z

Finally moving this to a Nuxt module. nuxt-modules/supabase#8

docs(example): Add Supabase integration example

ef230ac

atinux added the example label Nov 21, 2021

atinux changed the title ~~docs(example): Add Supabase integration example~~ docs(examples): Add Supabase integration example Nov 21, 2021

pi0 reviewed Nov 21, 2021

View reviewed changes

examples/integrations-supabase/package.json Show resolved Hide resolved

pi0 reviewed Nov 21, 2021

View reviewed changes

pi0 marked this pull request as draft November 21, 2021 12:29

pi0 changed the title ~~docs(examples): Add Supabase integration example~~ docs(examples): add integrations-supabase Nov 21, 2021

DamianGlowala suggested changes Nov 21, 2021

View reviewed changes

pi0 assigned atinux and pi0 Nov 22, 2021

larbish suggested changes Nov 22, 2021

View reviewed changes

examples/integrations-supabase/composables/useSupabase.ts Outdated Show resolved Hide resolved

atinux added 2 commits November 22, 2021 18:09

chore: simplify composable using a server plugin

17d3908

fix: support RLS protected tables

ac77c69

eMeRiKa13 mentioned this pull request Jan 8, 2022

Export named 'default' is not provided lquixada/cross-fetch#120

Open

pi0 closed this Feb 3, 2022

pi0 deleted the example/supabase branch February 3, 2022 11:23

danielroe added the 3.x label Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(examples): add `integrations-supabase` #2058

docs(examples): add `integrations-supabase` #2058

atinux commented Nov 21, 2021

netlify bot commented Nov 21, 2021 •

edited

Loading

pi0 Nov 21, 2021 •

edited

Loading

atinux Nov 21, 2021

pi0 Nov 22, 2021

atinux Nov 22, 2021

pi0 Nov 22, 2021

pi0 Nov 21, 2021

atinux Nov 21, 2021

pi0 Nov 22, 2021

pi0 Nov 21, 2021

atinux Nov 21, 2021

pi0 Nov 22, 2021

atinux Nov 22, 2021

pi0 Nov 22, 2021

DamianGlowala Nov 21, 2021

atinux Nov 21, 2021

atinux Nov 21, 2021

pi0 Nov 22, 2021

DamianGlowala Nov 21, 2021

DamianGlowala Nov 21, 2021

sduduzog commented Nov 21, 2021

eMeRiKa13 commented Dec 1, 2021

pi0 commented Feb 3, 2022


		## Development

		Start the development server on http://localhost:3000

	Make sure to install the dependencies and setup the `.env`.
	Make sure to install the dependencies and setup the `.env`:

docs(examples): add integrations-supabase #2058

docs(examples): add integrations-supabase #2058

Conversation

atinux commented Nov 21, 2021

❓ Type of change

📚 Description

Features

netlify bot commented Nov 21, 2021 • edited Loading

pi0 Nov 21, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sduduzog commented Nov 21, 2021

eMeRiKa13 commented Dec 1, 2021

pi0 commented Feb 3, 2022

docs(examples): add `integrations-supabase` #2058

docs(examples): add `integrations-supabase` #2058

netlify bot commented Nov 21, 2021 •

edited

Loading

pi0 Nov 21, 2021 •

edited

Loading