{"id":24475030,"url":"https://github.com/anthonylan/indiebold-authkit","last_synced_at":"2026-01-26T08:35:49.231Z","repository":{"id":262654343,"uuid":"887934494","full_name":"anthonylan/indiebold-authkit","owner":"anthonylan","description":"Pre-built, unstyled Vue components for user authentication, built on top of Supabase's APIs","archived":false,"fork":false,"pushed_at":"2024-11-13T14:50:57.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-21T22:29:01.878Z","etag":null,"topics":["reusable-components","supabase","supabase-auth","user-authentication","vue-auth"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anthonylan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-11-13T14:33:38.000Z","updated_at":"2024-11-13T16:47:58.000Z","dependencies_parsed_at":"2024-11-13T21:00:34.724Z","dependency_job_id":null,"html_url":"https://github.com/anthonylan/indiebold-authkit","commit_stats":null,"previous_names":["anthonylan/indiebold-authkit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anthonylan/indiebold-authkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Findiebold-authkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Findiebold-authkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Findiebold-authkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Findiebold-authkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonylan","download_url":"https://codeload.github.com/anthonylan/indiebold-authkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Findiebold-authkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28770935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T07:45:00.504Z","status":"ssl_error","status_checked_at":"2026-01-26T07:45:00.070Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["reusable-components","supabase","supabase-auth","user-authentication","vue-auth"],"created_at":"2025-01-21T09:11:59.541Z","updated_at":"2026-01-26T08:35:49.212Z","avatar_url":"https://github.com/anthonylan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# IndieBold AuthKit Vue Component powered by Supabase\n\nThis component provides a social login and email authentication functionality. It allows users to authenticate using different social providers (e.g., Google, Facebook) or through email/password authentication. \n\n```sh\nnpm install @indiebold/authkit\n```\n\n```javascript\nimport { createApp } from 'vue'\nimport AuthKit from '@indiebold/authkit'\n\nconst app = createApp(App);\n\n\napp.use(AuthKit, {\n    supabase: {\n        url: 'your_supabase_url',\n        key: 'your_supabase_key'\n    }\n})\n```\n\n## Table of Contents\n1. [Props](#props)\n2. [Events](#events)\n3. [Styling](#styling)\n4. [Usage](#usage)\n\n---\n\n## Props\n\n### `socials` (optional)\nAn object that defines the social login settings.\n\n- **`providers`** (array): A list of social login providers (e.g., `['google', 'facebook']`).\n- **`callbackUrl`** (string): URL to redirect to after successful authentication.\n- **`showLabel`** (boolean, optional): Determines if the provider name should be displayed alongside the icon (default: `false`).\n- **`btnClass`** (string, optional): A custom CSS class for the login buttons.\n- **`fluid`** (boolean, optional): If `true`, the buttons will stack vertically (default: `false`).\n\n### `classNames` (optional)\nAn object to apply custom CSS classes to specific elements.\n\n- **`btnPrimary`** (string, optional): A class for the primary submit button.\n- **`btnLoading`** (string, optional): A class to apply when the component is loading.\n- **`input`** (string, optional): A class for the input fields.\n\n### `config` (optional)\nAn object to customize input labels and the UI type (either 'login' or 'signup').\n\n- **`showInputLabel`** (boolean): Controls whether input labels are displayed (default: `true`).\n- **`ui`** (string): The UI mode ('login' or 'signup').\n\n---\n\n## Events\n\n- **`success`**: Emitted when the authentication is successful.\n- **`error`**: Emitted when an error occurs during authentication.\n\n---\n## Styling\n\nThe component uses inline styles for layout and button design. You can override these styles by passing custom classes via the `classNames` prop.\n\n\n\n---\n\n## Usage\n\n### Example\n```vue\n\u003ctemplate\u003e\n  \u003cAuthFlow\n    :socials=\"{\n      providers: ['google', 'facebook'],\n      callbackUrl: 'https://your-app.com/callback',\n      showLabel: true,\n      btnClass: 'custom-btn-class'\n    }\"\n    :classNames=\"{\n      btnPrimary: 'btn-primary',\n      btnLoading: 'btn-loading',\n      input: 'custom-input-class'\n    }\"\n    :config=\"{\n      showInputLabel: true,\n      ui: 'login'\n    }\"\n    @success=\"handleSuccess\"\n    @error=\"handleError\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { AuthFlow } from '@indiebold/authkit';\n\nconst handleSuccess = (data: any) =\u003e {\n  console.log('Successful:', data);\n};\n\nconst handleError = (error: string) =\u003e {\n  console.error('Error:', error);\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  /* Import fontawesome if you intend to use social logins */\n  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');\n\u003c/style\u003e\n```\n\n\n\n\n\n\n# Password Recovery \u0026 Reset Component\n\nThis Vue component handles the user flow for password recovery and resetting. It includes two forms: one for resetting the password via email and another for updating the password once the user has received a reset link.\n\n## Props\n\n### `classNames`\nAn object to customize the CSS class names for various elements.\n- **btnPrimary** *(optional)*: The class for the primary button.\n- **btnLoading** *(optional)*: The class for the button in a loading state.\n- **input** *(optional)*: The class for input fields.\n\n### `config`\nAn object containing configuration options.\n- **updatePasswordUrl**: The URL to which the user will be redirected to update their password.\n- **showInputLabel** *(optional, default: `true`)*: Whether to display input labels.\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cPasswordRecovery\n    :classNames=\"{\n      btnPrimary: 'btn-primary',\n      btnLoading: 'btn-loading',\n      input: 'custom-input-class'\n    }\"\n    :config=\"{\n      showInputLabel: true,\n      updatePasswordUrl: '/set-new-password'\n    }\"\n    @success=\"handleSuccess\"\n    @error=\"handleError\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { PasswordRecovery } from '@indiebold/authkit';\n\nconst handleSuccess = (data: any) =\u003e {\n  console.log('Successful:', data);\n};\n\nconst handleError = (error: string) =\u003e {\n  console.error('Error:', error);\n};\n\u003c/script\u003e\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonylan%2Findiebold-authkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonylan%2Findiebold-authkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonylan%2Findiebold-authkit/lists"}