Tube - Authentication

• Integrate Clerk

  • Clerk => Dashboard => create application，当前登录选项只选择了google
  • bun add @clerk/nextjs，当前版本 "@clerk/nextjs": "^6.28.1"
  • set your Clerk API Keys，写入文件.env中

  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=***
  CLERK_SECRET_KEY=***
  

• Add Sign, Add UserButton, Add middleware

  • Update or Create src/middware.ts（请参考clerk文档）
  • Add ClerkProvider to your app src/app/layout.tsx（请参考clerk文档）
  • Build your own sign-in-or-out page，这部分参考了此篇文档
  • 自定义部分重定向的地址，我们需要在环境变量中自定义登录、注册相关的路由地址
  • 组件文档： UserButton
  • hooks文档：useClerk()，useAuth()
  • clerkMiddleware()：通过中间件将Clerk身份验证集成到程序中，默认是不保护任何路由的，但可以通过配置实现基于身份验证保护路由或基于授权保护路由
  • createRouteMatcher()，接收一个路由数组

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

// 需要保护的路由
const isProjectedRoute = createRouteMatcher([
  "/studio(.*)", 
]);

export default  clerkMiddleware(async (auth, req) => {
  if(isProjectedRoute(req)) await auth.protect(); // 基于身份验证保护路由
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

• Catch-All 路由

  • Optional Catch-All Segment，指定开头路径但参数可选
  • app/sign-in/[[...sign-in]]/page.tsx 在当前路径中，匹配 /sign-in 以及任何以 /sign-in/... 开头的路径，且参数是可选
  • 路径 /sign-in，捕获参数undefined或[]；路径 /sign-in/google，捕获参数['google']
  • Clerk可提供多种身份认证，例如google、邮箱以及很多第三方登录，这些登录都涉及到路径变种，例如/sign-in/google、/sign-in/sso/callback、/sign-in等等，那么用[[...sign-in]]就可以用一个文件捕获所有路径，在其中再判断具体是哪种登录方式从而实现动态渲染或跳转

• children

  • children 是一个特殊的 prop，表示组件标签中包裹的子元素
  • children 由 Next.js 自动传递，是当前访问的页面渲染出来的组件
  • React.ReactNode 是一个类型，它表示可以被渲染的任何 React 内容，JSX、字符串、数字等
  • 在 App Router 中，layout.tsx通过children渲染具体页面

// src/app/(auth)/layout.tsx

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  return (
    <div className="min-h-screen flex items-center justify-center">
      { children }
    </div>
  );
}

export default Layout;