[null,{"_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"}]