{"_path":"/advanced","_draft":false,"_partial":false,"_empty":false,"title":"Advanced","description":"Real-life advanced usages of the supabase module.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"realtime"},"children":[{"type":"text","value":"Realtime"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on "},{"type":"element","tag":"a","props":{"href":"https://github.com/supabase/realtime","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase Realtime"}]},{"type":"text","value":", listen to changes in your PostgreSQL Database and broadcasts them over WebSockets."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enable it, make sure you have turned on the "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/guides/api#realtime-api-1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Real Time API"}]},{"type":"text","value":" for your table."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, listen to changes directly in your vue page / component:"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nimport type { RealtimeSubscription } from '@supabase/supabase-js'\n\nconst client = useSupabaseClient()\nlet subscription: RealtimeSubscription\n\n// Fetch collaborators and get the refresh method provided by useAsyncData\nconst { data: collaborators, refresh: refreshCollaborators } = await useAsyncData('collaborators', async () => {\n  const { data } = await client.from('collaborators').select('name')\n  return data\n})\n\n// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving event\nonMounted(() => {\n  subscription = client.from('collaborators').on('*', () => {\n    refreshCollaborators()\n  }).subscribe()\n})\n\n// Don't forget to unsubscribe when user left the page\nonUnmounted(() => {\n  client.removeSubscription(subscription)\n})\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\nimport type { RealtimeSubscription } from '@supabase/supabase-js'\n\nconst client = useSupabaseClient()\nlet subscription: RealtimeSubscription\n\n// Fetch collaborators and get the refresh method provided by useAsyncData\nconst { data: collaborators, refresh: refreshCollaborators } = await useAsyncData('collaborators', async () => {\n  const { data } = await client.from('collaborators').select('name')\n  return data\n})\n\n// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving event\nonMounted(() => {\n  subscription = client.from('collaborators').on('*', () => {\n    refreshCollaborators()\n  }).subscribe()\n})\n\n// Don't forget to unsubscribe when user left the page\nonUnmounted(() => {\n  client.removeSubscription(subscription)\n})\n</script>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"auth-middleware"},"children":[{"type":"text","value":"Auth middleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can protect your authenticated routes by creating a custom middleware in your project, here is an example:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtRouteMiddleware((to, _from) => {\n  const user = useSupabaseUser()\n\n  if (!user.value) {\n    return navigateTo('/login')\n  }\n})\n","filename":"middleware/auth.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtRouteMiddleware((to, _from) => {\n  const user = useSupabaseUser()\n\n  if (!user.value) {\n    return navigateTo('/login')\n  }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you can reference your middleware in your page with:"}]},{"type":"element","tag":"code","props":{"code":"definePageMeta({\n  middleware: 'auth'\n})\n","filename":"pages/dashboard.vue","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"definePageMeta({\n  middleware: 'auth'\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/middleware","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt middleware"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/pages#page-metadata","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"realtime"},"children":[{"type":"text","value":"Realtime"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on "},{"type":"element","tag":"a","props":{"href":"https://github.com/supabase/realtime","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase Realtime"}]},{"type":"text","value":", listen to changes in your PostgreSQL Database and broadcasts them over WebSockets."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enable it, make sure you have turned on the "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/guides/api#realtime-api-1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Real Time API"}]},{"type":"text","value":" for your table."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, listen to changes directly in your vue page / component:"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nimport type { RealtimeSubscription } from '@supabase/supabase-js'\n\nconst client = useSupabaseClient()\nlet subscription: RealtimeSubscription\n\n// Fetch collaborators and get the refresh method provided by useAsyncData\nconst { data: collaborators, refresh: refreshCollaborators } = await useAsyncData('collaborators', async () => {\n  const { data } = await client.from('collaborators').select('name')\n  return data\n})\n\n// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving event\nonMounted(() => {\n  subscription = client.from('collaborators').on('*', () => {\n    refreshCollaborators()\n  }).subscribe()\n})\n\n// Don't forget to unsubscribe when user left the page\nonUnmounted(() => {\n  client.removeSubscription(subscription)\n})\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"RealtimeSubscription"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'@supabase/supabase-js'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"useSupabaseClient"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"RealtimeSubscription"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// Fetch collaborators and get the refresh method provided by useAsyncData"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"collaborators"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"refreshCollaborators"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'collaborators'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'collaborators'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"select"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving event"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"onMounted"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'collaborators'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'*'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", () "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"refreshCollaborators"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  })."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"subscribe"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// Don't forget to unsubscribe when user left the page"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"onUnmounted"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"removeSubscription"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"auth-middleware"},"children":[{"type":"text","value":"Auth middleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can protect your authenticated routes by creating a custom middleware in your project, here is an example:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtRouteMiddleware((to, _from) => {\n  const user = useSupabaseUser()\n\n  if (!user.value) {\n    return navigateTo('/login')\n  }\n})\n","filename":"middleware/auth.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"defineNuxtRouteMiddleware"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"_from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"useSupabaseUser"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"navigateTo"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'/login'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you can reference your middleware in your page with:"}]},{"type":"element","tag":"code","props":{"code":"definePageMeta({\n  middleware: 'auth'\n})\n","filename":"pages/dashboard.vue","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"middleware"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'auth'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/middleware","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt middleware"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/pages#page-metadata","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"definePageMeta"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"realtime","depth":2,"text":"Realtime"},{"id":"auth-middleware","depth":2,"text":"Auth middleware"}]}},"_type":"markdown","_id":"content:4.advanced.md","_source":"content","_file":"4.advanced.md","_extension":"md"}