♻️ refactor: refactor the auth (lobehub#2043)

* ♻️ refactor: refactor the auth code * ♻️ refactor: refactor the auth code * ♻️ refactor: refactor the auth code * ♻️ refactor: refactor the auth code * 🎨 refactor: improve code
TheNameIsNigel · Apr 14, 2024 · 37ecb41 · 37ecb41
1 parent 0d37493
commit 37ecb41
Show file tree

Hide file tree

Showing 27 changed files with 133 additions and 44 deletions.
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
@@ -1,3 +1,3 @@
-export { GET, POST } from '../next-auth';
+export { GET, POST } from '@/libs/next-auth';
 
 export const runtime = 'edge'; // optional
diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx
@@ -56,7 +56,11 @@ const useStyles = createStyles(({ css, prefixCls, token }) => {
 
 const isMac = isMacOS();
 
-const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) => {
+interface FooterProps {
+  setExpand?: (expand: boolean) => void;
+}
+
+const Footer = memo<FooterProps>(({ setExpand }) => {
   const { t } = useTranslation('chat');
 
   const { theme, styles } = useStyles();
@@ -193,4 +197,6 @@ const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) =
   );
 });
 
+Footer.displayName = 'Footer';
+
 export default Footer;
diff --git a/src/app/chat/(desktop)/features/ChatInput/TextArea.tsx b/src/app/chat/(desktop)/features/ChatInput/TextArea.tsx
@@ -31,7 +31,11 @@ const useStyles = createStyles(({ css }) => {
   };
 });
 
-const InputArea = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) => {
+interface InputAreaProps {
+  setExpand?: (expand: boolean) => void;
+}
+
+const InputArea = memo<InputAreaProps>(({ setExpand }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const ref = useRef<TextAreaRef>(null);
@@ -119,4 +123,6 @@ const InputArea = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }
   );
 });
 
+InputArea.displayName = 'InputArea';
+
 export default InputArea;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,8 +7,8 @@ import { isRtlLang } from 'rtl-detect';
 import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import AuthProvider from '@/layout/AuthProvider';
-import GlobalLayout from '@/layout/GlobalLayout';
 import GlobalProvider from '@/layout/GlobalProvider';
