Headless Components & Slot Pattern

The Headless Components in auth² support the Slot pattern using the asChild prop, which allows you to customize the rendering while preserving all the underlying functionality. This pattern is perfect for integrating auth² components with your own design system.

For example, instead of using the default button rendering:

<InviteMember.Submit>Send invite</InviteMember.Submit>

You can use your own button component:

import { Button } from './your-ui-library';
 
<InviteMember.Submit asChild>
  <Button variant="primary" size="lg">
    Send invite
  </Button>
</InviteMember.Submit>;

This way, the Button component receives all the props and behavior from InviteMember.Submit (like disabled states and click handlers) while maintaining your application's visual identity.

Invite Members

The InviteMember headless component allows users to invite new members to an existing organization via email. This component provides a composable form interface that handles email validation and API communication internally.

import * as InviteMember from '@akarigar/auth/invite-member';
 
<InviteMember.Root
  onSuccess={() => {
    // Do something on success, such as closing a modal or showing a success message
  }}
  organizationId={organizationId}
>
  <InviteMember.Field>
    <InviteMember.Label>Email</InviteMember.Label>
    <InviteMember.Input placeholder="colleague@example.com" />
    <InviteMember.Message />
  </InviteMember.Field>
 
  <InviteMember.Submit>Send invite</InviteMember.Submit>
</InviteMember.Root>;

Each component can be styled individually using className props or the Slot pattern with asChild. The component handles:

• Email format validation
• Required field validation
• API communication with the organization invitation endpoint
• Loading states during submission
• Error messages from validation or API responses

The organizationId prop is required and specifies which organization the new member will be invited to. The onSuccess callback is triggered when an invitation has been successfully sent.

Create Organization

The CreateOrganization headless component allows users to create a new organization. This component provides a composable form interface that can be styled to match your application's design.

import * as CreateOrganization from '@akarigar/auth/create-org';
 
<CreateOrganization.Root
  onSuccess={(organization) => {
    // Do something with the newly created organization
    console.log('Created organization:', organization.id);
  }}
>
  <CreateOrganization.Field>
    <CreateOrganization.Label>Organization Name</CreateOrganization.Label>
    <CreateOrganization.Input placeholder="Enter organization name" />
    <CreateOrganization.Message />
  </CreateOrganization.Field>
 
  <CreateOrganization.Submit>Create Organization</CreateOrganization.Submit>
</CreateOrganization.Root>;

The component handles validation and API communication internally, providing a easy to use experience for creating organizations. The onSuccess callback is triggered with the newly created organization once the operation is complete.