# Clerk SvelteKit Adapter for using  authentication in .  The demo site is just this repository, hosted on Cloudflare Pages. ## Installation ### Install package  ### Set up environment variables Add these values to your `.env` :  The easiest way to get these values is to click "API Keys" in the Clerk dashboard, and then copy the values for Next.js, and change `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` to `PUBLIC_CLERK_PUBLISHABLE_KEY`. Note that for production sites using OAuth providers, you will have to do some more setup with Clerk and DNS. ### Configure the server hook Add this to `src/hooks.server.ts` :  ### Configure the client hook Add this to `src/hooks.client.ts`:  Customize the protected paths, and the various URLs as you like. >  > If you use `clerk-sveltekit/headless` instead of `clerk-sveltekit/client`, your bundle will be much smaller , but you will not have access to `<SignIn />`, `<SignUp />`, `<UserProfile />`, `<UserButton />`, `<OrganizationProfile />`, `<OrganizationSwitcher />`, or `<CreateOrganization />`. Sign-ins will have to happen on your `accounts.{TLD}` subdomain. ### Use the components Next, put the `SignIn` component on your sign in page:  And put the `SignUp` component on your sign up page:  Then, where you want to show the signed in user's photo and sign out button :  ## Components All components can be imported from `clerk-sveltekit/client/ComponentName.svelte` - `<ClerkLoading />` — Wrapper that shows its contents when Clerk is still loading. - `<ClerkLoaded let:clerk />` — Wrapper that shows its contents  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  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 . - `<SignUpButton />` — Unstyled sign-up button . - `<SignOutButton />` — Unstyled sign-out button. - `<OrganizationProfile />` — Renders the organization profile component. - `<OrganizationSwitcher />` — Renders an organization switcher component. - `<CreateOrganization />` — Renders UI for creating an organization. Note that components should be used for displaying UI, but are not sufficient for protecting routes. To protect a route, use the `protectedPaths` option passed to `handleClerk` in your `hooks.server.ts` file. ## Protected Routes The `protectedPaths` option will accept an array of either strings, or functions which accept a SvelteKit event object and return a boolean. When passed strings, any route that _starts_ with that string will be protected. i.e. protecting `'/admin'` will protect `/admin` but also `/admin/foo`. ## Using Clerk data on the server Server-side protected routes will automatically get a  injected into `locals.session` which means you can use it , a , or a . ## Thanks Thanks to Cerbos for their  example repo which got this project started, and to  for fixing bugs in that implementation.