Athena Auth UI

https://github.com/xylex-group/athena-auth-ui
Admin
Athena Auth UI is a monorepo containing the publishable HeroUI package, generated API documentation,...
Tokens:46,577
Snippets:834
Trust Score:6.3
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Deploy the example application

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Commands to deploy the example application.

```bash
bun run deploy
```

--------------------------------

### Start Development Server

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/next-heroui-example/README.md

Run the development server from the repository root.

```bash
bunx nx run next-heroui-example:dev
```

--------------------------------

### Install the package

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Use the package manager to add the library to your project.

```bash
bun add @xylex-group/athena-auth-ui
```

--------------------------------

### Install dependencies

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/native-heroui-example/README.md

Run this command to install all required project dependencies.

```bash
npm install
```

--------------------------------

### Start the development server

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/native-heroui-example/README.md

Launches the Expo development server to begin app development.

```bash
npx expo start
```

--------------------------------

### Deploy to Cloudflare Workers

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Commands for building and deploying the example app to Cloudflare.

```bash
# Build the OpenNext Worker bundle
bun run build:cloudflare

# Preview the Worker locally through Wrangler
bun run preview:cloudflare

# Full build + deploy to Cloudflare Workers
bun run deploy:cloudflare
```

--------------------------------

### Reset the project structure

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/native-heroui-example/README.md

Moves existing starter code to an app-example directory and initializes a blank app directory for a fresh start.

```bash
npm run reset-project
```

--------------------------------

### Install the package

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui-native/README.md

Use the bun package manager to add the native Athena Auth UI package to your project.

```bash
bun add @xylex-group/athena-auth-ui-native
```

--------------------------------

### Auth Provider Redirect Configuration

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/auth-proxy-routing-and-cookies.mdx

Example configuration for the redirect path passed to the AuthProvider.

```tsx
redirectTo="/settings/account"
```

--------------------------------

### Configure AthenaTable Controls

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/athena-table.mdx

Example configuration for the built-in top controls toolbar including search, sort, and status filtering.

```tsx
controls={{   search: { value: search, onChange: setSearch, placeholder: "Search..." },   sort: { value: sort, onChange: setSort, options: sortOptions },   statusFilter: { value: status, onChange: setStatus, options: statusOptions } }}
```

--------------------------------

### Set-Cookie Header Behavior

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/auth-proxy-routing-and-cookies.mdx

Examples of how the proxy handles Set-Cookie headers based on the rewriteSetCookiesToRequestOrigin configuration.

```txt
Set-Cookie: athena-auth.session_token=...; Domain=auth.example.com; Path=/; HttpOnly; Secure; SameSite=None
```

```txt
Input:
athena-auth.session_token=sess_123; Domain=auth.athena-auth.com; Path=/; HttpOnly; Secure; SameSite=None

Output:
athena-auth.session_token=sess_123; Path=/; HttpOnly; SameSite=Lax
```

--------------------------------

### Initialize Athena Auth Client

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Set up the AuthProvider with a client and plugins to wrap your authentication screens.

```tsx
import {
  AuthProvider,
  SignInPage,
  createAthenaAuthClient,
  createAthenaAuthPlugins
} from "@xylex-group/athena-auth-ui"

const authClient = createAthenaAuthClient()
const plugins = createAthenaAuthPlugins()

export function AuthScreen() {
  return (
    <AuthProvider authClient={authClient} plugins={plugins}>
      <SignInPage />
    </AuthProvider>
  )
}
```

--------------------------------

### Manage package versioning

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Commands to handle version increments using Nx Release.

```bash
# Create a patch release
bun x nx release --specifier patch
# or
bun run version:patch

# Create a minor release
bun x nx release --specifier minor
# or
bun run version:minor

# Prerelease
bun x nx release --specifier prerelease
# or
bun run version:prerelease

# Full interactive release (version + changelog + git tag + GitHub release)
bun x nx release
# or
bun run version
```

--------------------------------

### Generate HeroUI React documentation

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/AGENTS.md

Run this command to generate or update the local documentation for HeroUI React v3 when it is missing.

