feat: connect clerk to mx-backend

Innei · Innei · commit 7ccb7e28dc0e · 2023-12-02T20:11:51.000+08:00
Signed-off-by: Innei &lt;i@innei.in&gt;
diff --git a/src/app/ClientInit.tsx b/src/app/ClientInit.tsx
@@ -0,0 +1,6 @@
+'use client'
+
+import { init } from './init'
+
+init()
+export const ClientInit = () => null
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,6 +22,7 @@ import { queries } from '~/queries/definition'
 
 import { Providers } from '../providers/root'
 import { Analyze } from './analyze'
+import { ClientInit } from './ClientInit'
 import { init } from './init'
 import { InitInClient } from './InitInClient'
 
@@ -141,6 +142,7 @@ export default async function RootLayout(props: Props) {
   return (
     // <ClerkProvider localization={ClerkZhCN}>
     <ClerkProvider>
+      <ClientInit />
       <html lang="zh-CN" className="noise" suppressHydrationWarning>
         <head>
           <SayHi />
diff --git a/src/atoms/online.ts b/src/atoms/online.ts
@@ -1,8 +1,4 @@
 import { createAtomHooks } from 'jojoo/react'
-import { setGlobalStore } from 'jojoo'
 import { atom } from 'jotai'
 
-import { jotaiStore } from '~/lib/store'
-
-setGlobalStore(jotaiStore)
 export const [, , useOnlineCount, , , setOnlineCount] = createAtomHooks(atom(0))
diff --git a/src/atoms/owner.ts b/src/atoms/owner.ts
@@ -53,15 +53,24 @@ export const login = async (username?: string, password?: string) => {
     return
   }
 
-  await apiClient.user.proxy.login.put<{ token: string }>().then((res) => {
-    jotaiStore.set(isLoggedAtom, true)
-    toast(`欢迎回来，${jotaiStore.get(ownerAtom)?.name}`, 'success')
-    setToken(res.token)
-  })
+  await refreshToken()
+  toast(`欢迎回来，${jotaiStore.get(ownerAtom)?.name}`, 'success')
 
   return true
 }
 
 export const useIsLogged = () => useAtomValue(isLoggedAtom)
 
 export const isLogged = () => jotaiStore.get(isLoggedAtom)
+
+export const refreshToken = async () => {
+  const token = getToken()
+  if (!token) return
+  await apiClient.user.proxy.login.put<{ token: string }>().then((res) => {
+    jotaiStore.set(isLoggedAtom, true)
+
+    setToken(res.token)
+  })
+
+  await fetchAppUrl()
+}
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -45,7 +45,6 @@ const MemoedHeader = memo(() => {
         <HeaderLogoArea>
           <AnimatedLogo />
 
-          {/* <SiteOwnerAvatar className="absolute bottom-[10px] right-[2px] hidden lg:inline-block" /> */}
           <OnlyMobile>
             <HeaderMeta />
           </OnlyMobile>
diff --git a/src/components/layout/header/internal/UserAuth.tsx b/src/components/layout/header/internal/UserAuth.tsx
@@ -1,26 +1,37 @@
 'use client'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { AnimatePresence } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import { usePathname } from 'next/navigation'
 
-import { useIsLogged, useResolveAdminUrl } from '~/atoms'
+import { useSignIn } from '@clerk/nextjs'
+
+import { refreshToken, useIsLogged, useResolveAdminUrl } from '~/atoms'
+import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
 import { MotionButtonBase } from '~/components/ui/button'
+import { FloatPopover } from '~/components/ui/float-popover'
 import { urlBuilder } from '~/lib/url-builder'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 
-const UserAuthFromIcon = dynamic(() =>
-  import('./UserAuthFromIcon').then((mod) => mod.UserAuthFromIcon),
-)
+import { HeaderActionButton } from './HeaderActionButton'
 
 const SignedIn = dynamic(() =>
   import('@clerk/nextjs').then((mod) => mod.SignedIn),
 )
 
+const UserAuthFromIcon = dynamic(() =>
+  import('./UserAuthFromIcon').then((mod) => mod.UserAuthFromIcon),
+)
+const SignedOut = dynamic(() =>
+  import('@clerk/nextjs').then((mod) => mod.SignedOut),
+)
 const UserButton = dynamic(() =>
   import('@clerk/nextjs').then((mod) => mod.UserButton),
 )
+const SignInButton = dynamic(() =>
+  import('@clerk/nextjs').then((mod) => mod.SignInButton),
+)
 
 const OwnerAvatar = () => {
   const ownerAvatar = useAggregationSelector((s) => s.user.avatar)!
@@ -30,18 +41,26 @@ const OwnerAvatar = () => {
       onClick={() => {
         window.open(resolveAdminUrl(), '_blank')
       }}
-      className="pointer-events-auto flex h-10 w-10 items-center justify-center overflow-hidden rounded-full"
+      className="pointer-events-auto relative flex h-10 w-10 items-center justify-center"
     >
       <span className="sr-only">Go to dashboard</span>
-      <img src={ownerAvatar} alt="site owner" />
+      <img className="rounded-full" src={ownerAvatar} alt="site owner" />
+      <UserAuthFromIcon className="absolute -bottom-1 -right-1" />
     </MotionButtonBase>
   )
 }
+
 export function UserAuth() {
   const pathname = usePathname()
-
   const isLogged = useIsLogged()
 
+  const { isLoaded } = useSignIn()
+
+  useEffect(() => {
+    // token 刷新，使用 mx token 替换
+    if (isLoaded) refreshToken()
+  }, [isLoaded])
+
   if (isLogged) {
     return <OwnerAvatar />
   }
@@ -63,6 +82,27 @@ export function UserAuth() {
           </div>
         </div>
       </SignedIn>
+
+      <SignedOut key="sign-in">
+        <FloatPopover
+          TriggerComponent={TriggerComponent}
+          wrapperClassName="h-full w-full flex items-center justify-center"
+          type="tooltip"
+        >
+          登录
+        </FloatPopover>
+      </SignedOut>
     </AnimatePresence>
   )
 }
+
+const TriggerComponent = () => {
+  const pathname = usePathname()
+  return (
+    <SignInButton mode="modal" redirectUrl={urlBuilder(pathname).href}>
+      <HeaderActionButton aria-label="Guest Login">
+        <UserArrowLeftIcon className="h-4 w-4" />
+      </HeaderActionButton>
+    </SignInButton>
+  )
+}
diff --git a/src/lib/cookie.ts b/src/lib/cookie.ts
@@ -1,13 +1,15 @@
 import dayjs from 'dayjs'
 import Cookies from 'js-cookie'
 
+import { constants } from '@clerk/nextjs/server'
+
 export const TokenKey = 'mx-token'
 
-/**
- * 带了 bearer
- */
 export function getToken(): string | null {
-  const token = Cookies.get(TokenKey)
+  const clerkJwt = Cookies.get(constants.Cookies.Session)
+
+  const token = Cookies.get(TokenKey) || clerkJwt
+
   return token || null
 }
 
diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -1,7 +1,3 @@
-import { setGlobalStore as setStore } from 'jojoo'
-import { createStore } from 'jotai/vanilla'
+import { getDefaultStore } from 'jotai/vanilla'
 
-const jotaiStore = createStore()
-setStore(jotaiStore)
-
-export { jotaiStore }
+export const jotaiStore = getDefaultStore()