+import LayoutRoutes from '@/layout/routes';
 import { isMobileDevice } from '@/utils/responsive';
 
 const RootLayout = async ({ children }: PropsWithChildren) => {
@@ -22,7 +22,7 @@ const RootLayout = async ({ children }: PropsWithChildren) => {
       <body>
         <GlobalProvider>
           <AuthProvider>
-            <GlobalLayout>{children}</GlobalLayout>
+            <LayoutRoutes>{children}</LayoutRoutes>
           </AuthProvider>
         </GlobalProvider>
         <Analytics />

diff --git a/src/config/server/app.ts b/src/config/server/app.ts
@@ -57,24 +57,6 @@ export const getAppConfig = () => {
 
     PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
 
-    ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
-    SSO_PROVIDERS: process.env.SSO_PROVIDERS || 'auth0',
-    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
-    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
-    AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
-    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID || '',
-    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET || '',
-    AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID || '',
-    AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET || '',
-    AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID || '',
-    AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID || '',
-    AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET || '',
-    AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER || '',
-    ZITADEL_CLIENT_ID: process.env.ZITADEL_CLIENT_ID || '',
-    ZITADEL_CLIENT_SECRET: process.env.ZITADEL_CLIENT_SECRET || '',
-    ZITADEL_ISSUER: process.env.ZITADEL_ISSUER || '',
-    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET || '',
-
     ENABLE_LANGFUSE: process.env.ENABLE_LANGFUSE === '1',
     LANGFUSE_SECRET_KEY: process.env.LANGFUSE_SECRET_KEY || '',
     LANGFUSE_PUBLIC_KEY: process.env.LANGFUSE_PUBLIC_KEY || '',

diff --git a/src/config/server/auth.ts b/src/config/server/auth.ts
@@ -0,0 +1,71 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv {
+      ENABLE_OAUTH_SSO?: string;
+      SSO_PROVIDERS?: string;
+
+      AUTH0_CLIENT_ID?: string;
+      AUTH0_CLIENT_SECRET?: string;
+      AUTH0_ISSUER?: string;
+
+      // Github
+      GITHUB_CLIENT_ID?: string;
+      GITHUB_CLIENT_SECRET?: string;
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID?: string;
+      AZURE_AD_CLIENT_SECRET?: string;
+      AZURE_AD_TENANT_ID?: string;
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID?: string;
+      AUTHENTIK_CLIENT_SECRET?: string;
+      AUTHENTIK_ISSUER?: string;
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID?: string;
+      ZITADEL_CLIENT_SECRET?: string;
+      ZITADEL_ISSUER?: string;
+      NEXTAUTH_SECRET?: string;
+    }
+  }
+}
+
+export const getAuthConfig = () => {
+  if (typeof process === 'undefined') {
+    throw new Error('[Server Config] you are importing a server-only module outside of server');
+  }
+
+  return {
+    ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
+    SSO_PROVIDERS: process.env.SSO_PROVIDERS || 'auth0',
+
+    // Auth0
+    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
+    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
+    AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
+
+    // Github
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID || '',
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET || '',
+
+    // Azure AD
+    AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID || '',
+    AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET || '',
+    AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID || '',
+
+    // AUTHENTIK
+    AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID || '',
+    AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET || '',
+    AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER || '',
+
+    // ZITADEL
+    ZITADEL_CLIENT_ID: process.env.ZITADEL_CLIENT_ID || '',
+    ZITADEL_CLIENT_SECRET: process.env.ZITADEL_CLIENT_SECRET || '',
+    ZITADEL_ISSUER: process.env.ZITADEL_ISSUER || '',
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET || '',
+  };
+};
diff --git a/src/config/server/index.ts b/src/config/server/index.ts
@@ -1,5 +1,6 @@
 import { getAnalyticsConfig } from './analytics';
 import { getAppConfig } from './app';
+import { getAuthConfig } from './auth';
 import { getProviderConfig } from './provider';
 
 export const getServerConfig = () => {
@@ -9,7 +10,8 @@ export const getServerConfig = () => {
 
   const provider = getProviderConfig();
   const app = getAppConfig();
+  const auth = getAuthConfig();
   const analytics = getAnalyticsConfig();
 
-  return { ...provider, ...app, ...analytics };
+  return { ...provider, ...app, ...analytics, ...auth };
 };
diff --git a/src/layout/AuthProvider/NextAuth/index.tsx b/src/layout/AuthProvider/NextAuth/index.tsx
@@ -0,0 +1,10 @@
+import { SessionProvider } from 'next-auth/react';
+import { PropsWithChildren } from 'react';
+
+import { API_ENDPOINTS } from '@/services/_url';
+
+const NextAuth = ({ children }: PropsWithChildren) => {
+  return <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>;
+};
+
+export default NextAuth;
diff --git a/src/layout/AuthProvider/index.tsx b/src/layout/AuthProvider/index.tsx
@@ -1,16 +1,12 @@
-import { SessionProvider } from 'next-auth/react';
 import { PropsWithChildren } from 'react';
 
 import { getServerConfig } from '@/config/server';
-import { API_ENDPOINTS } from '@/services/_url';
+
+import NextAuth from './NextAuth';
 
 const { ENABLE_OAUTH_SSO = false } = getServerConfig();
 
 const AuthProvider = ({ children }: PropsWithChildren) =>
-  ENABLE_OAUTH_SSO ? (
-    <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>
-  ) : (
-    children
-  );
+  ENABLE_OAUTH_SSO ? <NextAuth>{children}</NextAuth> : children;
 
 export default AuthProvider;
diff --git a/src/layout/DefaultLayout/Desktop/SideBar/Avatar.tsx b/src/layout/DefaultLayout/Desktop/SideBar/Avatar.tsx
@@ -0,0 +1,11 @@
+import { memo } from 'react';
+
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+
+const Avatar = memo(() => {
+  return <AvatarWithUpload id={'avatar'} />;
+});
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;
diff --git a/...lLayout/Desktop/SideBar/BottomActions.tsx → ...tLayout/Desktop/SideBar/BottomActions.tsx b/...lLayout/Desktop/SideBar/BottomActions.tsx → ...tLayout/Desktop/SideBar/BottomActions.tsx
diff --git a/...obalLayout/Desktop/SideBar/TopActions.tsx → ...aultLayout/Desktop/SideBar/TopActions.tsx b/...obalLayout/Desktop/SideBar/TopActions.tsx → ...aultLayout/Desktop/SideBar/TopActions.tsx
diff --git a/...ut/GlobalLayout/Desktop/SideBar/index.tsx → ...t/DefaultLayout/Desktop/SideBar/index.tsx b/...ut/GlobalLayout/Desktop/SideBar/index.tsx → ...t/DefaultLayout/Desktop/SideBar/index.tsx
@@ -1,9 +1,9 @@
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { SidebarTabKey } from '@/store/global/initialState';
 
+import Avatar from './Avatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
@@ -14,7 +14,7 @@ interface Props {
 export default memo<Props>(({ sidebarKey }) => {
   return (
     <SideNav
-      avatar={<AvatarWithUpload id={'avatar'} />}
+      avatar={<Avatar />}
       bottomActions={<BottomActions tab={sidebarKey} />}
       style={{ height: '100%' }}
       topActions={<TopActions tab={sidebarKey} />}

diff --git a/src/layout/GlobalLayout/Desktop/Client.tsx → src/layout/DefaultLayout/Desktop/index.tsx b/src/layout/GlobalLayout/Desktop/Client.tsx → src/layout/DefaultLayout/Desktop/index.tsx
diff --git a/src/layout/GlobalLayout/Mobile/Client.tsx → src/layout/DefaultLayout/Mobile/index.tsx b/src/layout/GlobalLayout/Mobile/Client.tsx → src/layout/DefaultLayout/Mobile/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { type MobileNavBarTitleProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';

diff --git a/src/layout/DefaultLayout/index.ts b/src/layout/DefaultLayout/index.ts
@@ -0,0 +1,2 @@
+export { default as DefaultLayoutDesktop } from './Desktop';
+export { default as DefaultLayoutMobile } from './Mobile';
diff --git a/src/layout/GlobalLayout/Desktop/index.tsx → src/layout/routes/Desktop.tsx b/src/layout/GlobalLayout/Desktop/index.tsx → src/layout/routes/Desktop.tsx
@@ -3,14 +3,16 @@
 import { usePathname } from 'next/navigation';
 import { PropsWithChildren, memo } from 'react';
 
-import Client from './Client';
+import { DefaultLayoutDesktop } from '@/layout/DefaultLayout';
+
+const defaultLayoutRoutes = new Set(['/']);
 
 const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
   const pathname = usePathname();
 
-  if (pathname === '/') return children;
+  if (defaultLayoutRoutes.has(pathname)) return children;
 
-  return <Client>{children}</Client>;
+  return <DefaultLayoutDesktop>{children}</DefaultLayoutDesktop>;
 });
 
 export default DesktopLayout;
diff --git a/src/layout/GlobalLayout/Mobile/index.tsx → src/layout/routes/Mobile.tsx b/src/layout/GlobalLayout/Mobile/index.tsx → src/layout/routes/Mobile.tsx
@@ -5,8 +5,7 @@ import { PropsWithChildren, memo } from 'react';
 
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { useIsSubSlug } from '@/hooks/useIsSubSlug';
-
-import Layout from './Client';
+import { DefaultLayoutMobile } from '@/layout/DefaultLayout';
 
 const MobileLayout = memo<PropsWithChildren>(({ children }) => {
   const pathname = usePathname();
@@ -16,9 +15,9 @@ const MobileLayout = memo<PropsWithChildren>(({ children }) => {
   if (pathname === '/') return children;
 
   return (
-    <Layout showTabBar={!isSubPath} tabBarKey={tabBarKey}>
+    <DefaultLayoutMobile showTabBar={!isSubPath} tabBarKey={tabBarKey}>
       {children}
-    </Layout>
+    </DefaultLayoutMobile>
   );
 });
 

diff --git a/src/layout/GlobalLayout/index.tsx → src/layout/routes/index.tsx b/src/layout/GlobalLayout/index.tsx → src/layout/routes/index.tsx
@@ -3,6 +3,6 @@ import ServerLayout from '@/components/server/ServerLayout';
 import Desktop from './Desktop';
 import Mobile from './Mobile';
 
-const GlobalLayout = ServerLayout({ Desktop, Mobile });
+const LayoutRoutes = ServerLayout({ Desktop, Mobile });
 
-export default GlobalLayout;
+export default LayoutRoutes;
diff --git a/src/app/api/auth/next-auth.ts → src/libs/next-auth/index.ts b/src/app/api/auth/next-auth.ts → src/libs/next-auth/index.ts
@@ -32,7 +32,7 @@ const nextAuth = NextAuth({
     async session({ session, token }) {
       // Pick userid from token
       if (session.user) {
-        session.user.id = token.userId ?? session.user.id;
+        session.user.id = (token.userId ?? session.user.id) as string;
       }
       return session;
     },

diff --git a/src/app/api/auth/sso-providers/auth0.ts → src/libs/next-auth/sso-providers/auth0.ts b/src/app/api/auth/sso-providers/auth0.ts → src/libs/next-auth/sso-providers/auth0.ts
diff --git a/src/app/api/auth/sso-providers/authentik.ts → ...libs/next-auth/sso-providers/authentik.ts b/src/app/api/auth/sso-providers/authentik.ts → ...libs/next-auth/sso-providers/authentik.ts
diff --git a/src/app/api/auth/sso-providers/azure-ad.ts → src/libs/next-auth/sso-providers/azure-ad.ts b/src/app/api/auth/sso-providers/azure-ad.ts → src/libs/next-auth/sso-providers/azure-ad.ts
diff --git a/src/app/api/auth/sso-providers/github.ts → src/libs/next-auth/sso-providers/github.ts b/src/app/api/auth/sso-providers/github.ts → src/libs/next-auth/sso-providers/github.ts
diff --git a/src/app/api/auth/sso-providers/index.ts → src/libs/next-auth/sso-providers/index.ts b/src/app/api/auth/sso-providers/index.ts → src/libs/next-auth/sso-providers/index.ts
diff --git a/src/app/api/auth/sso-providers/zitadel.ts → src/libs/next-auth/sso-providers/zitadel.ts b/src/app/api/auth/sso-providers/zitadel.ts → src/libs/next-auth/sso-providers/zitadel.ts
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -1,8 +1,8 @@
 import { NextResponse } from 'next/server';
 
 import { getServerConfig } from '@/config/server';
+import { auth } from '@/libs/next-auth';
 
-import { auth } from './app/api/auth/next-auth';
 import { OAUTH_AUTHORIZED } from './const/auth';
 
 export const config = {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as DefaultLayoutDesktop } from './Desktop';
		export { default as DefaultLayoutMobile } from './Mobile';