{"id":22092622,"url":"https://github.com/auth0-lab/a0-components","last_synced_at":"2025-04-06T16:12:27.306Z","repository":{"id":244449444,"uuid":"769273933","full_name":"auth0-lab/a0-components","owner":"auth0-lab","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-16T13:47:56.000Z","size":841,"stargazers_count":100,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-30T14:11:24.345Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://components.lab.auth0.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/auth0-lab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2024-03-08T17:46:30.000Z","updated_at":"2025-01-17T00:27:09.000Z","dependencies_parsed_at":"2024-06-14T19:53:15.761Z","dependency_job_id":"e42b4660-2951-4215-9df9-6ac4036837d7","html_url":"https://github.com/auth0-lab/a0-components","commit_stats":null,"previous_names":["auth0-lab/a0-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0-lab%2Fa0-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0-lab%2Fa0-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0-lab%2Fa0-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auth0-lab%2Fa0-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/auth0-lab","download_url":"https://codeload.github.com/auth0-lab/a0-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509235,"owners_count":20950232,"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":[],"created_at":"2024-12-01T03:10:03.634Z","updated_at":"2025-04-06T16:12:27.281Z","avatar_url":"https://github.com/auth0-lab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Auth0 Lab / UI Components\n\nAuth0Lab UI components provide a solid foundation for developing robust and user-friendly identity-related features in applications. For more details, check out our [docs](https://components.lab.auth0.com/docs) site.\n\n## Important\n\nThe UI components provided from the experimental [Auth0Lab](https://lab.auth0.com) library may not remain available or be incorporated into the Auth0 platform. The Auth0Lab UI components are community supported and are not directly supported by Auth0 by Okta. All questions should be directed to the open source [repository](https://github.com/auth0-lab/a0-components) or the [Auth0Lab discord](https://discord.gg/QGHxwDsbQQ).\n\n## Getting Started\n\nFirst, install the dependencies:\n\n```bash\npnpm install\n```\n\nThen, run the development server:\n\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Components\n\nThe code for the UI components, React hooks and NextJS routers can be found at [registry](https://github.com/auth0-lab/a0-components/tree/main/registry).\n\n- [User Profile](#user-profile)\n- [Basic Info](#basic-info)\n- [User Metadata](#user-metadata)\n- [MFA Enrollment](#mfa-enrollment)\n- [User Button](#user-button)\n- [Organization Switcher](#organization-switcher)\n- [Organization Creator](#organization-creator)\n\n### User Profile\n\nProvides a detailed user profile with essential information, supporting MFA enrollment. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/user-profile).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/user-profile.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cUserProfile\n  user={user}\n  userMetadata={{\n    address: \"123 Fake st\",\n    job_title: \"Designer\",\n    language: \"es-AR\",\n  }}\n  metadataSchema={z.object({\n    address: z.string(),\n    job_title: z.string(),\n    language: z.enum(languages),\n  })}\n  factors={[\n    {\n      name: \"sms\",\n      enabled: true,\n      enrollmentId: \"phone|xxxxxxxxxx\",\n    },\n    { name: \"push-notification\", enabled: true },\n    {\n      name: \"otp\",\n      enabled: true,\n      enrollmentId: \"totp|xxxxxxxxxx\",\n    },\n    { name: \"webauthn-roaming\", enabled: true },\n    { name: \"webauthn-platform\", enabled: true },\n  ]}\n/\u003e\n```\n\n### Basic Info\n\nDisplays essential user details, including name and nickname, providing a quick glance at user information. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/basic-info).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/basic-info.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cBasicInfoForm user={user} /\u003e\n```\n\n### User Metadata\n\nDisplays and edits user metadata with schema validation. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/user-metadata).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/user-metadata.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cUserMetadataForm\n  onSave={async () =\u003e {\n    alert(\"Saved!\");\n  }}\n  schema={z.object({\n    address: z.string(),\n    job_title: z.string(),\n    language: z.enum(languages),\n  })}\n  defaultValues={{\n    address: \"123 Fake st\",\n    job_title: \"Designer\",\n    language: \"es-AR\",\n  }}\n/\u003e\n```\n\n### MFA Enrollment\n\nAllows users to view, enroll, and manage multi-factor authentication (MFA) enrollments with ease. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/mfa-enrollment).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/mfa-enrollment.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cMFAEnrollment\n  factors={factors}\n  onFetch={async () =\u003e {\n    return { factors, status: 200 };\n  }}\n  onCreate={async (factor: string) =\u003e {\n    return { enrollment: { ticket_url: \"https://auth0.com\" }, status: 200 };\n  }}\n  onDelete={async (enrollmentId: string) =\u003e {\n    return { status: 200 };\n  }}\n/\u003e\n```\n\n### User Button\n\nOffers a user menu for logged-in users, showing their info and allowing them to logout. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/user-button).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/user-button.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cUserButton user={user}\u003e\n  \u003cDropdownMenu\u003e\n    \u003cDropdownMenuGroup\u003e\n      \u003cDropdownMenuItem\u003eTheme\u003c/DropdownMenuItem\u003e\n      \u003cDropdownMenuItem\u003e\n        Billing\n        \u003cDropdownMenuShortcut\u003e⌘B\u003c/DropdownMenuShortcut\u003e\n      \u003c/DropdownMenuItem\u003e\n      \u003cDropdownMenuItem\u003e\n        Settings\n        \u003cDropdownMenuShortcut\u003e⌘S\u003c/DropdownMenuShortcut\u003e\n      \u003c/DropdownMenuItem\u003e\n    \u003c/DropdownMenuGroup\u003e\n  \u003c/DropdownMenu\u003e\n\u003c/UserButton\u003e\n```\n\n### Organization Switcher\n\nEnables users to easily switch between different organizations or create new ones. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/organization-switcher).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/organization-switcher.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cOrganizationSwitcher\n  createOrganizationUrl=\"/docs/components/organization-switcher\"\n  user={{\n    given_name: \"John\",\n    family_name: \"Doe\",\n    nickname: \"johndoe\",\n    name: \"John Doe\",\n    email: \"john.doe@acme.com\",\n  }}\n  availableOrganizations={[\n    {\n      id: \"org_xxxxxxxxxxx\",\n      name: \"acme\",\n      display_name: \"Acme\",\n      picture: \"https://cdn.auth0.com/avatars/b.png\",\n    },\n  ]}\n  subtitle=\"Basic (individual)\"\n/\u003e\n```\n\n### Organization Creator\n\nCreates organizations quickly and easily, streamlining the process for admins and users. For more info, visit the component [docs](https://components.lab.auth0.com/docs/components/organization-creator).\n\n\u003cimg src=\"https://cdn.auth0.com/website/labs/components/organization-creator.png\" width=\"700px\"\u003e\n\n#### Code Sample\n\n```tsx\n\u003cOrganizationCreate\n  onCreate={async () =\u003e {\n    alert(\"Created!\");\n    return { status: 200 };\n  }}\n  schema={z.object({\n    plan: z.enum([\"basic\", \"starter\", \"business\"], {\n      required_error: \"You need to select a plan.\",\n    }),\n  })}\n  defaultValues={{\n    plan: \"basic\",\n  }}\n  customFields={[\n    ({ form }: any) =\u003e {\n      return (\n        \u003cFormField\n          control={form.control}\n          name=\"plan\"\n          render={({ field }) =\u003e (\n            \u003cFormItem\u003e\n              \u003cFormLabel\u003ePrice Plan\u003c/FormLabel\u003e\n              \u003cFormControl\u003e\n                \u003cSelect defaultValue={field.value}\u003e\n                  \u003cFormControl\u003e\n                    \u003cSelectTrigger\u003e\n                      \u003cSelectValue placeholder=\"Select a verified email to display\" /\u003e\n                    \u003c/SelectTrigger\u003e\n                  \u003c/FormControl\u003e\n                  \u003cSelectContent\u003e\n                    \u003cSelectItem value=\"basic\"\u003eBasic\u003c/SelectItem\u003e\n                    \u003cSelectItem value=\"starter\"\u003eStarter\u003c/SelectItem\u003e\n                    \u003cSelectItem value=\"business\"\u003eBusiness\u003c/SelectItem\u003e\n                  \u003c/SelectContent\u003e\n                \u003c/Select\u003e\n              \u003c/FormControl\u003e\n            \u003c/FormItem\u003e\n          )}\n        /\u003e\n      );\n    },\n  ]}\n/\u003e\n```\n\n## Live Example\n\nFor running the live example, you'll need to have the following values in your `.env.local`.\n\n```bash\n# A long, secret value used to encrypt the session cookie\nAUTH0_SECRET='LONG_RANDOM_VALUE'\n# The base url of your application\nAUTH0_BASE_URL='http://localhost:3000'\n# The url of your Auth0 tenant domain\nAUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'\n# Your Auth0 application's Client ID\nAUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'\n# Your Auth0 application's Client Secret\nAUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'\n# Auth0 Management API Client ID\nAUTH0_CLIENT_ID_MGMT=\"YOUR_AUTH0_MGMT_CLIENT_ID\"\n# Auth0 Management API Client SECRET\nAUTH0_CLIENT_SECRET_MGMT=\"YOUR_AUTH0_MGMT_CLIENT_SECRET\"\n# Default connection when creating organizations\nORGANIZATIONS_ENABLED_CONNECTION=\"con_xxxxxxxxx\"\n# Token for LRU cache\nLRU_CACHE_TOKEN=\"CACHE_TOKEN\"\n```\n\nYou can execute the following command to generate a suitable string for the `AUTH0_SECRET` value:\n\n```bash\nnode -e \"console.log(crypto.randomBytes(32).toString('hex'))\"\n```\n\n## License\n\nApache-2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauth0-lab%2Fa0-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauth0-lab%2Fa0-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauth0-lab%2Fa0-components/lists"}