Welcome to your Clerk Sveltekit

clerk-sveltekit is a JavaScript package that integrates Clerk authentication into a SvelteKit site. This demo site is included in the repo as an example and for end-to-end testing the package.

The package offers server-based route protection, login flow, and the following Svelte components:

  • <ClerkLoading /> — Wrapper that shows its contents when Clerk is still loading.
  • <ClerkLoaded let:clerk /> — Wrapper that shows its contents (and exposes the clerk object) when Clerk is done loading.
  • <SignIn /> — Renders a sign-in form.
  • <SignUp /> — Renders a sign-up form.
  • <SignedIn let:user /> — Wrapper that shows its contents (and exposes the Clerk user object) when the user is signed in.
  • <SignedOut /> — Wrapper that shows its contents when the user is not signed in.
  • <UserButton /> — Button that shows the user’s profile photo with log out link when they are signed in.
  • <UserProfile /> — Renders the current user’s profile.
  • <SignInButton /> — Unstyled sign-in button (can do mode="modal" too).
  • <SignUpButton /> — Unstyled sign-up button (can do mode="modal" too).
  • <SignOutButton /> — Unstyled sign-out button.
  • <OrganizationProfile /> — Renders the organization profile component.
  • <OrganizationSwitcher /> — Renders an organization switcher component.
  • <CreateOrganization /> — Renders UI for creating an organization.