{"id":13810566,"url":"https://github.com/ndrbrt/vue-auth-ui","last_synced_at":"2025-09-10T04:18:20.662Z","repository":{"id":63264336,"uuid":"564375040","full_name":"ndrbrt/vue-auth-ui","owner":"ndrbrt","description":"Pre-built Auth UI for Vue","archived":false,"fork":false,"pushed_at":"2022-11-15T16:24:50.000Z","size":84,"stargazers_count":22,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T16:05:41.051Z","etag":null,"topics":["auth","firebase","pocketbase","supabase","ui-components","vue"],"latest_commit_sha":null,"homepage":"","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/ndrbrt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-10T15:26:43.000Z","updated_at":"2024-01-04T15:56:10.000Z","dependencies_parsed_at":"2022-11-16T01:15:24.739Z","dependency_job_id":null,"html_url":"https://github.com/ndrbrt/vue-auth-ui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrbrt%2Fvue-auth-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrbrt%2Fvue-auth-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrbrt%2Fvue-auth-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrbrt%2Fvue-auth-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndrbrt","download_url":"https://codeload.github.com/ndrbrt/vue-auth-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238275937,"owners_count":19445315,"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","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","firebase","pocketbase","supabase","ui-components","vue"],"created_at":"2024-08-04T02:01:00.640Z","updated_at":"2025-02-11T10:31:49.596Z","avatar_url":"https://github.com/ndrbrt.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# Vue Auth UI\n\nAuth UI is a pre-built Vue component for authenticating users.\n\n\u003cimg width=\"482\" alt=\"vue-aut-ui-themebold\" src=\"https://user-images.githubusercontent.com/7197797/201138351-02c1d26b-c5e1-4d73-a6bd-e7054d966ce8.png\"\u003e\n\u003c!-- \u003cimg width=\"482\" alt=\"vue-aut-ui-themesupa\" src=\"https://user-images.githubusercontent.com/7197797/201138497-3076ec55-4e35-4334-a102-90a91170d17a.png\"\u003e --\u003e\n\nThis started as a porting of [Supabase Auth UI](https://github.com/supabase/auth-ui) (React) to Vue. However, partly due to the fact that Vue encourages certain patterns, it ended up as a more generic Auth UI component that can be used with any authentication client and custom code.\n\nThat is because instead of passing the authentication client to the Auth UI component (like Supebase Auth UI), it's the Auth UI component itself that just emits proper events that can be mapped to a client functions, as you can see in the following example:\n\n```html\n\u003cscript setup\u003e\nimport { createClient } from '@supabase/supabase-js'\nimport { Auth } from 'vue-auth-ui'\n\nconst supabase = createClient(\n  'my-project-url',\n  'my-anon-key'\n)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cAuth\n    :providers=\"['google', 'apple']\"\n    @signInWithPassword=\"creds =\u003e supabase.auth.signInWithPassword(creds)\"\n    @signUp=\"creds =\u003e supabase.auth.signUp(creds)\"\n    @signInWithOAuth=\"provider =\u003e supabase.auth.signInWithOAuth(provider)\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Installation\n\n```bash\nnpm i vue-auth-ui\n```\n\n## Quick start\n\nThe easiest way to actually use the library is to import the Auth component and a theme:\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { createClient } from '@supabase/supabase-js'\nimport { Auth, ThemeBold, type Appereance, css } from 'vue-auth-ui'\n\nconst supabase = createClient(\n  'my-project-url',\n  'my-anon-key'\n)\n\nconst appearance: Appereance = {\n  theme: ThemeBold,\n  themeVariant: 'dark',\n  // In addition to theme and variant you can specify other preferences.\n  // More on that in the \"customization\" section.\n  prependedClassName: 'my-custom-class',\n  className: {\n    button: css({\n      variants: {\n        color: {\n          primary: {\n            backgroundColor: 'blue'\n          }\n        }\n      }\n    })\n  }\n}\n\nlet myError: string | undefined\nconst signIn = async (creds: any) =\u003e {\n  myError = undefined\n  const { data, error } = await supabase.auth.signInWithPassword(creds)\n  myError = error?.message\n\n  // Custom logic, like `router.push('/')` etc.\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cAuth\n    :providers=\"['google', 'apple']\"\n    socialLayout=\"col\"\n    :appearance=\"appearance\"\n    :error=\"myError\"\n    @signInWithPassword=\"creds =\u003e signIn(creds)\"\n    @signUp=\"creds =\u003e supabase.auth.signUp(creds)\"\n    @signInWithOAuth=\"provider =\u003e supabase.auth.signInWithOAuth(provider)\"\n  /\u003e\n\u003c/template\u003e\n```\n\nAlternatively, atomic components such as SignIn, SignUp, MagicLink, etc. can be used.  \nExample of a page with MagicLink:\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { createClient } from '@supabase/supabase-js'\nimport { MagicLink, Anchor, ThemeBold, type Appereance } from 'vue-auth-ui'\n\nconst supabase = createClient(\n  'my-project-url',\n  'my-anon-key'\n)\n\nconst appearance: Appereance = {\n  theme: ThemeBold,\n  themeVariant: 'dark'\n}\n\nconst signInWithOtp = async (email: {[key: string]: any}) =\u003e {\n  const { data, error } = await supabase.auth.signInWithOtp(email)\n\n  // ...\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cMagicLink\n    :appearance=\"appearance\"\n    @signInWithOtp=\"signInWithOtp\"\n  /\u003e\n  \u003c!--\n    Anchor component, styled according to the provided theme + prefs.\n    Renders an `\u003ca\u003e` tag by default, but can be customized within the `is` prop.\n   --\u003e\n  \u003cAnchor\n    is=\"router-link\"\n    to=\"/signin-with-password\"\n    :appearance=\"appearance\"\n  \u003e\n    Sign in with password\n  \u003c/Anchor\u003e\n\u003c/template\u003e\n```\n\n## Customization\n\nThe customization is pretty much the same as that of Supabase Auth UI, except for **one difference**:  \n\u003e in Supabase Auth UI, a theme variant can be specified by passing a `theme` prop directly to the Auth component; in Vue Auth UI a theme variant can be passed within the `appearance` object, in the `themeVariant` property.\n\nThat being said, you can refer to Supabase Auth UI docs for more information on customization:  \n[https://supabase.com/docs/guides/auth/auth-helpers/auth-ui#customization](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui#customization)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndrbrt%2Fvue-auth-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndrbrt%2Fvue-auth-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndrbrt%2Fvue-auth-ui/lists"}