{"id":17784799,"url":"https://github.com/supa-kit/auth-ui-vue","last_synced_at":"2025-10-03T14:55:28.017Z","repository":{"id":186879349,"uuid":"672718739","full_name":"supa-kit/auth-ui-vue","owner":"supa-kit","description":"🔒 Pre-built Auth UI base on Supabase for Vue","archived":false,"fork":false,"pushed_at":"2025-09-11T03:59:44.000Z","size":5509,"stargazers_count":303,"open_issues_count":11,"forks_count":30,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-09-11T07:05:13.203Z","etag":null,"topics":["auth","authentication","authorization","nuxt3","supabase-auth","supabase-js","vue3"],"latest_commit_sha":null,"homepage":"https://auth-ui-vue.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/supa-kit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["xiaoluoboding"]}},"created_at":"2023-07-31T02:22:27.000Z","updated_at":"2025-09-11T03:59:48.000Z","dependencies_parsed_at":"2023-12-26T07:47:05.433Z","dependency_job_id":"5bbb1b1d-5b1a-4725-bd84-740a1d7afd75","html_url":"https://github.com/supa-kit/auth-ui-vue","commit_stats":{"total_commits":51,"total_committers":5,"mean_commits":10.2,"dds":0.0980392156862745,"last_synced_commit":"bf02841f7110709aa9a3def7dc9091e330c99010"},"previous_names":["nuxtbase/auth-ui-vue","supa-kit/auth-ui-vue"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/supa-kit/auth-ui-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supa-kit%2Fauth-ui-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supa-kit%2Fauth-ui-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supa-kit%2Fauth-ui-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supa-kit%2Fauth-ui-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/supa-kit","download_url":"https://codeload.github.com/supa-kit/auth-ui-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supa-kit%2Fauth-ui-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278180004,"owners_count":25943400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","authentication","authorization","nuxt3","supabase-auth","supabase-js","vue3"],"created_at":"2024-10-27T08:06:26.351Z","updated_at":"2025-10-03T14:55:27.689Z","avatar_url":"https://github.com/supa-kit.png","language":"Vue","funding_links":["https://github.com/sponsors/xiaoluoboding"],"categories":["Vue"],"sub_categories":[],"readme":"# Auth UI Vue\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https://img.shields.io/npm/v/@supa-kit/auth-ui-vue.svg?maxAge=2592000\n[npmUrl]: https://www.npmjs.com/package/@supa-kit/auth-ui-vue\n[npmDtBadge]: https://img.shields.io/npm/dt/@supa-kit/auth-ui-vue.svg\n[npmDtUrl]: https://www.npmjs.com/package/@supa-kit/auth-ui-vue\n[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/@supa-kit/auth-ui-vue\n[bundlePhobiaUrl]: https://bundlephobia.com/package/@supa-kit/auth-ui-vue@latest\n\n\u003e Pre-built auth widgets to get started in minutes.\n\n## Preview\n\nhttps://user-images.githubusercontent.com/6118824/260960744-03a20835-76bc-4541-87ac-2e23277b7200.mp4\n\n## Introduction\n\n`auth-ui-vue` is a pre-built, customizable `Vue` component for authenticating users base on `supabase`\n\nCustomizable authentication UI component with custom themes and extensible styles to match your brand and aesthetic.\n\n## Table of Contents\n\n- [Auth UI Vue](#auth-ui-vue)\n  - [Preview](#preview)\n  - [Introduction](#introduction)\n  - [Table of Contents](#table-of-contents)\n  - [Usage](#usage)\n    - [For Vue 3](#for-vue-3)\n    - [For Nuxt 3](#for-nuxt-3)\n  - [Set up Auth UI](#set-up-auth-ui)\n    - [Social Providers](#social-providers)\n    - [Options](#options)\n    - [Supported Views](#supported-views)\n    - [Anonymous Sign-ins](#anonymous-sign-ins)\n  - [Customization](#customization)\n    - [Predefined themes](#predefined-themes)\n    - [Switch theme variations](#switch-theme-variations)\n    - [Override themes](#override-themes)\n    - [Create your own theme](#create-your-own-theme)\n    - [Custom CSS classes](#custom-css-classes)\n    - [Custom inline CSS](#custom-inline-css)\n    - [Custom lables (i18n)](#custom-lables-i18n)\n  - [Auth Helpers](#auth-helpers)\n    - [UserContextProvider](#usercontextprovider)\n    - [useSupabaseUser](#usesupabaseuser)\n  - [Inspiration](#inspiration)\n  - [License](#license)\n\n## Usage\n\n### For Vue 3\n\nTo start using the library in Vue 3, install these in your project:\n\n```bash\npnpm install @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D\nor\nyarn add @supabase/supabase-js @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D\n```\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: ThemeSupa,\n      brand: 'emerald'\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  // Import predefined theme\n  import { ThemeSupa } from '@supabase/auth-ui-shared'\n  import { createClient } from '@supabase/supabase-js'\n\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n### For Nuxt 3\n\nTo begin, install the [Supabase module for Nuxt](https://github.com/nuxt-modules/supabase). The `auth-ui-vue` integration is seamless with this module.\n\nOr, You can choose to use it in the same way as in Vue 3.\n\nHere's a example work with `@nuxtjs/supabase`:\n\nFirst install these in your project:\n\n```bash\npnpm install @nuxtjs/supabase @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D\nor\nyarn add @nuxtjs/supabase @supabase/auth-ui-shared @supa-kit/auth-ui-vue -D\n```\n\nAdd `@nuxtjs/supabase` to the modules section of `nuxt.config.ts`:\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/supabase']\n})\n```\n\nAdd `SUPABASE_URL` and `SUPABASE_KEY` to the .env:\n\n```bash\nSUPABASE_URL=\"\u003cINSERT PROJECT URL\u003e\"\nSUPABASE_KEY=\"\u003cINSERT PROJECT ANON API KEY\u003e\"\n```\n\nNow, you can access the [supabase client](https://supabase.com/docs/reference/javascript/initializing) everywhere inside your vue components.\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: ThemeSupa\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  // Import predefined theme\n  import { ThemeSupa } from '@supabase/auth-ui-shared'\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = useSupabaseClient()\n\u003c/script\u003e\n```\n\n## Set up Auth UI\n\n### Social Providers\n\nThe Auth component also supports login with [official social providers](https://supabase.com/docs/guides/auth#providers).\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: ThemeSupa,\n    }\"\n    :providers=\"['google', 'facebook', 'twitter']\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  // Import predefined theme\n  import { ThemeSupa } from '@supabase/auth-ui-shared'\n  import { createClient } from '@supabase/supabase-js'\n\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n### Options\n\nOptions are available via `queryParams`:\n\n```html\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :providers=\"['google']\"\n    :queryParams=\"{\n      access_type: 'offline',\n      prompt: 'consent',\n      hd: 'domain.com'\n    }\"\n    onlyThirdPartyProviders\n  /\u003e\n  ...\n\u003c/tempalte\u003e\n```\n\n### Supported Views\n\nThe Auth component is currently shipped with the following views:\n\n- [Email Login](https://supabase.com/docs/guides/auth/auth-email)\n- [Magic Link login](https://supabase.com/docs/guides/auth/auth-magic-link)\n- [Social Login](https://supabase.com/docs/guides/auth/social-login)\n- [Update password](https://supabase.com/docs/guides/auth/auth-password-reset#update-password)\n- [Forgotten password](https://supabase.com/docs/guides/auth/auth-password-reset#sending-password-reset-email)\n- [Anonymous Sign-ins](https://supabase.com/docs/guides/auth/auth-anonymous)\n\n```html\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :providers=\"['google']\"\n    v-model:view=\"authView\"\n    :redirectTo=\"redirectTo\"\n  /\u003e\n  ...\n\u003c/tempalte\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst authView = ref('sign_in')\n\nconst redirectTo = computed(() =\u003e {\n  return authView.value === 'forgotten_password' ? FORGOTTEN_PASSWORD_URL : REDIRECT_TO_URL\n})\n\u003c/script\u003e\n\n```\n\n### Anonymous Sign-ins\n\nThe Auth component is currently support [Anonymous user login](https://supabase.com/docs/guides/auth/auth-anonymous#sign-in-anonymously).\nFor this you need to create an anonymous user\n\n```js\nconst { data, error } = await supabase.auth.signInAnonymously()\n```\n\n[Enable manual linking](https://supabase.com/dashboard/project/_/settings/auth) in supabase\n\nCurrently works for magic link and social login.\nIf you use password login, you need user to update password after he\n\n## Customization\n\nThere are several ways to customize Auth UI:\n\n- Use one of the [predefined themes](#predefined-themes) that comes with Auth UI\n- Extend a theme by [overriding the variable tokens](#override-themes) in a theme\n- [Create your own theme](#create-your-own-theme)\n- [Use your own CSS classes](#custom-css-classes)\n- [Use inline styles](#custom-inline-css)\n- [Use your own labels](#custom-lables-i18n)\n\n### Predefined themes\n\nAuth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, a `default` variation, and a `dark` variation. You can switch between these themes using the `theme` prop. Import the theme you want to use and pass it to the `appearance.theme` prop.\n\n```html\n\u003c!-- App.vue --\u003e\n\u003c!-- {/* Apply predefined theme */} --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: ThemeSupa,\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  // Import predefined theme\n  import { ThemeSupa } from '@supabase/auth-ui-shared'\n  import { createClient } from '@supabase/supabase-js'\n\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n\u003e Currently there is only one predefined theme available, but we plan to add more.\n\n### Switch theme variations\n\nAuth UI comes with two theme variations: `default` and `dark`. You can switch between these themes with the `theme` prop.\n\n```html\n\u003c!-- App.vue --\u003e\n\u003c!-- {/* Set theme to dark */} --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: ThemeSupa,\n    }\"\n    theme=\"dark\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  // Import predefined theme\n  import { ThemeSupa } from '@supabase/auth-ui-shared'\n  import { createClient } from '@supabase/supabase-js'\n\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\nIf you don't pass a value to `theme` it uses the `\"default\"` theme. You can pass `\"dark\"` to the theme prop to switch to the `dark` theme. If your theme has other variations, use the name of the variation in this prop.\n\n### Override themes\n\nAuth UI themes can be overridden using variable tokens. See the [list of variable tokens](https://github.com/supabase/auth-ui/blob/main/packages/shared/src/theming/Themes.ts).\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: ThemeSupa,\n      variables: {\n        default: {\n          colors: {\n            brand: 'red',\n            brandAccent: 'darkred'\n          }\n        }\n      }\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  // Import predefined theme\n  import { ThemeSupa } from '@supabase/auth-ui-shared'\n  import { createClient } from '@supabase/supabase-js'\n\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\nIf you created your own theme, you may not need to override any of the them.\n\n### Create your own theme\n\nYou can create your own theme by following the same structure within a `appearance.theme` property.\nSee the list of [tokens within a theme](https://github.com/supabase/auth-ui/blob/main/packages/shared/src/theming/Themes.ts).\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    theme=\"default\"\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      theme: customTheme\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { createClient } from '@supabase/supabase-js'\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const customTheme = {\n    default: {\n      colors: {\n        brand: 'hsl(153 60.0% 53.0%)',\n        brandAccent: 'hsl(154 54.8% 45.1%)',\n        brandButtonText: 'white'\n        // ..\n      }\n    },\n    dark: {\n      colors: {\n        brandButtonText: 'white',\n        defaultButtonBackground: '#2e2e2e',\n        defaultButtonBackgroundHover: '#3e3e3e'\n        //..\n      }\n    },\n    // You can also add more theme variations with different names.\n    evenDarker: {\n      colors: {\n        brandButtonText: 'white',\n        defaultButtonBackground: '#1e1e1e',\n        defaultButtonBackgroundHover: '#2e2e2e'\n        //..\n      }\n    }\n  }\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\nYou can swich between different variations of your theme with the [\"theme\" prop](#switch-theme-variations).\n\n### Custom CSS classes\n\nYou can use custom CSS classes for the following elements:\n`\"button\"`, `\"container\"`, `\"anchor\"`, `\"divider\"`, `\"label\"`, `\"input\"`, `\"loader\"`, `\"message\"`.\n\n```html\n\u003c!-- App.vue --\u003e\n\u003c!-- // If you want to extend the default styles instead of overriding it, set \"extend\" to true --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      extend: false,\n      className: {\n        anchor: 'my-awesome-anchor',\n        button: 'my-awesome-button',\n        //..\n      }\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { createClient } from '@supabase/supabase-js'\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n### Custom inline CSS\n\nYou can use custom CSS inline styles for the following elements:\n`\"button\"`, `\"container\"`, `\"anchor\"`, `\"divider\"`, `\"label\"`, `\"input\"`, `\"loader\"`, `\"message\"`.\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :appearance=\"{\n      style: {\n        button: { background: 'red', color: 'white' },\n        anchor: { color: 'blue' },\n        //..\n      }\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { createClient } from '@supabase/supabase-js'\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n### Custom lables (i18n)\n\nYou can use custom labels with localization.variables. See the [list of labels](https://github.com/supabase/auth-ui/blob/main/packages/shared/src/localization/en.json) that can be overwritten.\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  ...\n  \u003cAuth\n    :supabaseClient=\"supabaseClient\"\n    :localization=\"{\n      variables: {\n        sign_in: {\n          email_label: 'Your email address',\n          password_label: 'Your strong password'\n        }\n      }\n    }\"\n  /\u003e\n  ...\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { createClient } from '@supabase/supabase-js'\n  import { Auth } from '@supa-kit/auth-ui-vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n## Auth Helpers\n\n### UserContextProvider\n\n`auth-ui-vue` provides `UserContextProvider` to passing the supabase `user` and `session` data into the component tree.\n\nThis will be useful when the sub-components need to access the `user` data at any time in the project.\n\n```html\n\u003c!-- App.vue (parent component) --\u003e\n\u003ctemplate\u003e\n  \u003cUserContextProvider :supabaseClient=\"supabaseClient\"\u003e\n    \u003cProfile /\u003e\n  \u003c/UserContextProvider\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { createClient } from '@supabase/supabase-js'\n  import { UserContextProvider } from '@supa-kit/auth-ui-vue'\n\n  import Profile from '@/components/Profile.vue'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n\u003c/script\u003e\n```\n\n```html\n\u003c!-- Profile.vue (children component) --\u003e\n\u003ctemplate\u003e\n  \u003c!-- Read the supabase user data --\u003e\n  {{ user.email }}\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\n  import {\n    injectStrict,\n    UserContextProviderInjection,\n    UserContextProviderKey\n  } from '@supa-kit/auth-ui-vue'\n\n  const { user } = injectStrict\u003cUserContextProviderInjection\u003e(\n    UserContextProviderKey\n  )\n\u003c/script\u003e\n```\n\n### useSupabaseUser\n\nOnce logged in, you can access supabase user everywhere inside your vue components.\n\nOr you can protect your authenticated routes by watching the user's state, here is an example:\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- Access the supabase user data --\u003e\n  {{ supabaseUser.email }}\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\n  import { createClient } from '@supabase/supabase-js'\n\n  const supabaseClient = createClient(\n    '\u003cINSERT PROJECT URL\u003e',\n    '\u003cINSERT PROJECT ANON API KEY\u003e'\n  )\n  const { supabaseUser } = useSupabaseUser(supabaseClient)\n\n  watch(\n    () =\u003e supabaseUser.value,\n    (user) =\u003e {\n      if (!user) {\n        return router.push('/login')\n      }\n    },\n    { immediate: true }\n  )\n\u003c/script\u003e\n```\n\n## Inspiration\n\n- [@supabase/auth-ui-react](https://github.com/supabase/auth-ui) - Pre-built Auth UI for React.\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupa-kit%2Fauth-ui-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsupa-kit%2Fauth-ui-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupa-kit%2Fauth-ui-vue/lists"}