Sign-in
The following example demonstrates a simple username/password sign-in flow.
Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
Navigate to the Clerk Dashboard .
In the navigation sidebar, select User & Authentication > Email, Phone, Username .
In the Contact information section, ensure that only Password is enabled.
In the Username section, ensure that Username is enabled.
/app /sign-in /[[...sign-in]] /page.tsx 'use client'
import * as Clerk from '@clerk/elements/common'
import * as SignIn from '@clerk/elements/sign-in'
export default function SignInPage () {
return (
< div className = "grid w-full flex-grow items-center bg-zinc-100 px-4 sm:justify-center" >
< SignIn.Root >
< SignIn.Step
name = "start"
className = "w-full space-y-6 rounded-2xl bg-white px-4 py-10 shadow-md ring-1 ring-black/5 sm:w-96 sm:px-8"
>
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10 text-zinc-950"
aria-hidden
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "currentColor" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-zinc-950" >
Sign in to Clover
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-red-400" />
< div className = "space-y-4" >
< Clerk.Field name = "identifier" className = "space-y-2" >
< Clerk.Label className = "text-sm font-medium text-zinc-950" >Username</ Clerk.Label >
< Clerk.Input
type = "text"
required
className = "w-full rounded-md bg-white px-3.5 py-2 text-sm outline-none ring-1 ring-inset ring-zinc-300 hover:ring-zinc-400 focus:ring-[1.5px] focus:ring-zinc-950 data-[invalid]:ring-red-400"
/>
< Clerk.FieldError className = "block text-sm text-red-400" />
</ Clerk.Field >
< Clerk.Field name = "password" className = "space-y-2" >
< Clerk.Label className = "text-sm font-medium text-zinc-950" >Password</ Clerk.Label >
< Clerk.Input
type = "password"
required
className = "w-full rounded-md bg-white px-3.5 py-2 text-sm outline-none ring-1 ring-inset ring-zinc-300 hover:ring-zinc-400 focus:ring-[1.5px] focus:ring-zinc-950 data-[invalid]:ring-red-400"
/>
< Clerk.FieldError className = "block text-sm text-red-400" />
</ Clerk.Field >
</ div >
< SignIn.Action
submit
className = "w-full rounded-md bg-zinc-950 px-3.5 py-1.5 text-center text-sm font-medium text-white shadow outline-none ring-1 ring-inset ring-zinc-950 hover:bg-zinc-800 focus-visible:outline-[1.5px] focus-visible:outline-offset-2 focus-visible:outline-zinc-950 active:text-white/70"
>
Sign In
</ SignIn.Action >
< p className = "text-center text-sm text-zinc-500" >
No account?{ ' ' }
< a
href = "#"
className = "font-medium text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline"
>
Create an account
</ a >
</ p >
</ SignIn.Step >
</ SignIn.Root >
</ div >
)
}
The following example demonstrates a simple Google OAuth sign-in flow.
Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
Navigate to the Clerk Dashboard .
In the navigation sidebar, select User & Authentication > Email, Phone, Username .
Ensure that all settings are disabled.
In the navigation sidebar, select Social Connections .
Ensure that only Google is enabled.
/app /sign-in /[[...sign-in]] /page.tsx 'use client'
import * as Clerk from '@clerk/elements/common'
import * as SignIn from '@clerk/elements/sign-in'
export default function SignInPage () {
return (
< div className = "grid w-full flex-grow items-center bg-black px-4 sm:justify-center" >
< SignIn.Root >
< SignIn.Step
name = "start"
className = "w-full flex-grow space-y-6 rounded-2xl bg-neutral-900 bg-[radial-gradient(circle_at_50%_0%,theme(colors.white/10%),transparent)] px-4 py-10 ring-1 ring-inset ring-white/5 sm:w-96 sm:px-8"
>
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10"
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "#fff" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-white" >
Sign in to Clover
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-red-400" />
< div className = "space-y-2" >
< Clerk.Connection
name = "google"
className = "flex w-full items-center justify-center gap-x-3 rounded-md bg-neutral-700 px-3.5 py-1.5 text-sm font-medium text-white shadow-[0_1px_0_0_theme(colors.white/5%)_inset,0_0_0_1px_theme(colors.white/2%)_inset] outline-none hover:bg-gradient-to-b hover:from-white/5 hover:to-white/5 focus-visible:outline-[1.5px] focus-visible:outline-offset-2 focus-visible:outline-white active:bg-gradient-to-b active:from-black/20 active:to-black/20 active:text-white/70"
>
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 17 16"
className = "w-4"
aria-hidden
>
< path
fill = "currentColor"
d = "M8.82 7.28v2.187h5.227c-.16 1.226-.57 2.124-1.192 2.755-.764.765-1.955 1.6-4.035 1.6-3.218 0-5.733-2.595-5.733-5.813 0-3.218 2.515-5.814 5.733-5.814 1.733 0 3.005.685 3.938 1.565l1.538-1.538C12.998.96 11.256 0 8.82 0 4.41 0 .705 3.591.705 8s3.706 8 8.115 8c2.382 0 4.178-.782 5.582-2.24 1.44-1.44 1.893-3.475 1.893-5.111 0-.507-.035-.978-.115-1.369H8.82Z"
/>
</ svg >
Login with Google
</ Clerk.Connection >
</ div >
< p className = "text-center text-sm text-neutral-400" >
No account?{ ' ' }
< a
href = "#"
className = "font-medium text-white decoration-white/20 underline-offset-4 outline-none hover:underline focus-visible:underline"
>
Create an account
</ a >
</ p >
</ SignIn.Step >
</ SignIn.Root >
</ div >
)
}
The following example demonstrates a simple multi-factor authentication (MFA) sign-in flow. The user can sign in with their email and password. If they have two-factor authentication enabled, they will need to verify their sign-in attempt with an SMS code.
Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
Navigate to the Clerk Dashboard .
In the navigation sidebar, select User & Authentication > Email, Phone, Username .
Ensure that Email address , Phone number , and Password are enabled.
Next to Phone number , select the settings icon and enable Require .
In the navigation sidebar, select Multi-factor .
Ensure that only SMS verification code is enabled.
/app /sign-in /[[...sign-in]] /page.tsx 'use client'
import * as Clerk from '@clerk/elements/common'
import * as SignIn from '@clerk/elements/sign-in'
export default function SignInPage () {
return (
< div className = "relative grid w-full flex-grow items-center bg-black px-4 sm:justify-center" >
< SignIn.Root >
< SignIn.Step
name = "start"
className = "relative isolate w-full space-y-8 rounded-2xl bg-emerald-950 px-4 py-10 shadow-md ring-1 ring-inset ring-white/10 before:absolute before:inset-0 before:-z-10 before:rounded-2xl before:bg-black/50 sm:w-96 sm:px-8"
>
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10"
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "#34D399" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-white" >
Sign in to Clover
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-rose-400" />
< Clerk.Field name = "identifier" className = "group/field relative" >
< Clerk.Label className = "absolute left-2 top-0 -translate-y-1/2 bg-emerald-950 px-2 font-mono text-xs/4 text-white before:absolute before:inset-0 before:-z-10 before:bg-black/50 group-focus-within/field:text-emerald-300 group-data-[invalid]/field:text-rose-400" >
Email address
</ Clerk.Label >
< Clerk.Input
type = "text"
required
className = "w-full rounded-lg bg-transparent px-4 py-2.5 text-sm text-white outline-none ring-1 ring-inset ring-white/20 hover:ring-white/30 focus:shadow-[0_0_6px_0] focus:shadow-emerald-500/20 focus:ring-[1.5px] focus:ring-emerald-300 data-[invalid]:shadow-rose-400/20 data-[invalid]:ring-rose-400"
/>
< Clerk.FieldError className = "mt-2 block text-xs text-rose-400" />
</ Clerk.Field >
< Clerk.Field name = "password" className = "group/field relative" >
< Clerk.Label className = "absolute left-2 top-0 -translate-y-1/2 bg-emerald-950 px-2 font-mono text-xs/4 text-white before:absolute before:inset-0 before:-z-10 before:bg-black/50 group-focus-within/field:text-emerald-300 group-data-[invalid]/field:text-rose-400" >
Password
</ Clerk.Label >
< Clerk.Input
type = "password"
required
className = "w-full rounded-lg bg-transparent px-4 py-2.5 text-sm text-white outline-none ring-1 ring-inset ring-white/20 hover:ring-white/30 focus:shadow-[0_0_6px_0] focus:shadow-emerald-500/20 focus:ring-[1.5px] focus:ring-emerald-300 data-[invalid]:shadow-rose-400/20 data-[invalid]:ring-rose-400"
/>
< Clerk.FieldError className = "mt-2 block text-xs text-rose-400" />
</ Clerk.Field >
< SignIn.Action
submit
className = "relative isolate w-full rounded-lg bg-gradient-to-b from-emerald-400 to-emerald-500 px-3.5 py-2.5 text-center text-sm font-medium text-emerald-950 shadow-[0_1px_0_0_theme(colors.white/30%)_inset,0_-1px_1px_0_theme(colors.black/5%)_inset] outline-none before:absolute before:inset-0 before:-z-10 before:rounded-lg before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-[1.5px] focus-visible:outline-offset-2 focus-visible:outline-white active:text-emerald-950/80 active:before:bg-black/10"
>
Sign In
</ SignIn.Action >
< p className = "text-center text-sm text-white/60" >
No account?{ ' ' }
< a
href = "#"
className = "text-white decoration-white/30 underline-offset-4 outline-none hover:underline focus-visible:underline"
>
Create an account
</ a >
</ p >
</ SignIn.Step >
< SignIn.Step
name = "verifications"
className = "relative isolate w-full space-y-8 rounded-2xl bg-emerald-950 px-4 py-10 shadow-md ring-1 ring-inset ring-white/10 before:absolute before:inset-0 before:-z-10 before:rounded-2xl before:bg-black/50 sm:w-96 sm:px-8"
>
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10"
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "#34D399" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-white" >
Verify phone code
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-rose-400" />
< SignIn.Strategy name = "phone_code" >
< Clerk.Field name = "code" className = "group/field relative" >
< Clerk.Label className = "absolute left-2 top-0 -translate-y-1/2 bg-emerald-950 px-2 font-mono text-xs/4 text-white before:absolute before:inset-0 before:-z-10 before:bg-black/50 group-focus-within/field:text-emerald-300 group-data-[invalid]/field:text-rose-400" >
Phone code
</ Clerk.Label >
< Clerk.Input
type = "otp"
required
className = "w-full rounded-lg bg-transparent px-4 py-2.5 text-sm text-white outline-none ring-1 ring-inset ring-white/20 hover:ring-white/30 focus:shadow-[0_0_6px_0] focus:shadow-emerald-500/20 focus:ring-[1.5px] focus:ring-emerald-300 data-[invalid]:shadow-rose-400/20 data-[invalid]:ring-rose-400"
/>
< Clerk.FieldError className = "mt-2 block text-xs text-rose-400" />
</ Clerk.Field >
< SignIn.Action
submit
className = "relative isolate w-full rounded-lg bg-gradient-to-b from-emerald-400 to-emerald-500 px-3.5 py-2.5 text-center text-sm font-medium text-emerald-950 shadow-[0_1px_0_0_theme(colors.white/30%)_inset,0_-1px_1px_0_theme(colors.black/5%)_inset] outline-none before:absolute before:inset-0 before:-z-10 before:rounded-lg before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-[1.5px] focus-visible:outline-offset-2 focus-visible:outline-white active:text-emerald-950/80 active:before:bg-black/10"
>
Continue
</ SignIn.Action >
</ SignIn.Strategy >
< p className = "text-center text-sm text-white/60" >
No account?{ ' ' }
< a
href = "#"
className = "text-white decoration-white/30 underline-offset-4 outline-none hover:underline focus-visible:underline"
>
Create an account
</ a >
</ p >
</ SignIn.Step >
</ SignIn.Root >
</ div >
)
}
The following example demonstrates a simple sign-in flow that combines email, Google OAuth, and multi-factor authentication (MFA). The user can sign in with their email and an email code, or with Google OAuth. If they have two-factor authentication enabled, they will need to verify their sign-in attempt with an SMS code.
Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
Navigate to the Clerk Dashboard .
In the navigation sidebar, select User & Authentication > Email, Phone, Username .
In the Contact information section, ensure that only Email address and Phone number is enabled.
Next to Phone number , select the settings icon and enable Require .
In the Authentication strategies section, ensure that only Email verification code is enabled.
In the navigation sidebar, select Social Connections .
Ensure that only Google is enabled.
In the navigation sidebar, select Multi-factor .
Ensure that only SMS verification code is enabled.
/app /sign-in /[[...sign-in]] /page.tsx 'use client'
import * as Clerk from '@clerk/elements/common'
import * as SignIn from '@clerk/elements/sign-in'
export default function SignInPage () {
return (
< div className = "grid w-full flex-grow items-center bg-white px-4 sm:justify-center" >
< SignIn.Root >
< SignIn.Step
name = "start"
className = "w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8"
>
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10"
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "#0A0A0A" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-neutral-950" >
Sign in to Clover
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-red-600" />
< Clerk.Field name = "identifier" >
< Clerk.Label className = "sr-only" >Email</ Clerk.Label >
< Clerk.Input
type = "email"
required
placeholder = "Email"
className = "w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600"
/>
< Clerk.FieldError className = "mt-2 block text-xs text-red-600" />
</ Clerk.Field >
< SignIn.Action
submit
className = "relative w-full rounded-md bg-neutral-600 bg-gradient-to-b from-neutral-500 to-neutral-600 py-1.5 text-sm font-medium text-white shadow-[0_1px_1px_0_theme(colors.white/10%)_inset,0_1px_2.5px_0_theme(colors.black/36%)] outline-none ring-1 ring-inset ring-neutral-600 before:absolute before:inset-0 before:rounded-md before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 active:bg-neutral-600 active:text-white/60 active:before:opacity-0"
>
Sign In
</ SignIn.Action >
< div className = "rounded-xl bg-neutral-100 p-5" >
< p className = "mb-4 text-center text-sm/5 text-neutral-500" >
Alternatively, sign in with these platforms
</ p >
< div className = "space-y-2" >
< Clerk.Connection
name = "google"
className = "flex w-full items-center justify-center gap-x-3 rounded-md bg-gradient-to-b from-white to-neutral-50 px-2 py-1.5 text-sm font-medium text-neutral-950 shadow outline-none ring-1 ring-black/5 hover:to-neutral-100 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 active:text-neutral-950/60"
>
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 16 16"
aria-hidden
className = "size-4"
>
< g clipPath = "url(#a)" >
< path
fill = "currentColor"
d = "M8.32 7.28v2.187h5.227c-.16 1.226-.57 2.124-1.192 2.755-.764.765-1.955 1.6-4.035 1.6-3.218 0-5.733-2.595-5.733-5.813 0-3.218 2.515-5.814 5.733-5.814 1.733 0 3.005.685 3.938 1.565l1.538-1.538C12.498.96 10.756 0 8.32 0 3.91 0 .205 3.591.205 8s3.706 8 8.115 8c2.382 0 4.178-.782 5.582-2.24 1.44-1.44 1.893-3.475 1.893-5.111 0-.507-.035-.978-.115-1.369H8.32Z"
/>
</ g >
< defs >
< clipPath id = "a" >
< path fill = "#fff" d = "M0 0h16v16H0z" />
</ clipPath >
</ defs >
</ svg >
Login with Google
</ Clerk.Connection >
</ div >
</ div >
< p className = "text-center text-sm text-neutral-500" >
Don't have an account?{ ' ' }
< a
href = "#"
className = "rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100"
>
Sign up
</ a >
</ p >
</ SignIn.Step >
< SignIn.Step
name = "verifications"
className = "w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8"
>
< SignIn.Strategy name = "email_code" >
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10"
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "#0A0A0A" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-neutral-950" >
Verify email code
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-red-600" />
< Clerk.Field name = "code" >
< Clerk.Label className = "sr-only" >Email code</ Clerk.Label >
< Clerk.Input
type = "otp"
required
placeholder = "Email code"
className = "w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600"
/>
< Clerk.FieldError className = "mt-2 block text-xs text-red-600" />
</ Clerk.Field >
< SignIn.Action
submit
className = "relative w-full rounded-md bg-neutral-600 bg-gradient-to-b from-neutral-500 to-neutral-600 py-1.5 text-sm text-white shadow-[0_1px_1px_0_theme(colors.white/10%)_inset,0_1px_2.5px_0_theme(colors.black/36%)] outline-none ring-1 ring-inset ring-neutral-600 before:absolute before:inset-0 before:rounded-md before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 active:bg-neutral-600 active:text-white/60 active:before:opacity-0"
>
Continue
</ SignIn.Action >
</ SignIn.Strategy >
< SignIn.Strategy name = "phone_code" >
< header className = "text-center" >
< svg
xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 40 40"
className = "mx-auto size-10"
>
< mask id = "a" width = "40" height = "40" x = "0" y = "0" maskUnits = "userSpaceOnUse" >
< circle cx = "20" cy = "20" r = "20" fill = "#D9D9D9" />
</ mask >
< g fill = "#0A0A0A" mask = "url(#a)" >
< path d = "M43.5 3a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V2ZM43.5 8a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46V7ZM43.5 13a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 18a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 23a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 28a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 33a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1ZM43.5 38a.5.5 0 0 0 0-1v1Zm0-1h-46v1h46v-1Z" />
< path d = "M27 3.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 8.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM23 13.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM21.5 18.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM20.5 23.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM22.5 28.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM25 33.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2ZM27 38.5a1 1 0 1 0 0-2v2Zm0-2h-46v2h46v-2Z" />
</ g >
</ svg >
< h1 className = "mt-4 text-xl font-medium tracking-tight text-neutral-950" >
Verify phone code
</ h1 >
</ header >
< Clerk.GlobalError className = "block text-sm text-red-600" />
< Clerk.Field name = "code" >
< Clerk.Label className = "sr-only" >Phone code</ Clerk.Label >
< Clerk.Input
type = "otp"
required
placeholder = "Phone code"
className = "w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600"
/>
< Clerk.FieldError className = "mt-2 block text-xs text-red-600" />
</ Clerk.Field >
< SignIn.Action
submit
className = "relative w-full rounded-md bg-neutral-600 bg-gradient-to-b from-neutral-500 to-neutral-600 py-1.5 text-sm text-white shadow-[0_1px_1px_0_theme(colors.white/10%)_inset,0_1px_2.5px_0_theme(colors.black/36%)] outline-none ring-1 ring-inset ring-neutral-600 before:absolute before:inset-0 before:rounded-md before:bg-white/10 before:opacity-0 hover:before:opacity-100 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 active:bg-neutral-600 active:text-white/60 active:before:opacity-0"
>
Login
</ SignIn.Action >
</ SignIn.Strategy >
< p className = "text-center text-sm text-neutral-500" >
Don't have an account?{ ' ' }
< a
href = "#"
className = "rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100"
>
Sign up
</ a >
</ p >
</ SignIn.Step >
</ SignIn.Root >
</ div >
)
}