SuperStarter通过auth包来管理认证。默认情况下,这个包是对Clerk的封装,它提供了一个完整的认证和用户管理解决方案,可以与Next.js应用程序无缝集成。

您需要先在Clerk项目设置中启用Enable organizations才能使用组织管理功能。

添加环境变量

您需要为使用Clerk的应用程序添加一些环境变量。

.env.local
CLERK_WEBHOOK_SECRET=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=

应用内

@repo/auth包暴露了一个AuthProvider,但您不需要直接使用它。DesignSystemProvider包含了所有相关的provider和高阶组件。

从这里开始,您可以使用Clerk提供的所有预构建组件和hooks。为了演示这一点,我们已经在侧边栏中添加了<OrganizationSwitcher><UserButton>组件,并构建了登录和注册页面。

Webhooks

Clerk使用webhooks来处理认证事件。这些事件在api应用的POST /webhooks/clerk路由中处理。请确保在您的Clerk项目设置中启用所需的webhook事件。

邮件模板

Clerk会自动处理认证和授权邮件。您可以在其仪表板中配置Clerk发送的邮件的主题。

本地开发

我们可以使用Tunnel在本地开发中测试webhooks。 Tunnel是一个将本地机器端口暴露到互联网的工具。这使我们能够在本地测试webhook。