Better Auth Components for Next.js and Shadcn UI

Auth CN is a UI component library that provides sign-in and sign-up components built for Better Auth and Shadcn/UI.

You can install these components directly into Next.js/Hono/ElysiaJS projects through the shadcn/ui registry system.

Each component includes support for email authentication and social login providers like Google and Microsoft.

Features

🔧 Direct Installation: Add components through the shadcn CLI that pull code into your project structure.

🗄️ Database Support: Configure Better Auth with MySQL, PostgreSQL, or SQLite, each with optional Redis integration for session caching.

🔐 OAuth Integration: Sign-in components include ready-to-use Google and Microsoft authentication flows with error handling and loading states.

📧 Email Authentication: Components support traditional email and password authentication with form validation and user feedback.

🎨 Tailwind Styling: Components use Tailwind utility classes and CSS variables for theming.

🔄 State Management: Built-in React hooks manage form state, loading indicators, and error messages through the Better Auth client.

Use Cases

SaaS Application Authentication: Build a multi-tenant platform where users register with email or sign in through Google Workspace accounts.
Internal Dashboard Access: Create an admin portal that restricts access through Microsoft Active Directory integration for enterprise teams.
E-commerce User Accounts: Add customer registration and login flows to a Next.js storefront with Redis caching for session management.
Mobile-First Web Apps: Deploy responsive authentication screens that work across devices without separate mobile implementations.

How to Use It

1. You need a Next.js (or Hono & ElysiaJS ) project with Better Auth and shadcn/ui installed. Initialize shadcn/ui if you have not done so.

pnpm add better-auth
pnpm dlx shadcn@latest init

2. Update your components.json file to include the Auth CN registry URL.

{
  "registries": {
    "@auth-cn": "https://auth.uprizing.me/r/{name}.json"
  }
}

3. Choose the adapter that matches your database. You can install the standalone adapter or the version with Redis caching.

For PostgreSQL:

pnpm dlx shadcn@latest add @auth-cn/postgres

pnpm dlx shadcn@latest add @auth-cn/postgres

For MySQL:

pnpm dlx shadcn@latest add @auth-cn/mysql-redis

pnpm dlx shadcn@latest add @auth-cn/mysql

For SQLite:

pnpm dlx shadcn@latest add @auth-cn/sqlite-redis

pnpm dlx shadcn@latest add @auth-cn/sqlite

4. Use the Better Auth CLI to create the necessary tables in your database.

# Generate the schema
pnpm dlx @better-auth/cli@latest generate
# Apply the migration
pnpm dlx @better-auth/cli@latest migrate

5. Install the authentication forms.

# Add a Sign In form
npx shadcn@latest add @auth-cn/sign-in-01
npx shadcn@latest add @auth-cn/sign-in-02
# Add a Sign Up form
npx shadcn@latest add @auth-cn/sign-up-01
npx shadcn@latest add @auth-cn/sign-up-02

6. Import and use the component in your page. The component handles the client-side authentication logic automatically.

import SignIn01 from "@/components/sign-in-01";
export default function LoginPage() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <SignIn01 />
    </main>
  );
}

Related Resources

Better Auth: The authentication library that Auth CN components integrate with for session management and OAuth flows.
Shadcn UI: The component system that provides the base UI primitives used in Auth CN components.
Next.js: The React framework recommended for Auth CN implementations with built-in routing and API routes.
Tailwind CSS: The utility-first CSS framework that Auth CN uses for component styling and theming.

FAQs

Q: Do I need to set up OAuth credentials for every provider?
A: You only need credentials for the providers you plan to use. Remove unused social login buttons from the components if you only want email authentication. Each provider requires separate API credentials from their developer console.

Q: How do I add custom fields to the registration form?
A: Open the sign-up component file in your project and add new input fields to the form. Update the state management to include your new fields, then pass them to the authClient.signUp.email method in the name or a custom field parameter.

Q: Can I modify the component styling without breaking functionality?
A: Yes. Components use standard Tailwind classes that you can change freely. The authentication logic stays separate from styling. Modify colors, spacing, borders, and layout without affecting form submission or validation.

Q: What happens if Better Auth changes their API?
A: You own the component code after installation, so you can update it to match API changes. Check the Better Auth changelog when updating the library version and adjust your components accordingly.