06.登陆系统-Clerk

Clerk提供了身份验证程序可以让通过邮箱登录。

只需添加 < SignIn/>、< SignUp/>、< UserButton/>、< UserProfile/> 即可获得完整的用户管理功能。

文员 |身份验证和用户管理 (opens new window)

安装 @clerk/nextjs (opens new window)

npm install @clerk/nextjs

设置 Clerk API 密钥 (opens new window)

Sign in | Clerk (opens new window)通过邮箱注册并登录Clerk

1. 创建应用

选择邮箱登录

2.将API密钥复制到env文件

3.创建src/middleware.ts，复制代码

4.添加ClerkProvider

记得在结尾处添加结束标签

继续添加代码 点击continue

添加登录页

• 阅读文档，将build signin相关代码添加到app/sign-in/[[...sign-in]]/page.tsx

• 调整middleware.ts的代码

当前路由需要时公共路由

• 更新.env的环境变量

添加

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in

启动应用测试

成功跳转到了首页

文字写于：广东