@kodifly/kodifly-auth

Enterprise-ready authentication and user-management UI blocks built on top of Ant Design Pro Components. Drop in opinionated, accessible flows like sign-in, password reset, OTP verification, and profile management without re-inventing every input, validation rule, or i18n string.

Highlights

• Ready-to-ship auth flows: SignInForm, RegisterForm, ForgotPasswordForm, OTPForm, ResetPasswordForm, PasswordExpire, and VerifyPage
• Profile-centric layouts and widgets: ProfilePageLayout, UserProfile, editable profile forms, avatar sections, and reusable modals
• Built with Ant Design v5 and Pro Components, so tokens, dark mode, and layout primitives just work
• First-class TypeScript definitions and composable building blocks (buttons, inputs, wrappers) for mixing in custom business logic

Installation

npm install @kodifly/kodifly-auth \
  @ant-design/icons @ant-design/pro-components antd antd-style react react-dom

The package ships the original source so your bundler should already understand TypeScript and Less (the library imports src/styles/main.less). If your toolchain does not support Less, add a Less loader or transpile the file during build.

Quick Start

import React from 'react';
import {
  SignInForm,
  ForgotPasswordForm,
  ResetPasswordForm,
  ProfilePageLayout,
} from '@kodifly/kodifly-auth';
import '@kodifly/kodifly-auth/src/styles/main.less';

export default function AuthExample() {
  const handleLogin = async (values) => {
    await api.auth.login(values); // throw with { fields } to surface field-level errors
  };

  return (
    <ProfilePageLayout>
      <SignInForm
        title="Welcome back"
        logo="/brand.svg"
        language="en"
        showSignUpAction
        packageVersion="3.0.14"
        onLogin={handleLogin}
        onSignUp={() => router.push('/register')}
        onForgotPass={() => modal.open(<ForgotPasswordForm />)}
        onPasswordExpireRedirect={() => router.push('/password-expired')}
      />
    </ProfilePageLayout>
  );
}

Error handling contract

SignInForm inspects thrown error.fields objects and automatically maps well-known keys (email, password, password_expired, etc.) back into Ant Design forms, so you only need to surface validation messages from your API layer. Callbacks such as onPasswordExpireRedirect let you redirect when the backend signals special states.

Component Surface

| Area | Component(s) | Notes | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Auth flows | SignInForm, RegisterForm, ForgotPasswordForm, ResetPasswordForm, OTPForm, VerifyPage, PasswordExpire | Ready-made screens, built-in i18n (English and Indonesian), button state guards, and Ant Design validation | | Login shell | LoginForm | A thin wrapper over @ant-design/pro-components LoginForm with branding slots (title, logo, submitText, custom children) | | Profile & user management | ProfilePageLayout, UserProfile, Forms/EditProfile, Forms/AvatarSection, Forms/PasswordChange, UserProfile/PersonalInfo, etc. | Compose your profile page with responsive cards, avatars, and editable sections | | Modals | CustomModal, CustomFormModal, EditUserModal, PasswordChangeModal | Pre-styled modals wired to Ant Design forms; perfect for advanced flows like change password or edit user | | Inputs & atoms | FormInputs/Button, FormInputs/InputText, FormInputs/InputSelect, Wrappers/NotificationMessage | Use individually if you only need consistent primitives |

Explore src/components/ to see prop definitions or extend the supplied TypeScript types.

Styling & Theming

• Import the default Less theme once in your app entry: import '@kodifly/kodifly-auth/src/styles/main.less';
• Override Ant Design tokens or Less variables to align with your design system
• Components expose className, style, and Ant Design’s native props so you can fine-tune spacing, colors, and layout

Localization

SignInForm ships with English (en) and Indonesian (id) strings out of the box. Pass language="id" to switch the built-in dictionary. For other languages, fork the component or wrap it with your own translated copy.

TypeScript Support

Type declarations live in types/ and mirror every exported component. Import types such as LoginParamsType from @kodifly/kodifly-auth/types (or rely on inference directly from the component props).

Contributing

• Clone the repo and install dependencies with npm install
• Run npm run lint and npm run tsc before opening a PR
• We welcome bug reports, feature requests, and examples/screenshots showing how you use the library

License

ISC © Kodifly. Use it freely in commercial and OSS projects.