Skip to main content Accueil Créateurs jeremylongshore tons-of-skills-marketplace clerk-ci-integration
clerk-ci-integration Configure Clerk CI/CD integration with GitHub Actions and testing.
Use when setting up automated testing, configuring CI pipelines,
or integrating Clerk tests into your build process.
Trigger with phrases like "clerk CI", "clerk GitHub Actions",
"clerk automated tests", "CI clerk", "clerk pipeline".
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill clerk-ci-integrationLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt langchain-deploy-integration Deploy a LangChain 1.0 / LangGraph 1.0 app to Cloud Run, Vercel, or LangServe correctly — with timeouts sized for chain length, cold-start mitigation, SSE anti-buffering headers, and Secret Manager over .env. Use when prepping a first production deploy, debugging a stream that hangs behind a proxy, or diagnosing p99 latency spikes. Trigger with "langchain deploy", "langchain cloud run", "langchain vercel python", "langchain langserve", or "langchain docker".
langchain-langgraph-agents Build a correct LangGraph 1.0 ReAct agent with create_react_agent — typed tools, error propagation, recursion caps, and stop conditions that actually stop. Use when writing a first tool-calling agent, migrating from AgentExecutor or initialize_agent, or diagnosing an agent that loops on vague prompts. Trigger with "langgraph agent", "create_react_agent", "langgraph tool calling", "AgentExecutor migration", or "agent loop cost".
langchain-langgraph-human-in-loop Build LangGraph 1.0 human-in-the-loop approval flows with interrupt_before /
interrupt_after and Command(resume=...) — JSON-serializable state, clean
resume semantics, and UI wiring for approval decisions. Use when adding an
approval gate before an expensive tool call, wiring a Slack/web UI for agent
approvals, or debugging a graph that crashes on interrupt.
Trigger with "langgraph human in loop", "langgraph interrupt_before",
"langgraph approval flow", "Command resume", "langgraph HITL".
Explorateur de fichiers
2 fichiers name clerk-ci-integration description Configure Clerk CI/CD integration with GitHub Actions and testing.
Use when setting up automated testing, configuring CI pipelines,
or integrating Clerk tests into your build process.
Trigger with phrases like "clerk CI", "clerk GitHub Actions",
"clerk automated tests", "CI clerk", "clerk pipeline".
allowed-tools Read, Write, Edit, Bash(gh:*) version 1.14.0 license MIT author Jeremy Longshore <jeremy@intentsolutions.io> tags ["saas","clerk","testing","ci-cd"] compatibility Designed for Claude Code
Clerk CI Integration
Overview
Set up CI/CD pipelines with Clerk authentication testing. Covers GitHub Actions workflows, Playwright E2E tests with Clerk auth, test user management, and CI secrets configuration.
Prerequisites
GitHub repository with Actions enabled
Clerk test API keys (pk_test_ / sk_test_)
npm/pnpm project configured
Instructions
Step 1: GitHub Actions Workflow
name: Test with Clerk Auth
on:
pull_request:
branches: [main ]
push:
branches: [main ]
jobs:
test:
runs-on: ubuntu-latest
env:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.CLERK_PK_TEST }}
CLERK_SECRET_KEY: ${{ secrets.CLERK_SK_TEST }}
CLERK_WEBHOOK_SECRET: ${{ secrets.CLERK_WEBHOOK_SECRET_TEST }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- run:
npm
ci
-
run:
npm
run
build
-
run:
npm
test
-
name:
Install
Playwright
run:
npx
playwright
install
--with-deps
chromium
-
name:
Run
E2E
tests
run:
npx
playwright
test
env:
CLERK_TEST_USER_EMAIL:
${{
secrets.CLERK_TEST_USER_EMAIL
}}
CLERK_TEST_USER_PASSWORD:
${{
secrets.CLERK_TEST_USER_PASSWORD
}}
Step 2: Configure GitHub Secrets Add these secrets in GitHub repo > Settings > Secrets:
Secret Value CLERK_PK_TESTpk_test_... from dev instanceCLERK_SK_TESTsk_test_... from dev instanceCLERK_WEBHOOK_SECRET_TESTwhsec_... from dev webhooksCLERK_TEST_USER_EMAILci-test@yourapp.comCLERK_TEST_USER_PASSWORDStrong test password
Step 3: Playwright Auth Setup
import { test as setup, expect } from '@playwright/test'
import path from 'path'
const authFile = path.join (__dirname, '.auth/user.json' )
setup ('authenticate' , async ({ page }) => {
await page.goto ('/sign-in' )
await page.fill ('input[name="identifier"]' , process.env .CLERK_TEST_USER_EMAIL !)
await page.click ('button:has-text("Continue")' )
await page.fill ('input[name="password"]' , process.env .CLERK_TEST_USER_PASSWORD !)
await page.click ('button:has-text("Continue")' )
await page.waitForURL ('/dashboard' )
await expect (page.locator ('text=Dashboard' )).toBeVisible ()
await page.context ().storageState ({ path : authFile })
})
Step 4: Playwright Config with Auth State
import { defineConfig } from '@playwright/test'
export default defineConfig ({
testDir : './e2e' ,
projects : [
{ name : 'setup' , testMatch : 'auth.setup.ts' },
{
name : 'authenticated' ,
testMatch : '*.spec.ts' ,
dependencies : ['setup' ],
use : {
storageState : 'e2e/.auth/user.json' ,
},
},
],
webServer : {
command : 'npm run dev' ,
port : 3000 ,
reuseExistingServer : !process.env .CI ,
},
})
Step 5: E2E Test Examples
import { test, expect } from '@playwright/test'
test ('authenticated user sees dashboard' , async ({ page }) => {
await page.goto ('/dashboard' )
await expect (page.locator ('h1' )).toContainText ('Dashboard' )
await expect (page.locator ('[data-clerk-user-button]' )).toBeVisible ()
})
test ('unauthenticated user is redirected to sign-in' , async ({ browser }) => {
const context = await browser.newContext ()
const page = await context.newPage ()
await page.goto ('/dashboard' )
await expect (page).toHaveURL (/sign-in/ )
await context.close ()
})
test ('protected API returns data' , async ({ page }) => {
const response = await page.request .get ('/api/data' )
expect (response.status ()).toBe (200 )
const data = await response.json ()
expect (data.userId ).toBeTruthy ()
})
Step 6: Test User Seed Script for CI
import { createClerkClient } from '@clerk/backend'
const clerk = createClerkClient ({ secretKey : process.env .CLERK_SECRET_KEY ! })
async function ensureTestUser (const email = process.env .CLERK_TEST_USER_EMAIL !
const password = process.env .CLERK_TEST_USER_PASSWORD !
const existing = await clerk.users .getUserList ({ emailAddress : [email] })
if (existing.totalCount > 0 ) {
console .log ('Test user already exists' )
return
}
await clerk.users .createUser ({
emailAddress : [email],
password,
firstName : 'CI' ,
lastName : 'TestUser' ,
})
console .log ('Test user created' )
}
ensureTestUser ()
Output
GitHub Actions workflow with Clerk env vars from secrets
Playwright auth setup saving session state for reuse
E2E tests covering authenticated and unauthenticated flows
Test user seed script for CI environments
Protected API endpoint test
Error Handling Error Cause Solution Secret not found in CI Missing GitHub secret Add in repo Settings > Secrets and variables > Actions Test user sign-in fails User not created or wrong password Run seed script, verify credentials Timeout on sign-in page Clerk SDK not loaded in CI build Ensure NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is set E2E auth state stale Cached session expired Delete .auth/ directory, re-run setup
Examples
Vitest Unit Test with Mocked Clerk
import { describe, it, expect, vi } from 'vitest'
vi.mock ('@clerk/nextjs/server' , () => ({
auth : vi.fn ().mockResolvedValue ({ userId : 'user_test_123' , has : () => true }),
}))
describe ('Protected API' , () => {
it ('returns data for authenticated user' , async () => {
const { GET } = await import ('@/app/api/data/route' )
const response = await GET ()
expect (response.status ).toBe (200 )
})
})
Resources
Next Steps Proceed to clerk-deploy-integration for deployment platform setup.
