@clerk/elements

Changelog · Report a Bug · Request a Feature · Ask a Question

---

Overview

Clerk is the easiest way to add authentication and user management to your React application. Add sign up, sign in, and profile management to your application in minutes.

Package Development

turbo dev --filter=elements

Examples NextJS Development

Setup:

cd examples/nextjs && npm i

Development Server:

Changes in the packages/elements directory will be hotloaded in the example app.

npm run dev:example

# With the XState Inspector
NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true npm run app:dev

E2E Testing

cd examples/nextjs && npm run e2e

# With UI: https://playwright.dev/docs/running-tests#run-tests-in-ui-mode
npm run e2e -- --ui

# Headed Mode: https://playwright.dev/docs/running-tests#run-tests-in-headed-mode
npm run e2e -- --headed

# Specific Tests: https://playwright.dev/docs/running-tests#run-specific-tests
npm run e2e -- e2e/elements.spec.ts

Flows

Flows per clerk-js UI components

<SignInRoutes>

/sign-in
  /factor-one               <SignInFactorOne />
  /factor-two               <SignInFactorTwo />
  /reset-password           <ResetPassword />
  /reset-password-success   <ResetPasswordSuccess />
  /sso-callback             <SignInSSOCallback {...} />
  /choose                   <SignInAccountSwitcher />
  /verify                   <SignInEmailLinkFlowComplete {...} />
  /                         <SignInStart />
  [ELSE]                    <RedirectToSignIn />

<SignUpRoutes>

/sign-up
  /verify-email-address     <SignUpVerifyEmail />                 [Guarded: Boolean(clerk.client.signUp.emailAddress)]
  /verify-phone-number      <SignUpVerifyPhone />                 [Guarded: Boolean(clerk.client.signUp.phoneNumber)]
  /sso-callback             <SignUpSSOCallback {...} />
  /verify                   <SignUpEmailLinkFlowComplete {...} />
  /continue
    /verify-email-address   <SignUpVerifyEmail />                 [Guarded: Boolean(clerk.client.signUp.emailAddress)]
    /verify-phone-number    <SignUpVerifyPhone />                 [Guarded: Boolean(clerk.client.signUp.phoneNumber)]
    /                       <SignUpContinue />
  /                         <SignUpStart />
  [ELSE]                    <RedirectToSignUp />

/sign-up
  /verify-email-address     <SignUpVerifyEmail />                 [Guarded: Boolean(clerk.client.signUp.emailAddress)]
  /verify-phone-number      <SignUpVerifyPhone />                 [Guarded: Boolean(clerk.client.signUp.phoneNumber)]
  /sso-callback             <SignUpSSOCallback {...} />
  /verify                   <SignUpEmailLinkFlowComplete {...} />
  /continue
    /                       <SignUpContinue />
  /                         <SignUpStart />
  [ELSE]                    <RedirectToSignUp />