[{"_path":"/usage/composables","_draft":false,"_partial":false,"_empty":false,"title":"Vue composables","description":"Learn how to use auto-imported composables inside your vue files.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkout the Nuxt3 documentation for "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported composables"}]},{"type":"text","value":" to learn more."}]},{"type":"element","tag":"h2","props":{"id":"usesupabaseclient"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useSupabaseClient"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This composable is using "},{"type":"element","tag":"a","props":{"href":"https://github.com/supabase/supabase-js/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"supabase-js"}]},{"type":"text","value":" under the hood, it gives acces to the "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/supabase-client","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase client"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The client is initialized with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SUPABASE_KEY"}]},{"type":"text","value":" you must have in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. It establishes the connection with the database and make use of user JWT to apply "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"RLS Policies"}]},{"type":"text","value":" implemented in Supabase. If you want to bypass policies, you can use the "},{"type":"element","tag":"a","props":{"href":"/usage/services#serversupabaseservicerole"},"children":[{"type":"text","value":"serverSupabaseServiceRole"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst client = useSupabaseClient()\n\n// Example: client.from('librairies').eq('name', 'Vue').single()\n</script>\n","filename":"pages/index.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nconst client = useSupabaseClient()\n\n// Example: client.from('librairies').eq('name', 'Vue').single()\n</script>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"authentification"},"children":[{"type":"text","value":"Authentification"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All authentification methods are available on "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/auth-signup","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase Auth"}]},{"type":"text","value":" Documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of the login using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"signIn"}]},{"type":"text","value":" method with "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"third-party providers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nconst user = useSupabaseUser()\nconst client = useSupabaseClient()\nconst router = useRouter()\n\n// Login method using providers\nconst login = async (provider: 'github' | 'google' | 'gitlab' | 'bitbucket') => {\n  const { error } = await client.auth.signIn({ provider })\n\n  if (error) {\n    return alert('Something went wrong !')\n  }\n\n  router.push('/dashboard')\n}\n</script>\n\n<template>\n  <button @click=\"login('github')\">Login with GitHub</button>\n</template>\n","filename":"pages/login.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\nconst user = useSupabaseUser()\nconst client = useSupabaseClient()\nconst router = useRouter()\n\n// Login method using providers\nconst login = async (provider: 'github' | 'google' | 'gitlab' | 'bitbucket') => {\n  const { error } = await client.auth.signIn({ provider })\n\n  if (error) {\n    return alert('Something went wrong !')\n  }\n\n  router.push('/dashboard')\n}\n</script>\n\n<template>\n  <button @click=\"login('github')\">Login with GitHub</button>\n</template>\n"}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Thanks to the "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/plugins","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt plugin"}]},{"type":"text","value":", we are listening to the "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/auth-onauthstatechange","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"onAuthStateChange"}]},{"type":"text","value":" listener in order to update the user value according to the received event. We also keep the session consistency between client and server side."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Take a look at the "},{"type":"element","tag":"a","props":{"href":"/advanced"},"children":[{"type":"text","value":"advanced"}]},{"type":"text","value":" section to learn how to leverage Nuxt middleware to protect your routes for unauthenticated users."}]}]},{"type":"element","tag":"h3","props":{"id":"database-request"},"children":[{"type":"text","value":"Database Request"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please check "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/select","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase"}]},{"type":"text","value":" documentation to fully use the power of Supabase client."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of a fetch using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" method with Nuxt 3 "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/usage/data-fetching#useasyncdata","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"text","value":" composable."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nconst client = useSupabaseClient()\n\nconst { data: restaurant } = await useAsyncData('restaurant', async () => {\n  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()\n\n  return data\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\">\nconst client = useSupabaseClient()\n\nconst { data: restaurant } = await useAsyncData('restaurant', async () => {\n  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()\n\n  return data\n})\n</script>\n"}]}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"usesupabaseuser"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useSupabaseUser"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once logged in, you can access your user everywhere:"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst user = useSupabaseUser()\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nconst user = useSupabaseUser()\n</script>\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn how to protect your routes by writing your own "},{"type":"element","tag":"a","props":{"href":"/advanced#auth-middleware"},"children":[{"type":"text","value":"auth middleware composable"}]},{"type":"text","value":"."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkout the Nuxt3 documentation for "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported composables"}]},{"type":"text","value":" to learn more."}]},{"type":"element","tag":"h2","props":{"id":"usesupabaseclient"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useSupabaseClient"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This composable is using "},{"type":"element","tag":"a","props":{"href":"https://github.com/supabase/supabase-js/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"supabase-js"}]},{"type":"text","value":" under the hood, it gives acces to the "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/supabase-client","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase client"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The client is initialized with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SUPABASE_KEY"}]},{"type":"text","value":" you must have in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. It establishes the connection with the database and make use of user JWT to apply "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"RLS Policies"}]},{"type":"text","value":" implemented in Supabase. If you want to bypass policies, you can use the "},{"type":"element","tag":"a","props":{"href":"/usage/services#serversupabaseservicerole"},"children":[{"type":"text","value":"serverSupabaseServiceRole"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst client = useSupabaseClient()\n\n// Example: client.from('librairies').eq('name', 'Vue').single()\n</script>\n","filename":"pages/index.vue","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":{"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":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// Example: client.from('librairies').eq('name', 'Vue').single()"}]}]},{"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":"h3","props":{"id":"authentification"},"children":[{"type":"text","value":"Authentification"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All authentification methods are available on "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/auth-signup","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase Auth"}]},{"type":"text","value":" Documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of the login using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"signIn"}]},{"type":"text","value":" method with "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"third-party providers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nconst user = useSupabaseUser()\nconst client = useSupabaseClient()\nconst router = useRouter()\n\n// Login method using providers\nconst login = async (provider: 'github' | 'google' | 'gitlab' | 'bitbucket') => {\n  const { error } = await client.auth.signIn({ provider })\n\n  if (error) {\n    return alert('Something went wrong !')\n  }\n\n  router.push('/dashboard')\n}\n</script>\n\n<template>\n  <button @click=\"login('github')\">Login with GitHub</button>\n</template>\n","filename":"pages/login.vue","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":"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":{"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":"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":"router"}]},{"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":"useRouter"}]},{"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":"// Login method using providers"}]}]},{"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":"#61AFEF"}},"children":[{"type":"text","value":"login"}]},{"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":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'github'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" | "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'google'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" | "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitlab'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" | "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'bitbucket'"}]},{"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":"error"}]},{"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":"#E5C07B"}},"children":[{"type":"text","value":"auth"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"signIn"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"provider"}]},{"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":"#E06C75"}},"children":[{"type":"text","value":"error"}]},{"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":"alert"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'Something went wrong !'"}]},{"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":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'/dashboard'"}]},{"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":"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":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"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":"#D19A66"}},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"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":"login"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'github'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"Login"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"with"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GitHub"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"button"}]},{"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":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Thanks to the "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/plugins","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt plugin"}]},{"type":"text","value":", we are listening to the "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/auth-onauthstatechange","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"onAuthStateChange"}]},{"type":"text","value":" listener in order to update the user value according to the received event. We also keep the session consistency between client and server side."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Take a look at the "},{"type":"element","tag":"a","props":{"href":"/advanced"},"children":[{"type":"text","value":"advanced"}]},{"type":"text","value":" section to learn how to leverage Nuxt middleware to protect your routes for unauthenticated users."}]}]},{"type":"element","tag":"h3","props":{"id":"database-request"},"children":[{"type":"text","value":"Database Request"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please check "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/docs/reference/javascript/select","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase"}]},{"type":"text","value":" documentation to fully use the power of Supabase client."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of a fetch using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" method with Nuxt 3 "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/usage/data-fetching#useasyncdata","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"text","value":" composable."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nconst client = useSupabaseClient()\n\nconst { data: restaurant } = await useAsyncData('restaurant', async () => {\n  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()\n\n  return data\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":"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":{"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":"restaurant"}]},{"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":"'restaurant'"}]},{"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":"'restaurants'"}]},{"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, location'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"eq"}]},{"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":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'My Restaurant Name'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"single"}]},{"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":"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":{"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":"br","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"usesupabaseuser"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useSupabaseUser"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once logged in, you can access your user everywhere:"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst user = useSupabaseUser()\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":{"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":"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":{"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":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn how to protect your routes by writing your own "},{"type":"element","tag":"a","props":{"href":"/advanced#auth-middleware"},"children":[{"type":"text","value":"auth middleware composable"}]},{"type":"text","value":"."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usesupabaseclient","depth":2,"text":"useSupabaseClient","children":[{"id":"authentification","depth":3,"text":"Authentification"},{"id":"database-request","depth":3,"text":"Database Request"}]},{"id":"usesupabaseuser","depth":2,"text":"useSupabaseUser"}]}},"_type":"markdown","_id":"content:3.usage:1.composables.md","_source":"content","_file":"3.usage/1.composables.md","_extension":"md"},{"_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"}]