clerk-setup

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Adding Clerk

添加Clerk身份验证

This skill sets up Clerk for authentication by following the official quickstart documentation.

本技能会按照官方快速入门文档的步骤，为项目搭建Clerk身份验证系统。

Quick Reference

快速参考

Step	Action
1. Detect framework	Check `package.json` dependencies
2. Fetch quickstart	Use WebFetch on the appropriate docs URL
3. Follow instructions	Execute the steps from the official guide
4. Get API keys	From dashboard.clerk.com

步骤	操作
1. 检测框架	检查 `package.json` 中的依赖项
2. 获取快速入门指南	使用WebFetch获取对应框架的文档URL
3. 遵循操作说明	执行官方指南中的步骤
4. 获取API密钥	从dashboard.clerk.com获取

Framework Detection

框架检测

Check

package.json

to identify the framework:

Dependency	Framework	Quickstart URL
`next`	Next.js	`https://clerk.com/docs/nextjs/getting-started/quickstart`
`@remix-run/react`	Remix	`https://clerk.com/docs/remix/getting-started/quickstart`
`astro`	Astro	`https://clerk.com/docs/astro/getting-started/quickstart`
`nuxt`	Nuxt	`https://clerk.com/docs/nuxt/getting-started/quickstart`
`react-router`	React Router	`https://clerk.com/docs/react-router/getting-started/quickstart`
`@tanstack/react-start`	TanStack Start	`https://clerk.com/docs/tanstack-react-start/getting-started/quickstart`
`react` (no framework)	React SPA	`https://clerk.com/docs/react/getting-started/quickstart`
`vue`	Vue	`https://clerk.com/docs/vue/getting-started/quickstart`
`express`	Express	`https://clerk.com/docs/expressjs/getting-started/quickstart`
`fastify`	Fastify	`https://clerk.com/docs/fastify/getting-started/quickstart`
`expo`	Expo	`https://clerk.com/docs/expo/getting-started/quickstart`

For other platforms:

Chrome Extension:

https://clerk.com/docs/chrome-extension/getting-started/quickstart

Android:

https://clerk.com/docs/android/getting-started/quickstart

iOS:

https://clerk.com/docs/ios/getting-started/quickstart

Vanilla JavaScript:

https://clerk.com/docs/js-frontend/getting-started/quickstart

检查

package.json

以识别项目框架：

依赖项	框架	快速入门URL
`next`	Next.js	`https://clerk.com/docs/nextjs/getting-started/quickstart`
`@remix-run/react`	Remix	`https://clerk.com/docs/remix/getting-started/quickstart`
`astro`	Astro	`https://clerk.com/docs/astro/getting-started/quickstart`
`nuxt`	Nuxt	`https://clerk.com/docs/nuxt/getting-started/quickstart`
`react-router`	React Router	`https://clerk.com/docs/react-router/getting-started/quickstart`
`@tanstack/react-start`	TanStack Start	`https://clerk.com/docs/tanstack-react-start/getting-started/quickstart`
`react` （无框架）	React单页应用	`https://clerk.com/docs/react/getting-started/quickstart`
`vue`	Vue	`https://clerk.com/docs/vue/getting-started/quickstart`
`express`	Express	`https://clerk.com/docs/expressjs/getting-started/quickstart`
`fastify`	Fastify	`https://clerk.com/docs/fastify/getting-started/quickstart`
`expo`	Expo	`https://clerk.com/docs/expo/getting-started/quickstart`

其他平台：

Chrome扩展：

https://clerk.com/docs/chrome-extension/getting-started/quickstart

Android：

https://clerk.com/docs/android/getting-started/quickstart

iOS：

https://clerk.com/docs/ios/getting-started/quickstart

原生JavaScript：

https://clerk.com/docs/js-frontend/getting-started/quickstart

Decision Tree

决策树

User Request: "Add Clerk" / "Add authentication"
    │
    ├─ Read package.json
    │
    ├─ Existing auth detected?
    │   │
    │   ├─ YES → Audit current auth → Create migration plan
    │   │        → See "Migrating from Another Auth Provider"
    │   │
    │   └─ NO → Fresh install
    │
    ├─ Identify framework from dependencies
    │
    ├─ WebFetch the appropriate quickstart URL
    │
    └─ Follow the official instructions step-by-step

用户请求："添加Clerk" / "添加身份验证"
    │
    ├─ 读取package.json
    │
    ├─ 检测到已有身份验证系统？
    │   │
    │   ├─ 是 → 审核当前身份验证系统 → 制定迁移计划
    │   │        → 查看"从其他身份验证提供商迁移"章节
    │   │
    │   └─ 否 → 全新安装
    │
    ├─ 根据依赖项识别框架
    │
    ├─ 使用WebFetch获取对应框架的快速入门URL
    │
    └─ 逐步遵循官方操作说明

Setup Process

搭建流程

1. Detect the Framework

1. 检测框架

Read the project's

package.json

and match dependencies to the table above.

读取项目的

package.json

，根据上述表格匹配对应的框架。

2. Fetch the Quickstart Guide

2. 获取快速入门指南

Use WebFetch to retrieve the official quickstart for the detected framework:

WebFetch: https://clerk.com/docs/{framework}/getting-started/quickstart
Prompt: "Extract the complete setup instructions including all code snippets, file paths, and configuration steps."

使用WebFetch获取对应框架的官方快速入门指南：

WebFetch: https://clerk.com/docs/{framework}/getting-started/quickstart
Prompt: "提取完整的搭建说明，包括所有代码片段、文件路径和配置步骤。"

3. Follow the Instructions

3. 遵循操作说明

Execute each step from the quickstart guide:

Install the required packages
Set up environment variables
Add the provider/middleware
Create sign-in/sign-up routes if needed
Test the integration

执行快速入门指南中的每一步：

安装所需的包
配置环境变量
添加Provider/中间件
如有需要，创建登录/注册路由
测试集成效果

4. Get API Keys

4. 获取API密钥

Two paths for development API keys:

Keyless (Automatic)

On first SDK initialization, Clerk auto-generates dev keys and shows "Claim your application" popover
No manual key setup required—keys are created and injected automatically
Simplest path for new projects

Manual (Dashboard)

Get keys from dashboard.clerk.com if Keyless doesn't trigger
Publishable Key: Starts with
```
pk_test_
```
or
```
pk_live_
```
Secret Key: Starts with
```
sk_test_
```
or
```
sk_live_
```

Set as environment variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

and

CLERK_SECRET_KEY

获取开发环境API密钥有两种方式：

无密钥模式（自动）

首次初始化SDK时，Clerk会自动生成开发密钥，并显示"Claim your application"弹窗
无需手动配置密钥——密钥会自动创建并注入
是新项目最简单的配置方式

手动模式（控制台）

如果无密钥模式未触发，可从dashboard.clerk.com获取密钥
可发布密钥：以
```
pk_test_
```
或
```
pk_live_
```
开头
密钥：以
```
sk_test_
```
或
```
sk_live_
```
开头

设置为环境变量：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

和

CLERK_SECRET_KEY

Migrating from Another Auth Provider

从其他身份验证提供商迁移

If the project already has authentication, create a migration plan before replacing it.

如果项目已存在身份验证系统，在替换前需制定迁移计划。

Detect Existing Auth

检测已有身份验证系统