Auth0Lab UI components provide a solid foundation for developing robust and user-friendly identity-related features in applications. For more details, check out our docs site.
The UI components provided from the experimental Auth0Lab 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 or the Auth0Lab discord.
First, install the dependencies:
pnpm installThen, run the development server:
pnpm devOpen http://localhost:3000 with your browser to see the result.
The code for the UI components, React hooks and NextJS routers can be found at registry.
- User Profile
- Basic Info
- User Metadata
- MFA Enrollment
- User Button
- Organization Switcher
- Organization Creator
Provides a detailed user profile with essential information, supporting MFA enrollment. For more info, visit the component docs.
<UserProfile
user={user}
userMetadata={{
address: "123 Fake st",
job_title: "Designer",
language: "es-AR",
}}
metadataSchema={z.object({
address: z.string(),
job_title: z.string(),
language: z.enum(languages),
})}
factors={[
{
name: "sms",
enabled: true,
enrollmentId: "phone|xxxxxxxxxx",
},
{ name: "push-notification", enabled: true },
{
name: "otp",
enabled: true,
enrollmentId: "totp|xxxxxxxxxx",
},
{ name: "webauthn-roaming", enabled: true },
{ name: "webauthn-platform", enabled: true },
]}
/>Displays essential user details, including name and nickname, providing a quick glance at user information. For more info, visit the component docs.
<BasicInfoForm user={user} />Displays and edits user metadata with schema validation. For more info, visit the component docs.
<UserMetadataForm
onSave={async () => {
alert("Saved!");
}}
schema={z.object({
address: z.string(),
job_title: z.string(),
language: z.enum(languages),
})}
defaultValues={{
address: "123 Fake st",
job_title: "Designer",
language: "es-AR",
}}
/>Allows users to view, enroll, and manage multi-factor authentication (MFA) enrollments with ease. For more info, visit the component docs.
<MFAEnrollment
factors={factors}
onFetch={async () => {
return { factors, status: 200 };
}}
onCreate={async (factor: string) => {
return { enrollment: { ticket_url: "https://auth0.com" }, status: 200 };
}}
onDelete={async (enrollmentId: string) => {
return { status: 200 };
}}
/>Offers a user menu for logged-in users, showing their info and allowing them to logout. For more info, visit the component docs.
<UserButton user={user}>
<DropdownMenu>
<DropdownMenuGroup>
<DropdownMenuItem>Theme</DropdownMenuItem>
<DropdownMenuItem>
Billing
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Settings
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</UserButton>Enables users to easily switch between different organizations or create new ones. For more info, visit the component docs.
<OrganizationSwitcher
createOrganizationUrl="/docs/components/organization-switcher"
user={{
given_name: "John",
family_name: "Doe",
nickname: "johndoe",
name: "John Doe",
email: "john.doe@acme.com",
}}
availableOrganizations={[
{
id: "org_xxxxxxxxxxx",
name: "acme",
display_name: "Acme",
picture: "https://cdn.auth0.com/avatars/b.png",
},
]}
subtitle="Basic (individual)"
/>Creates organizations quickly and easily, streamlining the process for admins and users. For more info, visit the component docs.
<OrganizationCreate
onCreate={async () => {
alert("Created!");
return { status: 200 };
}}
schema={z.object({
plan: z.enum(["basic", "starter", "business"], {
required_error: "You need to select a plan.",
}),
})}
defaultValues={{
plan: "basic",
}}
customFields={[
({ form }: any) => {
return (
<FormField
control={form.control}
name="plan"
render={({ field }) => (
<FormItem>
<FormLabel>Price Plan</FormLabel>
<FormControl>
<Select defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a verified email to display" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="basic">Basic</SelectItem>
<SelectItem value="starter">Starter</SelectItem>
<SelectItem value="business">Business</SelectItem>
</SelectContent>
</Select>
</FormControl>
</FormItem>
)}
/>
);
},
]}
/>For running the live example, you'll need to have the following values in your .env.local.
# A long, secret value used to encrypt the session cookie
AUTH0_SECRET='LONG_RANDOM_VALUE'
# The base url of your application
AUTH0_BASE_URL='http://localhost:3000'
# The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'
# Your Auth0 application's Client ID
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
# Your Auth0 application's Client Secret
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'
# Auth0 Management API Client ID
AUTH0_CLIENT_ID_MGMT="YOUR_AUTH0_MGMT_CLIENT_ID"
# Auth0 Management API Client SECRET
AUTH0_CLIENT_SECRET_MGMT="YOUR_AUTH0_MGMT_CLIENT_SECRET"
# Default connection when creating organizations
ORGANIZATIONS_ENABLED_CONNECTION="con_xxxxxxxxx"
# Token for LRU cache
LRU_CACHE_TOKEN="CACHE_TOKEN"You can execute the following command to generate a suitable string for the AUTH0_SECRET value:
node -e "console.log(crypto.randomBytes(32).toString('hex'))"Apache-2.0