```bash
heroui agents-md --react --output
```

--------------------------------

### Import useCreateAdminApiKey

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-create-admin-api-key.mdx

Import the hook from the main package entrypoint.

```tsx
import { useCreateAdminApiKey } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SwitchAccountSubmenu

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/switch-account-submenu.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { SwitchAccountSubmenu } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SwitchAccountSubmenuItem

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/switch-account-submenu-item.mdx

Import the component from the primary package entrypoint.

```tsx
import { SwitchAccountSubmenuItem } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SettingsSectionsStack

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/settings-sections-stack.mdx

Import the component from the primary entrypoint.

```tsx
import { SettingsSectionsStack } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SwitchAccountSubmenuContent

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/switch-account-submenu-content.mdx

Import the component from the main package entrypoint.

```tsx
import { SwitchAccountSubmenuContent } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useCopyToClipboard hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-copy-to-clipboard.mdx

Import the hook from the primary package entrypoint.

```tsx
import { useCopyToClipboard } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Build and Run Docker Container

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/next-heroui-example/README.md

Commands to build the Docker image from the workspace root and execute the container with local environment variables.

```bash
docker build -f examples/next-heroui-example/Dockerfile -t athena-auth-ui-demo .
```

```bash
docker run --rm -p 3000:3000 --env-file examples/next-heroui-example/.env.local athena-auth-ui-demo
```

--------------------------------

### Deploy to Cloudflare Workers

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/examples/next-heroui-example/README.md

Build, preview, and deploy the application using Nx and OpenNext.

```bash
bunx nx run next-heroui-example:build
bunx nx run next-heroui-example:preview
bunx nx run next-heroui-example:deploy
```

--------------------------------

### Import AuthUiProvider

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/auth-ui-provider.mdx

Import the component from the primary package entrypoint.

```tsx
import { AuthUiProvider } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SecuritySettingsPage

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/security-settings-page.mdx

Import the component from the main package entrypoint.

