a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
- className
+ 'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+ 'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+ '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+ className,
)}
{...props}
/>
@@ -155,7 +156,7 @@ function FieldSeparator({
children,
className,
...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
children?: React.ReactNode
}) {
return (
@@ -163,8 +164,8 @@ function FieldSeparator({
data-slot="field-separator"
data-content={!!children}
className={cn(
- "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
- className
+ 'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+ className,
)}
{...props}
>
@@ -186,7 +187,7 @@ function FieldError({
children,
errors,
...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
errors?: Array<{ message?: string } | undefined>
}) {
const content = useMemo(() => {
@@ -202,7 +203,7 @@ function FieldError({
...new Map(errors.map((error) => [error?.message, error])).values(),
]
- if (uniqueErrors?.length == 1) {
+ if (uniqueErrors.length === 1) {
return uniqueErrors[0]?.message
}
@@ -210,7 +211,7 @@ function FieldError({
{content}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index f752f82..1b6db8a 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
+import * as React from 'react'
+import { Label as LabelPrimitive } from 'radix-ui'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
function Label({
className,
@@ -11,8 +11,8 @@ function Label({
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index f0f5dfc..7c04729 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -91,7 +91,9 @@ function SidebarProvider({
// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
- return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+ return isMobile
+ ? setOpenMobile((isOpen) => !isOpen)
+ : setOpen((isOpen) => !isOpen)
}, [isMobile, setOpen, setOpenMobile])
// Adds a keyboard shortcut to toggle the sidebar.
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
index a70e713..e51fc6d 100644
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,13 +1,13 @@
-import { Loader2Icon } from "lucide-react"
+import { Loader2Icon } from 'lucide-react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
return (
)
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index 2b0fe1d..4331d5c 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from 'react'
const MOBILE_BREAKPOINT = 768
@@ -10,9 +10,9 @@ export function useIsMobile() {
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
- mql.addEventListener("change", onChange)
+ mql.addEventListener('change', onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
- return () => mql.removeEventListener("change", onChange)
+ return () => mql.removeEventListener('change', onChange)
}, [])
return !!isMobile
diff --git a/src/integrations/clerk/header-user.tsx b/src/integrations/clerk/header-user.tsx
index 69b4e83..fd99c5c 100644
--- a/src/integrations/clerk/header-user.tsx
+++ b/src/integrations/clerk/header-user.tsx
@@ -1,6 +1,6 @@
import {
- SignedIn,
SignInButton,
+ SignedIn,
SignedOut,
UserButton,
} from '@clerk/clerk-react'
diff --git a/src/lib/demo-store-devtools.tsx b/src/lib/demo-store-devtools.tsx
index 9b66f01..3a7f2d6 100644
--- a/src/lib/demo-store-devtools.tsx
+++ b/src/lib/demo-store-devtools.tsx
@@ -1,7 +1,7 @@
import { EventClient } from '@tanstack/devtools-event-client'
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
-import { store, fullName } from './demo-store'
+import { fullName, store } from './demo-store'
type EventMap = {
'store-devtools:state': {
@@ -45,15 +45,15 @@ function DevtoolPanel() {
First Name
-
{state?.firstName}
+
{state.firstName}
Last Name
-
{state?.lastName}
+
{state.lastName}
Full Name
-
{state?.fullName}
+
{state.fullName}
diff --git a/src/components/ProtectedRoutes.tsx b/src/components/ProtectedRoutes.tsx
new file mode 100644
index 0000000..bf1777f
--- /dev/null
+++ b/src/components/ProtectedRoutes.tsx
@@ -0,0 +1,15 @@
+import { useUser } from '@clerk/clerk-react'
+import { Navigate } from '@tanstack/react-router'
+import { RoutesPath } from '@/types/routes'
+
+export const ProtectedRoutes = ({
+ children,
+}: {
+ children: React.ReactNode
+}) => {
+ const { isSignedIn } = useUser()
+
+ if (!isSignedIn) return
+
+ return <>{children}
+}
diff --git a/src/hooks/useSignIn.ts b/src/hooks/useSignIn.ts
index 035a9b1..2fece4b 100644
--- a/src/hooks/useSignIn.ts
+++ b/src/hooks/useSignIn.ts
@@ -1,12 +1,12 @@
-import { useSignIn as useClerkSignIn, useSession } from '@clerk/clerk-react'
+import { useSignIn as useClerkSignIn } from '@clerk/clerk-react'
import { useState } from 'react'
import { useNavigate } from '@tanstack/react-router'
+import { RoutesPath } from '@/types/routes'
export const useSignIn = () => {
const router = useNavigate()
const { isLoaded, signIn, setActive } = useClerkSignIn()
- const { isLoaded: isSessionLoaded } = useSession()
const [code, setCode] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
@@ -16,10 +16,7 @@ export const useSignIn = () => {
e.preventDefault()
setIsLoading(true)
- if (!isLoaded) {
- setIsLoading(false)
- return
- }
+ if (!isLoaded) setIsLoading(false)
const identifier = email.trim()
if (!identifier) {
@@ -28,14 +25,14 @@ export const useSignIn = () => {
}
try {
- const result = await signIn.create({
+ const result = await signIn?.create({
strategy: 'password',
identifier,
password: password,
})
- if (result.status === 'complete') {
- await setActive({
+ if (result?.status === 'complete') {
+ await setActive?.({
session: result.createdSessionId,
navigate: ({ session }) => {
// Handle pending session tasks
@@ -45,7 +42,7 @@ export const useSignIn = () => {
return
}
- router({ to: '/' })
+ router({ to: RoutesPath.HOME.toString() })
},
})
} else {
@@ -67,6 +64,5 @@ export const useSignIn = () => {
setCode,
setEmail,
setPassword,
- isSessionLoaded,
}
}
diff --git a/src/routes/auth/signin.tsx b/src/routes/auth/signin.tsx
index e43b0e8..eade8f6 100644
--- a/src/routes/auth/signin.tsx
+++ b/src/routes/auth/signin.tsx
@@ -1,11 +1,18 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useUser } from '@clerk/clerk-react'
import { SignInForm } from '@/components/Forms/SignInForm'
+import { RoutesPath } from '@/types/routes'
-export const Route = createFileRoute('/auth/signin')({
+export const Route = createFileRoute(RoutesPath.SIGN_IN)({
component: RouteComponent,
})
function RouteComponent() {
+ const navigate = useNavigate()
+ const { isSignedIn } = useUser()
+
+ if (isSignedIn) return navigate({ to: RoutesPath.HOME.toString() })
+
return (
diff --git a/src/routes/auth/signup.tsx b/src/routes/auth/signup.tsx
index cfac490..4646b4e 100644
--- a/src/routes/auth/signup.tsx
+++ b/src/routes/auth/signup.tsx
@@ -1,7 +1,8 @@
import { createFileRoute } from '@tanstack/react-router'
import { SignInForm } from '@/components/Forms/SignInForm'
+import { RoutesPath } from '@/types/routes'
-export const Route = createFileRoute('/auth/signup')({
+export const Route = createFileRoute(RoutesPath.SIGN_UP)({
component: RouteComponent,
})
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index eb829ee..26461ba 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,16 +1,20 @@
import { createFileRoute } from '@tanstack/react-router'
import { Layout } from '@/components/Layouts'
+import { RoutesPath } from '@/types/routes'
+import { ProtectedRoutes } from '@/components/ProtectedRoutes'
-export const Route = createFileRoute('/')({
+export const Route = createFileRoute(RoutesPath.HOME)({
component: RouteComponent,
})
function RouteComponent() {
return (
-
-
-
Home
-
-
+
+
+
+
Home
+
+
+
)
}
diff --git a/src/types/routes.ts b/src/types/routes.ts
new file mode 100644
index 0000000..b9e570a
--- /dev/null
+++ b/src/types/routes.ts
@@ -0,0 +1,5 @@
+export enum RoutesPath {
+ HOME = '/',
+ SIGN_IN = '/auth/signin',
+ SIGN_UP = '/auth/signup',
+}
From 76e30fdf6650e132808b75c5e9c9733305fa73d4 Mon Sep 17 00:00:00 2001
From: jslyonnais <6282845+jslyonnais@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:50:41 -0500
Subject: [PATCH 05/21] simplify create session call
---
src/hooks/useSignIn.ts | 35 ++++++++++++++++++++++-------------
1 file changed, 22 insertions(+), 13 deletions(-)
diff --git a/src/hooks/useSignIn.ts b/src/hooks/useSignIn.ts
index 2fece4b..ca71d68 100644
--- a/src/hooks/useSignIn.ts
+++ b/src/hooks/useSignIn.ts
@@ -2,6 +2,8 @@ import { useSignIn as useClerkSignIn } from '@clerk/clerk-react'
import { useState } from 'react'
import { useNavigate } from '@tanstack/react-router'
+import type { UseNavigateResult } from '@tanstack/router-core'
+import type { ClerkSession, SetActiveFunction } from '@/types/clerk'
import { RoutesPath } from '@/types/routes'
export const useSignIn = () => {
@@ -32,19 +34,11 @@ export const useSignIn = () => {
})
if (result?.status === 'complete') {
- await setActive?.({
- session: result.createdSessionId,
- navigate: ({ session }) => {
- // Handle pending session tasks
- // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
- if (session.currentTask) {
- console.log(session.currentTask)
- return
- }
-
- router({ to: RoutesPath.HOME.toString() })
- },
- })
+ await handleCreateSession(
+ result,
+ router,
+ setActive as SetActiveFunction,
+ )
} else {
console.error(JSON.stringify(result, null, 2))
}
@@ -66,3 +60,18 @@ export const useSignIn = () => {
setPassword,
}
}
+
+const handleCreateSession = async (
+ result: { createdSessionId?: string | null },
+ navigate: UseNavigateResult
,
+ setActive: SetActiveFunction,
+) => {
+ await setActive({
+ session: result.createdSessionId as ClerkSession | null,
+ beforeEmit: () => {
+ // Handle pending session tasks
+ // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
+ navigate({ to: RoutesPath.HOME.toString() })
+ },
+ })
+}
From c20d6461b2ebff9dba943ca8efdcdcbc1f7bfa54 Mon Sep 17 00:00:00 2001
From: jslyonnais <6282845+jslyonnais@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:26:24 -0500
Subject: [PATCH 06/21] refactor sign in with optimization and mfa email code
form
---
messages/en.json | 5 ++
messages/fr.json | 5 ++
.../Forms/SignIn/CredentialsForm.tsx | 68 ++++++++++++++
src/components/Forms/SignIn/MfaForm.tsx | 40 +++++++++
src/components/Forms/SignIn/SignInForm.tsx | 42 +++++++++
src/components/Forms/SignIn/index.tsx | 1 +
src/components/Forms/SignInForm.tsx | 88 -------------------
src/hooks/useSignIn.ts | 43 +++++++++
src/routes/auth/signin.tsx | 2 +-
src/routes/auth/signup.tsx | 2 +-
10 files changed, 206 insertions(+), 90 deletions(-)
create mode 100644 src/components/Forms/SignIn/CredentialsForm.tsx
create mode 100644 src/components/Forms/SignIn/MfaForm.tsx
create mode 100644 src/components/Forms/SignIn/SignInForm.tsx
create mode 100644 src/components/Forms/SignIn/index.tsx
delete mode 100644 src/components/Forms/SignInForm.tsx
diff --git a/messages/en.json b/messages/en.json
index 8e4710d..cbfbe8e 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -3,6 +3,11 @@
"sign_in": {
"title": "Login to your account",
"description": "Enter your email below to sign in to your account",
+ "mfa": {
+ "description": "Enter your authentication code",
+ "code": "Authentication Code",
+ "verify": "Verify"
+ },
"email": "Email",
"email_placeholder": "hello@example.com",
"password": "Password",
diff --git a/messages/fr.json b/messages/fr.json
index e277d83..e2f57a2 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -3,6 +3,11 @@
"sign_in": {
"title": "Se connecter",
"description": "Entrez votre courriel ci-dessous pour vous connecter à votre compte",
+ "mfa": {
+ "description": "Entrez votre code d'authentification",
+ "code": "Code d'authentification",
+ "verify": "Vérifier"
+ },
"email": "Courriel",
"email_placeholder": "bonjour@exemple.com",
"password": "Mot de passe",
diff --git a/src/components/Forms/SignIn/CredentialsForm.tsx b/src/components/Forms/SignIn/CredentialsForm.tsx
new file mode 100644
index 0000000..a5ed92c
--- /dev/null
+++ b/src/components/Forms/SignIn/CredentialsForm.tsx
@@ -0,0 +1,68 @@
+import type { useSignIn } from '@/hooks/useSignIn'
+import { Button } from '@/components/ui/button'
+import {
+ Field,
+ FieldDescription,
+ FieldGroup,
+ FieldLabel,
+} from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { m } from '@/paraglide/messages'
+
+type CredentialsFormProps = ReturnType
+
+export const CredentialsForm = ({
+ email,
+ setEmail,
+ isLoading,
+ password,
+ setPassword,
+ handleSignIn,
+}: CredentialsFormProps) => {
+
+ return (
+
+ )
+}
diff --git a/src/components/Forms/SignIn/MfaForm.tsx b/src/components/Forms/SignIn/MfaForm.tsx
new file mode 100644
index 0000000..be41514
--- /dev/null
+++ b/src/components/Forms/SignIn/MfaForm.tsx
@@ -0,0 +1,40 @@
+import type { useSignIn } from '@/hooks/useSignIn'
+import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { m } from '@/paraglide/messages'
+
+type MfaFormProps = ReturnType
+
+export const MfaForm = ({
+ isLoading,
+ code,
+ setCode,
+ handleMfaVerify,
+}: MfaFormProps) => {
+
+ return (
+
+ )
+}
diff --git a/src/components/Forms/SignIn/SignInForm.tsx b/src/components/Forms/SignIn/SignInForm.tsx
new file mode 100644
index 0000000..dff0f8e
--- /dev/null
+++ b/src/components/Forms/SignIn/SignInForm.tsx
@@ -0,0 +1,42 @@
+import { MfaForm } from './MfaForm'
+import { CredentialsForm } from './CredentialsForm'
+import { cn } from '@/lib/utils'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card'
+import { m } from '@/paraglide/messages'
+import { useSignIn } from '@/hooks/useSignIn'
+
+export const SignInForm = ({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) => {
+ const signIn = useSignIn()
+ const { requiresMfa } = signIn
+
+ return (
+
+
+
+ {m['sign_in.title']()}
+
+ {requiresMfa
+ ? m['sign_in.mfa.description']()
+ : m['sign_in.description']()}
+
+
+
+ {requiresMfa ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/Forms/SignIn/index.tsx b/src/components/Forms/SignIn/index.tsx
new file mode 100644
index 0000000..fbf76cf
--- /dev/null
+++ b/src/components/Forms/SignIn/index.tsx
@@ -0,0 +1 @@
+export * from './SignInForm'
diff --git a/src/components/Forms/SignInForm.tsx b/src/components/Forms/SignInForm.tsx
deleted file mode 100644
index 526286a..0000000
--- a/src/components/Forms/SignInForm.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useNavigate } from '@tanstack/react-router'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from '@/components/ui/card'
-import {
- Field,
- FieldDescription,
- FieldGroup,
- FieldLabel,
-} from '@/components/ui/field'
-import { Input } from '@/components/ui/input'
-import { m } from '@/paraglide/messages'
-import { useSignIn } from '@/hooks/useSignIn'
-
-export const SignInForm = ({
- className,
- ...props
-}: React.ComponentProps<'div'>) => {
- const { email, setEmail, isLoading, password, setPassword, handleSignIn } =
- useSignIn()
-
- return (
-
-
-
- {m['sign_in.title']()}
- {m['sign_in.description']()}
-
-
-
-
-
-
- {children}
-
+ {children}
+
)
}
diff --git a/src/components/ProtectedRoutes.tsx b/src/components/ProtectedRoutes.tsx
index bf1777f..37a496b 100644
--- a/src/components/ProtectedRoutes.tsx
+++ b/src/components/ProtectedRoutes.tsx
@@ -1,13 +1,22 @@
import { useUser } from '@clerk/clerk-react'
import { Navigate } from '@tanstack/react-router'
import { RoutesPath } from '@/types/routes'
+import { Spinner } from '@/components/ui/spinner'
export const ProtectedRoutes = ({
children,
}: {
children: React.ReactNode
}) => {
- const { isSignedIn } = useUser()
+ const { isLoaded, isSignedIn } = useUser()
+
+ if (!isLoaded) {
+ return (
+
+
+
+ )
+ }
if (!isSignedIn) return
From fa44670d682598d65c064ce61bbad676e41c58fc Mon Sep 17 00:00:00 2001
From: jslyonnais <6282845+jslyonnais@users.noreply.github.com>
Date: Wed, 18 Feb 2026 07:36:47 -0500
Subject: [PATCH 08/21] unconnected signup form
---
messages/en.json | 20 +++++
messages/fr.json | 19 +++++
.../Forms/SignIn/CredentialsForm.tsx | 5 +-
src/components/Forms/SignIn/SignInForm.tsx | 42 +++++-----
src/components/Forms/SignUp/SignUpForm.tsx | 80 +++++++++++++++++++
src/components/Forms/SignUp/index.ts | 1 +
src/components/ui/field.tsx | 2 +-
src/routes/auth/signin.tsx | 2 +-
src/routes/auth/signup.tsx | 8 +-
9 files changed, 147 insertions(+), 32 deletions(-)
create mode 100644 src/components/Forms/SignUp/SignUpForm.tsx
create mode 100644 src/components/Forms/SignUp/index.ts
diff --git a/messages/en.json b/messages/en.json
index cbfbe8e..dfa2422 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -16,5 +16,25 @@
"button": "Sign in",
"sign_up": "Create an account",
"no_account": "Don't have an account?"
+ },
+ "sign_up": {
+ "title": "Create an account",
+ "description": "Enter your email below to create an account",
+ "email": "Email",
+ "email_placeholder": "hello@example.com",
+ "email_description": "We'll use this to contact you and to verify your account.",
+ "password": "Password",
+ "button": "Create account",
+ "confirm": {
+ "label": "Confirm password",
+ "placeholder": "Confirm your password",
+ "description": "Please confirm your password."
+ },
+ "already_have_account": "Already have an account?",
+ "sign_in": "Sign in",
+ "rules": {
+ "length": "Must be at least {num} characters long.",
+ "special": "Must contain at least one special character and one number."
+ }
}
}
diff --git a/messages/fr.json b/messages/fr.json
index e2f57a2..f95f3c1 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -16,5 +16,24 @@
"button": "Se connecter",
"sign_up": "Créer un compte",
"no_account": "Vous n'avez pas de compte ?"
+ },
+ "sign_up": {
+ "title": "Créer un compte",
+ "description": "Entrez votre courriel ci-dessous pour créer un compte",
+ "email": "Courriel",
+ "email_placeholder": "bonjour@exemple.com",
+ "email_description": "Nous utiliserons ce courriel pour vous contacter et pour vérifier votre compte.",
+ "password": "Mot de passe",
+ "button": "Créer un compte",
+ "confirm": {
+ "label": "Confirmer le mot de passe",
+ "placeholder": "Confirmer votre mot de passe",
+ "description": "Veuillez confirmer votre mot de passe."
+ },
+ "already_have_account": "Vous avez déjà un compte ?",
+ "rules": {
+ "length": "Doit contenir au moins {num} caractères.",
+ "special": "Doit contenir au moins un caractère spécial et un nombre."
+ }
}
}
diff --git a/src/components/Forms/SignIn/CredentialsForm.tsx b/src/components/Forms/SignIn/CredentialsForm.tsx
index a5ed92c..5cbc54c 100644
--- a/src/components/Forms/SignIn/CredentialsForm.tsx
+++ b/src/components/Forms/SignIn/CredentialsForm.tsx
@@ -8,6 +8,7 @@ import {
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { m } from '@/paraglide/messages'
+import { RoutesPath } from '@/types/routes'
type CredentialsFormProps = ReturnType
@@ -19,7 +20,6 @@ export const CredentialsForm = ({
setPassword,
handleSignIn,
}: CredentialsFormProps) => {
-
return (
-
-