【10分钟】为你的SaaS实现登录

10分钟帮你解决一个出海产品的技术问题

前言

如果你的项目需要做收费，那么必不可少的就是用户体系，你要知道谁给你付钱了，这是一个重复活，登录、注册、发送注册邮件（或短信），麻烦的一批，但又不得不做，对哦，还有登录、注册的UI页面、验证码校验等...

我们可以使用一些SaaS产品来解决登录问题，本文我们使用clerk(https://clerk.com/)。

技术栈：nextjs + tailwindcss

初始化项目

npx create-next-app@latest learn-build-saas-login --tailwind --eslint

设置如下：

从上图可知，我们使用的是nextjs最新的app router模式，网上很多资料是旧的page模式，大家查资料时，自行注意一下。

我们构建2个页面，一个landing page，一个dashboard page。

• landing page：用户可以不用登录就可以访问。

• dashboard page：用户需要登录才能访问。

使用clerk实现登录

访问https://clerk.com/，注册好，然后创建一个application，设置一个名字，开启一下需要支持的平台，我这里就选一下google：

然后你会看见下图，选nextjs，创建好.env.local文件。（如果要上线，则用来改成.env，我这里使用.env）

然后我们点击【CONTINUE IN DOCS】，进入文档：https://clerk.com/docs/quickstarts/nextjs，根据文档操作。

先安装一下依赖：

yarn add @clerk/nextjs

然后在根目录的layout.js中使用一下ClerkProvider这个useContext。

// app/layout.js

import './globals.css'
import { Inter } from 'next/font/google'
import { ClerkProvider } from '@clerk/nextjs'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    
      
        {children}
      
    

  )
}

然后在根目录创建middleware.js（固定命名，nextjs框架的要求，所有的route会经过middleware.js的逻辑，主要用于做权限校验等工作）。

// middleware.js

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
    // 根目录（landing page）不需要登录即可访问
    publicRoutes: ["/"]
});
 
export const config = {
      matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

然后按文档写，创建sign-in和sign-up的目录，然后将clerk文档中给的代码都复制上去，然后在将文档中提的环境变量也都设置到.env上，如图：

上图中的变量设置了登录、注册时的链接，以及登录或注册成功后会跳转的链接（/dashboard）。

然后就可以运行起来看看效果了。

哦~老伙计，多丝滑。

这样用户就可以实现登录了，登录后，可以在clerk看到相应的数据。

clerk还支持web3的登录，活很全。

简单美化一下

现在的布局有点尴尬，我们将它弄成居中，然后在用tailwindcss搞个landing page和dashboard。

首先是居中，根据nextjs的文档，我们可以在同目录下创建layout.js来控制同目录中所有组件，这里我们加一点代码，让登录的UI居中一下。

在app中，创建(auth)目录，被()包裹的，不会被nextjs认为是路径，然后将sign-in、sign-out移入，然后创建layout.js，用tailwindcss的语法写上让children组件居中的逻辑。

然后在用课程里的知识，复制粘贴代码过来，美化一下，做好landing page 和 dashboard。

点击landing page中的【Get started】，用户在没登录的情况下，会跳转到登录

登录页面：

登录后，调到dashboard，在用clerk的UserButton组件集成一下，用户信息管理+用户登出也一秒完成。

结尾

代码提交到了github：https://github.com/ayuLiao/learn-build-saas-login

如果你也做海外产品，欢迎留言交流。

以上。