```tsx
import { SecuritySettingsPage } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import Athena UI Icons

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/entrypoints/icons.mdx

Import the ExampleExport component from the icons package.

```tsx
import { ExampleExport } from "@xylex-group/athena-auth-ui/icons"
```

--------------------------------

### Import Settings Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/settings.mdx

Import the Settings component from the primary entrypoint.

```tsx
import { Settings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import MagicLink Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/magic-link.mdx

Import the component from the main library entrypoint.

```tsx
import { MagicLink } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminAuditLogsQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-audit-logs-query.mdx

Import the hook from the primary package entrypoint.

```tsx
import { useAdminAuditLogsQuery } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceLogsPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-logs-panel.mdx

Import the component from the main package entrypoint.

```tsx
import { WorkspaceLogsPanel } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SignUpPage

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-up-page.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { SignUpPage } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminPastEmailsQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-past-emails-query.mdx

Import the hook from the main package entrypoint.

```tsx
import { useAdminPastEmailsQuery } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import Passkeys Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/passkeys.mdx

Import the Passkeys component from the main package entrypoint.

```tsx
import { Passkeys } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import asRecord utility

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/as-record.mdx

Import the asRecord function from the utils entrypoint.

```tsx
import { asRecord } from "@xylex-group/athena-auth-ui/utils"
```

--------------------------------

### Import getBoolean utility

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/get-boolean.mdx

Import the function from the utils entrypoint or the main package.

```tsx
import { getBoolean } from "@xylex-group/athena-auth-ui/utils"
```

--------------------------------

### Import ThemeToggleItem component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/theme-toggle-item.mdx

Import the component from the primary package entrypoint.

```tsx
import { ThemeToggleItem } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import AccountSettingsPage

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/account-settings-page.mdx

Import the component from the primary entrypoint to use it in your application.

```tsx
import { AccountSettingsPage } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import asRecordOrEmpty

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/as-record-or-empty.mdx

Import the function from the utils entrypoint of the package.

```tsx
import { asRecordOrEmpty } from "@xylex-group/athena-auth-ui/utils"
```

--------------------------------

### Import NewDeviceEmail component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/new-device-email.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { NewDeviceEmail } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useCreateAdminAthenaClient

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-create-admin-athena-client.mdx

Import the hook from the primary package entrypoint.

```tsx
import { useCreateAdminAthenaClient } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Run common workspace commands

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Standard maintenance and build commands for the monorepo.

```bash
bun run lint
bun run typecheck
bun run build
bun run docs:generate
bun run package:publish
bun run package:publish:check
```

--------------------------------

### Import MagicLinkEmail component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/magic-link-email.mdx

Import the component from the main package entrypoint.

```tsx
import { MagicLinkEmail } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import getString utility

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/get-string.mdx

Import the getString function from the utility entrypoint.

```tsx
import { getString } from "@xylex-group/athena-auth-ui/utils"
```

--------------------------------

### Import UserView component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/user-view.mdx

Import the UserView component from the main package entrypoint.

```tsx
import { UserView } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import public API components

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Access core authentication components and client creators from the package root.

```tsx
import {
  AuthProvider,
  SignInPage,
  SettingsPage,
  createAthenaAuthClient,
  createAthenaAuthPlugins
} from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceOperationsSettings

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-operations-settings.mdx

Import the component from the main package entrypoint.

```tsx
import { WorkspaceOperationsSettings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import passkeyPlugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/passkey-plugin.mdx

Import the plugin from the plugins entrypoint to integrate passkey functionality.

```tsx
import { passkeyPlugin } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import StorageFilesCard

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/storage-files-card.mdx

Import the component from the primary package entrypoint.

```tsx
import { StorageFilesCard } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceSdkLabSettings

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-sdk-lab-settings.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { WorkspaceSdkLabSettings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceLogsSettings component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-logs-settings.mdx

Import the component from the primary package entrypoint.

```tsx
import { WorkspaceLogsSettings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import ApiKeys Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/api-keys.mdx

Import the ApiKeys component from the main package entrypoint.

```tsx
import { ApiKeys } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useClientPagination hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-client-pagination.mdx

Import the hook from the tables entrypoint or the main package.

```tsx
import { useClientPagination } from "@xylex-group/athena-auth-ui/tables"
```

--------------------------------

### Import AuthRoutingDebugOverlay

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/auth-routing-debug-overlay.mdx

Import the component from the primary package entrypoint.

```tsx
import { AuthRoutingDebugOverlay } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useUpsertAdminEmailRecord

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-upsert-admin-email-record.mdx

Import the hook from the main package entrypoint.

```tsx
import { useUpsertAdminEmailRecord } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import AuthProvider

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/auth-provider.mdx

Import the AuthProvider component from the package entrypoint.

```tsx
import { AuthProvider } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import normalizeMethodPath

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/normalize-method-path.mdx

Import the utility function from the main package entrypoint.

```tsx
import { normalizeMethodPath } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import AnimatedHeight component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/animated-height.mdx

Import the component from the main package or the primitives entrypoint.

```tsx
import { AnimatedHeight } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import ProviderButton

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/provider-button.mdx

Import the component from the main package entrypoint.

```tsx
import { ProviderButton } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import buildMethodCandidates

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/build-method-candidates.mdx

Import the function from the primary entrypoint of the package.

```tsx
import { buildMethodCandidates } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminAuditLogs hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-audit-logs.mdx

Import the hook from the main package entrypoint.

```tsx
import { useAdminAuditLogs } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SignInPage

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-in-page.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { SignInPage } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Publish the package

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/README.md

Commands for publishing the package to npm, including validation and direct filter methods.

```bash
bun run package:publish
# or
bun run publish
```

```bash
bun run package:publish:check
```

```bash
pnpm --filter @xylex-group/athena-auth-ui publish --access public
```

--------------------------------

### Import useFetchOAuthTokens hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-fetch-oauth-tokens.mdx

Import the hook from the primary package entrypoint.

```tsx
import { useFetchOAuthTokens } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAuthUiOptions Hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-auth-ui-options.mdx

Import the hook from the primary package entrypoint.

```tsx
import { useAuthUiOptions } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useUpsertEmailTemplate

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-upsert-email-template.mdx

Import the hook from the main package entrypoint.

```tsx
import { useUpsertEmailTemplate } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import ShikiCodeBlock

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/shiki-code-block.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { ShikiCodeBlock } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAthenaInfiniteTableQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-athena-infinite-table-query.mdx

Import the hook from the tables entrypoint or the main package.

```tsx
import { useAthenaInfiniteTableQuery } from "@xylex-group/athena-auth-ui/tables"
```

--------------------------------

### Import SdkMethodLabCard

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sdk-method-lab-card.mdx

Import the component from the @xylex-group/athena-auth-ui package.

```tsx
import { SdkMethodLabCard } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import apiKeyPlugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/api-key-plugin.mdx

Import the plugin from the designated plugins entrypoint.

```tsx
import { apiKeyPlugin } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Import OrganizationManager

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/organization-manager.mdx

Import the component from the main package entrypoint.

```tsx
import { OrganizationManager } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SignUp Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-up.mdx

Import the SignUp component from the @xylex-group/athena-auth-ui package.

```tsx
import { SignUp } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminEmailTemplatesQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-email-templates-query.mdx

Import the hook from the main package entrypoint.

```tsx
import { useAdminEmailTemplatesQuery } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminPastEmails hook

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-past-emails.mdx

Import the hook from the main package entrypoint.

```tsx
import { useAdminPastEmails } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useWorkspaceInboxQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-workspace-inbox-query.mdx

Import the hook from the @xylex-group/athena-auth-ui package.

```tsx
import { useWorkspaceInboxQuery } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceCommunicationsPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-communications-panel.mdx

Import the component from the primary package entrypoint.

```tsx
import { WorkspaceCommunicationsPanel } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceDocumentsSettings

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-documents-settings.mdx

Import the component from the primary entrypoint of the package.

```tsx
import { WorkspaceDocumentsSettings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useDeleteWorkspaceDocuments

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-delete-workspace-documents.mdx

Import the hook from the @xylex-group/athena-auth-ui package.

```tsx
import { useDeleteWorkspaceDocuments } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import Appearance Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/appearance.mdx

Import the Appearance component from the primary package entrypoint.

```tsx
import { Appearance } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceSdkLabPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-sdk-lab-panel.mdx

Import the component from the @xylex-group/athena-auth-ui package.

```tsx
import { WorkspaceSdkLabPanel } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import upsertRoom

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/upsert-room.mdx

Import the function from the chat entrypoint.

```tsx
import { upsertRoom } from "@xylex-group/athena-auth-ui/chat"
```

--------------------------------

### Import ManageAccount Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/manage-account.mdx

Import the component from the primary package entrypoint.

```tsx
import { ManageAccount } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import AuthPage

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/auth-page.mdx

Import the AuthPage component from the package entrypoint.

```tsx
import { AuthPage } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import DangerZone Component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/danger-zone.mdx

Import the component from the main package entrypoint.

```tsx
import { DangerZone } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceSettings component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-settings.mdx

Import the component from the primary package entrypoint.

```tsx
import { WorkspaceSettings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useWorkspaceDocumentsQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-workspace-documents-query.mdx

Import the hook from the primary package entrypoint.

```tsx
import { useWorkspaceDocumentsQuery } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceNotificationsSettings

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-notifications-settings.mdx

Import the component from the primary package entrypoint.

```tsx
import { WorkspaceNotificationsSettings } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useCreateAdminEmailFailure

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-create-admin-email-failure.mdx

Import the hook from the main package entrypoint.

```tsx
import { useCreateAdminEmailFailure } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useDeleteAdminEmailRecord

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-delete-admin-email-record.mdx

Import the hook from the @xylex-group/athena-auth-ui package.

```tsx
import { useDeleteAdminEmailRecord } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceActivityFeedCard

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-activity-feed-card.mdx

Import the component from the primary package entrypoint.

```tsx
import { WorkspaceActivityFeedCard } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import UserAvatar component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/user-avatar.mdx

Import the UserAvatar component from the main package entrypoint.

```tsx
import { UserAvatar } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import WorkspaceDocumentsPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-documents-panel.mdx

Import the component from the primary package entrypoint.

```tsx
import { WorkspaceDocumentsPanel } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import SignInUsername component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/sign-in-username.mdx

Import the component from the primary package entrypoint.

```tsx
import { SignInUsername } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import multiSessionPlugin

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/multi-session-plugin.mdx

Import the plugin from the designated plugins entrypoint.

```tsx
import { multiSessionPlugin } from "@xylex-group/athena-auth-ui/plugins"
```

--------------------------------

### Settings Component API

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/settings.mdx

The Settings component is the primary entrypoint for rendering the settings navigation shell and view.

```APIDOC
## Settings Component

### Description
Routes to the correct settings view and renders the responsive settings navigation shell.

### Import
```tsx
import { Settings } from "@xylex-group/athena-auth-ui"
```

### Props
- **className** (string | undefined) - Optional - CSS class name for the component.
- **hideNav** (boolean | undefined) - Optional - Whether to hide the navigation shell.
- **path** (string | undefined) - Optional - The navigation path.
- **ui** (AthenaAuthUiOptions | undefined) - Optional - Configuration options for the UI.
- **variant** ("default" | "secondary" | "tertiary" | "transparent" | undefined) - Optional - The visual variant of the component.
- **view** (AuthUiSettingsView | undefined) - Optional - The settings view to activate when path is not being used.
```

--------------------------------

### Configure CSS styles

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/packages/heroui/README.md

Import required styles to ensure Tailwind CSS can process the auth UI components.

```css
@import "tailwindcss";
@import "@heroui/styles";
@import "@xylex-group/athena-auth-ui/styles";
```

--------------------------------

### Import AthenaUiIcon component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/athena-ui-icon.mdx

Import the component from the primary package entrypoint.

```tsx
import { AthenaUiIcon } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Implement AuthRoute Shells

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/customization.mdx

Use these page components to handle authentication views without custom wrappers.

```tsx
import {
  CheckEmailPage,
  ResetEmailSentPage,
  SignInPage,
  SignUpPage,
} from "@xylex-group/athena-auth-ui"

type AuthView =
  | "sign-in"
  | "sign-up"
  | "check-email"
  | "reset-email-sent"

export function AuthRoute({ view }: { view: AuthView }) {
  if (view === "check-email") {
    return <CheckEmailPage />
  }

  if (view === "reset-email-sent") {
    return <ResetEmailSentPage />
  }

  if (view === "sign-up") {
    return <SignUpPage />
  }

  return <SignInPage />
}
```

--------------------------------

### Import WorkspaceSecurityPanel

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/workspace-security-panel.mdx

Import the component from the primary entrypoint of the library.

```tsx
import { WorkspaceSecurityPanel } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import TableEmptyState component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/table-empty-state.mdx

Import the component from the primary package or the specific tables entrypoint.

```tsx
import { TableEmptyState } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import useAdminEmailFailuresQuery

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/hooks/use-admin-email-failures-query.mdx

Import the hook from the main package entrypoint.

```tsx
import { useAdminEmailFailuresQuery } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### Import OrganizationInvitationEmail component

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/components/organization-invitation-email.mdx

Import the component from the main package entrypoint for use in server-side email rendering.

```tsx
import { OrganizationInvitationEmail } from "@xylex-group/athena-auth-ui"
```

--------------------------------

### methodCategory(path: string)

Source: https://github.com/xylex-group/athena-auth-ui/blob/main/docs/functions/method-category.mdx

Maps an Athena auth method path to a coarse category for the SDK lab UI.

```APIDOC
## methodCategory

### Description
Maps an Athena auth method path to a coarse category for the SDK lab UI.

### Signature
`methodCategory(path: string): string`

### Import
```tsx
import { methodCategory } from "@xylex-group/athena-auth-ui"
```
```
Tokens:
Raw