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:
In the Clerk Dashboard, navigate to the Email, phone, username page.
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?{ ' ' }
< Clerk.Link
navigate = "sign-up"
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
</ Clerk.Link >
</ 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:
In the Clerk Dashboard, navigate to the Email, phone, username page.
Ensure that all settings are disabled.
In the navigation sidebar, select SSO 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?{ ' ' }
< Clerk.Link
navigate = "sign-up"
className = "font-medium text-white decoration-white/20 underline-offset-4 outline-none hover:underline focus-visible:underline"
>
Create an account
</ Clerk.Link >
</ 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:
In the Clerk Dashboard, navigate to the Email, phone, username page.
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?{ ' ' }
< Clerk.Link
navigate = "sign-up"
className = "text-white decoration-white/30 underline-offset-4 outline-none hover:underline focus-visible:underline"
>
Create an account
</ Clerk.Link >
</ 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?{ ' ' }
< Clerk.Link
navigate = "sign-up"
className = "text-white decoration-white/30 underline-offset-4 outline-none hover:underline focus-visible:underline"
>
Create an account
</ Clerk.Link >
</ 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:
In the Clerk Dashboard, navigate to the Email, phone, username page.
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 SSO 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?{ ' ' }
< Clerk.Link
navigate = "sign-up"
className = "rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100"
>
Sign up
</ Clerk.Link >
</ 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?{ ' ' }
< Clerk.Link
navigate = "sign-up"
className = "rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100"
>
Sign up
</ Clerk.Link >
</ p >
</ SignIn.Step >
</ SignIn.Root >
</ div >
)
}