Sign-in
Username/password
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.
'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>
)
}Google OAuth
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.
'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>
)
}Multi-factor authentication (MFA)
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.
'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>
)
}Email + Google + MFA
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.
'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>
)
}Feedback
Last updated on