@xylex-group/athena-auth-ui

Athena Auth UI components implemented with HeroUI internally. The npm package is published as @xylex-group/athena-auth-ui; HeroUI is an implementation detail rather than part of the package name.

Install

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

Required peer dependencies:

• react
• react-dom
• @heroui/react
• @heroui/styles
• @better-auth-ui/core
• @better-auth-ui/react
• @xylex-group/athena
• @tanstack/react-query
• @tanstack/react-pacer
• @gravity-ui/icons
• @internationalized/date
• bowser

Public API

The public API boundary is the package root:

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

Subpath imports are not part of the supported npm API. Components, page shells, email templates, plugin helpers, and Athena runtime utilities intended for consumers are exported from the root entrypoint.

Stable lower-level composition seams are also available from the root entrypoint for incremental adoption:

• OrganizationManager
• OrganizationSwitcher
• SettingsSectionsStack
• AuthTable
• TableEmptyState
• CheckEmail
• ResetEmailSent

Athena Client Setup

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>
  )
}

Athena transport helpers are available from dedicated subpaths so server code does not need to import from the UI barrel:

import { createAthenaAuthClient, createAthenaServerAuthClient } from "@xylex-group/athena-auth-ui/athena/client"
import { createAthenaAuthProxyHandlers } from "@xylex-group/athena-auth-ui/athena/proxy"
import { createAthenaQueryClient } from "@xylex-group/athena-auth-ui/athena/query-client"
import { pickAthenaAuthRequestHeaders } from "@xylex-group/athena-auth-ui/athena/request-headers"

These helpers cover browser auth clients, server auth clients, Next.js route handlers, selective auth-header forwarding, and React Query setup for SSR and hydration.

Pages And Components

Route-ready page shells include:

• AuthPage
• CheckEmailPage
• SignInPage
• SignUpPage
• ForgotPasswordPage
• ResetEmailSentPage
• ResetPasswordPage
• SignOutPage
• SettingsPage
• AccountSettingsPage
• SecuritySettingsPage

Standalone auth, settings, user, workspace, email, and plugin components intended for consumers are also exported from the root entrypoint.

OAuth Provider Control

Use ui.auth.methods.oauthProviders when you want to hide or disable specific social providers without reaching into the DOM:

import { SignInPage, type AthenaAuthUiOptions } from "@xylex-group/athena-auth-ui"

const ui: AthenaAuthUiOptions = {
  auth: {
    methods: {
      oauthProviders: {
        apple: "hidden",
        microsoft: "disabled"
      }
    }
  }
}

export function AuthScreen() {
  return <SignInPage ui={ui} />
}

Email Templates

import {
  EmailVerificationEmail,
  getAthenaAuthEmailTemplateCatalog
} from "@xylex-group/athena-auth-ui"

Each exported email component carries stable Athena Auth metadata such as templateKey, and the catalog helper can drive admin tooling or template selection UX.

Styling

Import HeroUI styles in your app and load the package styles entrypoint so Tailwind can scan the installed auth UI bundle:

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

License

MIT