5分钟在Next.js中无缝实现身份验证

51xmi.com

https://51xmi.com/tt

5分钟在Next.js中无缝实现身份验证

安装 @clerk/nextjs

• yarn add @clerk/nextjs 我是用的yarn npm 和 pnpm 同理

Set your environment variables设置环境变量

1. 如果在Next.js项目的根目录中没有 .env.local 文件，请立即创建一个。

2. 找到您的Clerk可替换密钥和密钥。如果您已登录Clerk，则下面的 .env.local 片段将包含您的密钥。否则：

• 导航到您的clerk仪表板

• 选择您的应用程序，然后在侧边栏菜单中选择添加API密钥。

• 您可以从“快速复制”部分复制密钥。

1. 将密钥添加到 .env.local 文件。

将 <ClerkProvider> 添加到您的应用程序

• App Router 或

• Pages Router

import '@/styles/globals.css'
import { ClerkProvider } from "@clerk/nextjs";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClerkProvider {...pageProps}>
<Component {...pageProps} />
</ClerkProvider>
);
}
export default MyApp;

将身份验证添加到应用

1. 在项目的根目录下创建一个 middleware.ts 文件，如果有src目录的话，要在 src/ 目录下创建一个。

2. 使用 authMiddleware() ，默认情况下将在Next.js中间件运行的所有路由上启用身份验证，阻止所有已注销的访问者访问。您可以使用Next.js的 matcher

3. 将以下代码添加到 middleware.ts 中以保护整个应用程序：

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
  // Routes that can be accessed while signed out
  publicRoutes: ['/公共区'],
  // Routes that can always be accessed, and have
  // no authentication information
  ignoredRoutes: ['/不需要验证的'],  
  //也可以这样写 ,只有一个页需要验证. ignoredRoutes: (req) => !req.url.includes("/需要验证的页"),
});
 
export const config = {
  // Protects all routes, including api/trpc.
  // See https://clerk.com/docs/references/nextjs/auth-middleware
  // for more information about configuring your Middleware
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

Try accessing your app 尝试访问您的应用

1. 在项目的根目录下使用以下终端命令运行项目：

• yarn dev

1. 访问 http://localhost:3000 以访问您的应用程序。中间件将重定向到您的注册页面，由Clerk's Account Portal功能提供。

2. 注册以访问您的应用程序。

3. 登录您的新帐户。你现在应该可以访问了。

嵌入 <UserButton />

import { UserButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <>
      <header>
        <UserButton />
      </header>
      <div>Your home page's content can go here.</div>
    </>
  );
}

Sign out 注销