redwood-clerk

Unofficial Clerk integration for RedwoodSDK.

Minimal example: https://github.com/wobsoriano/redwood-clerk-minimal

Installation

npm install redwood-clerk

Quickstart

Add clerkMiddleware() to your app

clerkMiddleware() grants you access to user authentication state throughout your app.

In your entry point (src/worker.tsx) file, add the clerkMiddleware() helper to the defineApp function:

import { clerkMiddleware } from 'redwood-clerk/server';
import type { WithClerkContext } from 'redwood-clerk/server';

export type AppContext = WithClerkContext<{
  // Additional context
}>;

export default defineApp([
  setCommonHeaders(),
  clerkMiddleware(),
  render(Document, [...]),
]);

Configure Clerk Content-Security-Policy headers

In your src/app/headers.ts file, update the Content-Security-Policy header for Clerk to work correctly in your application:

import { frontendApi } from 'redwood-clerk/server';

const cspHeader = `
  default-src 'self';
  script-src 'self' 'strict-dynamic' 'nonce-${nonce}' https://${frontendApi} https://challenges.cloudflare.com;
  connect-src 'self' https://${frontendApi};
  img-src 'self' https://img.clerk.com;
  style-src 'self' 'unsafe-inline';
  frame-src https://challenges.cloudflare.com;
  object-src 'none';
  form-action 'self';
`

response.headers.set('Content-Security-Policy', cspHeader.replace(/\n/g, ''));

Add <ClerkProvider> to your app

Add the <ClerkProvider> component to your app's layout. This component provides Clerk's authentication context to your app.

import {
  ClerkProvider,
  SignInButton,
  SignUpButton,
  SignedIn,
  SignedOut,
  UserButton,
} from 'redwood-clerk';

export const AppLayout = ({ children }) => {
	return (
		<ClerkProvider>
		  <header>
        <SignedOut>
          <SignInButton />
          <SignUpButton />
        </SignedOut>
        <SignedIn>
          <UserButton />
        </SignedIn>
      </header>
			{children}
		</ClerkProvider>
	);
}

Create your first user

Run your project in development mode and go to http://localhost:5173

Read session and user data in your RedwoodSDK app

Server components

import { auth, clerkClient } from 'redwood-clerk/server'

export default async function Page() {
  const { userId } = await auth()

  // Protect the route by checking if the user is signed in
  if (!userId) {
    return <div>Sign in to view this page</div>
  }

  const user = await clerkClient().users.getUser(userId)

  return <div>Welcome, {user.firstName}!</div>
}

Client components

'use client'
import { useAuth } from 'redwood-clerk'

export default function Example() {
  const { isLoaded, isSignedIn, userId } = useAuth()

  // Use `isLoaded` to check if Clerk is loaded
  if (!isLoaded) {
    return <div>Loading...</div>
  }

  // Use `isSignedIn` to check if the user is signed in
  if (!isSignedIn) {
    return <div>Sign in to view this page</div>
  }

  return (
    <div>
      Hello, {userId}! Your current active session is {sessionId}.
    </div>
  )
}

License

MIT