Merge pull request #58 from daveyplate/react-hook-form

React Hook Form & zod

Author: daveycodez

.cursor/rules/github.mdc

@@ -7,6 +7,4 @@ When asked to make a commit, immediately run git add -a & git commit -m "Short r
 When asked to push, immediately run git push.
 When asked to pull, immediately run git pull.
 
-Do not make commits unless the user asks you to.
-
-Always search the codebase for relevant files and do research before you begin a task.
+Do not make commits unless the user asks you to.

.cursor/rules/instructions.mdc

@@ -0,0 +1,8 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+Always search the codebase for relevant files and do research before you begin a task.
+
+Never hard code strings, always check AuthLocalization and add it as needed.

README.md

@@ -46,7 +46,7 @@ Plug & play shadcn/ui auth components for [better-auth](https://better-auth.com)
 
 Fully customizable!
 
-Coming Soon: Captcha, 2FA, and more!
+Coming Soon: Captcha, Organization, and more!
 
 ## License
 

docs/content/docs/integrations/next-js.mdx

@@ -58,8 +58,6 @@ export function Providers({ children }: { children: ReactNode }) {
 **Note**: Since the Next.js **App Router** caches routes by default, navigation to protected routes may fail until you perform a `router.refresh()` to clear the cache. To prevent this issue, you must use `router.refresh()` in the provided `onSessionChange` callback. This forces Next.js to clear the router cache and reload middleware-protected content, ensuring subsequent navigations accurately reflect the current auth state.
 </small>
 
-**It is now recommended to call router.refresh() on page mount as well, since slow connections might fail to redirect.**
-
 Once configured, wrap your layout component with the `Providers` component:
 
 ```tsx title="app/layout.tsx"
@@ -104,21 +102,8 @@ export default async function AuthPage({ params }: { params: Promise<{ pathname:
 "use client"
 
 import { AuthCard } from "@daveyplate/better-auth-ui"
-import { useRouter } from "next/navigation"
-import { useEffect } from "react"
-
-export function AuthView({
-    pathname
-}: {
-    pathname: string
-}) {
-    const router = useRouter()
-
-    useEffect(() => {
-        // Clear router cache (protected routes)
-        router.refresh()
-    }, [router])
 
+export function AuthView({ pathname }: { pathname: string }) {
     return (
         <main className="flex flex-col grow p-4 items-center justify-center">
             <AuthCard pathname={pathname} />
@@ -133,10 +118,12 @@ The newly created dynamic route covers the following paths by default:
 - `/auth/sign-up` – New account registration
 - `/auth/magic-link` – Email login without a password
 - `/auth/forgot-password` – Trigger email to reset forgotten password
+- `/auth/two-factor` – Two-factor authentication
+- `/auth/recover-account` – Recover account via backup code
 - `/auth/reset-password` – Set new password after receiving reset link
 - `/auth/sign-out` – Log the user out of the application
 - `/auth/settings` – User account management page (requires authentication)
-- `/auth/callback` – Internal route to handle Auth callbacks (do not use directly)
+- `/auth/callback` – Internal route to handle Auth callbacks
 
 Ensure that any links to the authentication process utilize these routes accordingly. All routes will render the `<AuthCard />` component and automatically handle navigation and authentication flow.
 </Step>

package.json

@@ -68,18 +68,18 @@
     "license": "MIT",
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@radix-ui/react-checkbox": "^1.1.5",
+        "@radix-ui/react-checkbox": "^1.2.2",
         "@radix-ui/react-context": "^1.1.2",
-        "@radix-ui/react-dialog": "^1.1.7",
-        "@radix-ui/react-label": "^2.1.3",
-        "@radix-ui/react-primitive": "^2.0.3",
-        "@radix-ui/react-separator": "^1.1.3",
+        "@radix-ui/react-dialog": "^1.1.10",
+        "@radix-ui/react-label": "^2.1.4",
+        "@radix-ui/react-primitive": "^2.1.0",
+        "@radix-ui/react-separator": "^1.1.4",
         "@radix-ui/react-slot": "^1.2.0",
-        "@radix-ui/react-tabs": "^1.1.4",
+        "@radix-ui/react-tabs": "^1.1.8",
         "@radix-ui/react-use-callback-ref": "^1.1.1",
         "@radix-ui/react-use-layout-effect": "^1.1.1",
         "@react-email/components": "^0.0.36",
-        "@tanstack/react-query": "^5.74.3",
+        "@tanstack/react-query": "^5.74.4",
         "@types/node": "^22.14.1",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
@@ -89,10 +89,10 @@
         "dotenv": "^16.5.0",
         "esbuild-plugin-preserve-directives": "^0.0.11",
         "ignore": "^7.0.3",
-        "lucide-react": "^0.488.0",
-        "next": "^15.3.0",
+        "lucide-react": "^0.501.0",
+        "next": "^15.3.1",
         "nodemon": "^3.1.9",
-        "react-router": "^7.5.0",
+        "react-router": "^7.5.1",
         "tailwind-merge": "^3.2.0",
         "tailwindcss-animate": "^1.0.7",
         "tsc-watch": "^6.2.1",
@@ -105,6 +105,7 @@
     "peerDependencies": {
         "@better-fetch/fetch": ">=1.1.0",
         "@daveyplate/better-auth-tanstack": "^1.3.3",
+        "@hookform/resolvers": ">=5.0.0",
         "@instantdb/react": ">=0.18.0",
         "@radix-ui/react-avatar": ">=1.1.0",
         "@radix-ui/react-checkbox": ">=1.1.0",
@@ -125,13 +126,15 @@
         "clsx": ">=2.1.0",
         "input-otp": ">=1.4.0",
         "lucide-react": ">=0.469.0",
-        "react-qr-code": ">=2.0.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
+        "react-hook-form": ">=7.55.0",
+        "react-qr-code": ">=2.0.0",
         "sonner": ">=1.7.0",
         "tailwind-merge": ">=2.6.0",
         "tailwindcss": ">=3.0.0",
-        "ua-parser-js": ">=2.0.0"
+        "ua-parser-js": ">=2.0.0",
+        "zod": ">=3.24.0"
     },
     "pnpm": {
         "overrides": {}