登录-clerk方案

pages/_app.js

@@ -17,6 +17,7 @@ import { getQueryParam } from '../lib/utils'
 import BLOG from '@/blog.config'
 import ExternalPlugins from '@/components/ExternalPlugins'
 import GlobalHead from '@/components/GlobalHead'
+import { ClerkProvider } from '@clerk/nextjs'
 
 /**
  * App挂载DOM 入口文件
@@ -47,13 +48,15 @@ const MyApp = ({ Component, pageProps }) => {
   )
 
   return (
-    <GlobalContextProvider {...pageProps}>
-      <GLayout {...pageProps}>
-        <GlobalHead {...pageProps} />
-        <Component {...pageProps} />
-      </GLayout>
-      <ExternalPlugins {...pageProps} />
-    </GlobalContextProvider>
+    <ClerkProvider>
+      <GlobalContextProvider {...pageProps}>
+        <GLayout {...pageProps}>
+          <GlobalHead {...pageProps} />
+          <Component {...pageProps} />
+        </GLayout>
+        <ExternalPlugins {...pageProps} />
+      </GlobalContextProvider>
+    </ClerkProvider>
   )
 }
 

pages/api/user.ts

@@ -0,0 +1,18 @@
+import { getAuth } from '@clerk/nextjs/server'
+import type { NextApiRequest, NextApiResponse } from 'next'
+/**
+ * clerk身份测试
+ * @param req
+ * @param res
+ * @returns
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const user = getAuth(req)
+  const { userId } = user
+  if (!userId) {
+    return res.status(401).json({ error: 'Unauthorized' })
+  }
+
+  // retrieve data from your database
+  res.status(200).json({ userId })
+}

pages/sign-in/[[...index]].js

@@ -1,6 +1,8 @@
+// import BLOG from '@/blog.config'
 import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { getGlobalData } from '@/lib/db/getSiteData'
+// import { getGlobalData } from '@/lib/db/getSiteData'
 import { getLayoutByTheme } from '@/themes/theme'
 import { useRouter } from 'next/router'
 
@@ -37,4 +39,15 @@ export async function getStaticProps(req) {
   }
 }
 
+/**
+ * catch-all route for clerk
+ * @returns
+ */
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: true
+  }
+}
+
 export default SignIn

pages/sign-up/[[...index]].js

@@ -37,4 +37,15 @@ export async function getStaticProps(req) {
   }
 }
 
+/**
+ * catch-all route for clerk
+ * @returns
+ */
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: true
+  }
+}
+
 export default SignUp