JSPM

---

This is an unofficial community-led port of the Clerk React SDK for SolidJS and SolidStart.

Released on NPM

Maintained on GitHub

Overview

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

Features

This project has near-complete feature parity with @clerk/clerk-react:
✔ SSR support
✔ Components
✔ Hooks*

Missing features for SolidJS:
✖ Custom pages for UI components

Plus additional features for SolidStart:
✔ Middleware
✔ Server-side auth() helper

* = Hooks with parameters have been altered to use the Accessor<Params> type for reactivity. For example:

useOrganizationList(() => ({ userMemberships: { infinite: true } }));

Getting Started

Prerequisites

• SolidJS >=1
• SolidStart >=1
• Node.js >=18 or later

Installation

npm install clerk-solidjs
# or
yarn add clerk-solidjs
# or
pnpm add clerk-solidjs
# or
bun add clerk-solidjs

Build

pnpm run build

To build the package in watch mode, run the following:

pnpm run dev

Usage

Clerk requires your application to be wrapped in the <ClerkProvider /> context.

If using Vite, set VITE_CLERK_PUBLISHABLE_KEY to your Publishable key in your .env.local file to make the environment variable accessible on process.env and pass it as the publishableKey prop.

// App.tsx

import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js/web';
import { ClerkProvider } from 'clerk-solidjs';

import './app.css';

export default function App() {
  return (
    <Router
      root={(props) => (
        <ClerkProvider
          publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
        >
          <Suspense>{props.children}</Suspense>
        </ClerkProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Once you have wrapped your app in <ClerkProvider /> you can access hooks and components.

import {
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
  useAuth,
  ClerkLoading,
  ClerkLoaded
} from 'clerk-solidjs';

export default function MyComponent() {
  const { userId } = useAuth();

  return (
    <div>
      <ClerkLoading>
        <p>Loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <SignedIn>
          <UserButton />
          <p>Welcome, {userId()}</p>
        </SignedIn>
        <SignedOut>
          <SignInButton />
        </SignedOut>
      </ClerkLoaded>
    </div>
  );
}

Middleware

Clerk provides the clerkMiddleware helper function which can be used in solid-start middleware.

See SolidStart middleware for how to enable middleware.

// middleware.ts

import { createMiddleware } from '@solidjs/start/middleware';
import { clerkMiddleware } from 'clerk-solidjs/start/server';

export default createMiddleware({
  onRequest: [
    clerkMiddleware({
      publishableKey: process.env.VITE_CLERK_PUBLISHABLE_KEY,
      secretKey: process.env.CLERK_SECRET_KEY
    })
    // ... other middleware
  ]
});

The auth() Helper

Once your have the clerkMiddleware middleware enabled, you can use the auth() helper to access the AuthReturn object.

import { auth } from 'clerk-solidjs/start/server';

async function myProtectedServerFunction() {
  'use server';
  const { userId } = auth();
  if (!userId) {
    throw new Error('You must be signed in');
  }

  // ...
}

If you would like the access the auth object from event.locals directly, you must add this to your globals.d.ts file:

/// <reference types="@solidjs/start/server" />
import { AuthObject } from '@clerk/backend';

declare module '@solidjs/start/server' {
  export interface RequestEventLocals {
    auth: AuthObject;
  }
}

export {};

Examples

Basic

Basic example

Support

You can get in touch in any of the following ways:

• Create a GitHub Issue
• Create a GitHub Discussion

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines.

Security

clerk-solidjs follows good practices of security, but 100% security cannot be assured.

clerk-solidjs is provided "as is" without any warranty. Use at your own risk.

For more information and to report security issues, please refer to our security documentation.

License

This project is licensed under the MIT license.

See LICENSE for more information.