feat: oidc in server side

src/app/oidc/auth/page.tsx

@@ -1,11 +1,25 @@
 'use server';
 
-import React from 'react';
-
 import oidc from '@/config/oidc.mjs';
+import queryString from 'query-string';
+import { redirect } from 'next/navigation';
+// import { getUserData } from '@/app/actions/user';
 
-import Auth from './Auth';
+const { client, server } = oidc;
+const { url } = server;
+const { client_id, redirect_uri, origin } = client;
 
 export default async function AuthServer() {
-  return <Auth oidc={oidc} />;
+  const query = queryString.stringify({
+    client_id,
+    redirect_uri: `${origin}${redirect_uri}`,
+    response_type: 'code',
+    scope: 'openid profile email groups offline_access',
+  });
+  // todo validate
+  // const user = await getUserData();
+  // if (!user) {
+  //   redirect(`${url}/oidc/auth?${query}`);
+  // }
+  redirect(`${url}/oidc/auth?${query}`);
 }

src/app/oidc/callback/Callback.tsx

@@ -1,40 +1,29 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { AUTH_DATA } from '@/utils/constants';
+import { useRouter } from 'next/navigation';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 
-import oidc from '@/config/oidc.mjs';
-
-const { AUTH_DATA } = oidc;
-
-export default function Callback({ redirect_uri }: { redirect_uri: string }) {
-  const searchParams = useSearchParams();
+export default function Callback({ data: res }: { data: any }) {
   const dispatch = useDispatch();
   const router = useRouter();
-  const code = searchParams.get('code');
-  const fetchAuth = async () => {
-    fetch(`/oidc/token?code=${code}&redirect_uri=${location.origin}${redirect_uri}`, {
-      method: 'POST',
-    })
-      .then(res => res.json())
-      .then(res => {
-        if (res.data?.errors) {
-          console.warn(res.data?.errors);
-          return;
-        }
-        if (res.data) {
-          localStorage.setItem(AUTH_DATA, JSON.stringify(res.data));
-          dispatch({
-            type: 'SAVE_AUTH_DATA',
-            authData: res.data,
-          });
-          router.push('/chat');
-        }
+  const saveAuth = async () => {
+    if (res?.data?.errors) {
+      console.warn(res?.data?.errors);
+      return;
+    }
+    if (res?.data) {
+      localStorage.setItem(AUTH_DATA, JSON.stringify(res.data));
+      dispatch({
+        type: 'SAVE_AUTH_DATA',
+        authData: res.data,
       });
+      router.push('/chat');
+    }
   };
   React.useEffect(() => {
-    fetchAuth();
+    saveAuth();
   }, []);
   return <> </>;
 }

src/app/oidc/callback/page.tsx

@@ -1,11 +1,15 @@
 'use server';
 
 import React from 'react';
-
 import oidc from '@/config/oidc.mjs';
-
 import Callback from './Callback';
 
-export default async function CallbackServer() {
-  return <Callback redirect_uri={oidc.client.redirect_uri} />;
+export default async function CallbackServer({ searchParams }: any) {
+  const { code } = searchParams;
+  const { origin, redirect_uri } = oidc.client
+  const res = await fetch(`${origin}/oidc/token?code=${code}&redirect_uri=${origin}${redirect_uri}`, {
+    method: 'POST',
+  });
+  const data = await res.json();
+  return <Callback data={data} />;
 }

src/app/oidc/logout/page.tsx

@@ -1,11 +1,13 @@
 'use server';
 
-import React from 'react';
-
-import oidc from '@/config/oidc.mjs';
-
-import Logout from './Logout';
+import oidc from '@/config/oidc.mjs'
+import { redirect } from 'next/navigation';
 
 export default async function LogoutServer() {
-  return <Logout oidc={oidc} />;
+  const { client, server } = oidc;
+  const { redirect_uri, origin } = client;
+  const { url } = server;
+  redirect(`${url}/oidc/logout/remove-auth-data?redirect=${encodeURIComponent(
+    `${url}/oidc/auth?redirect_uri=${origin}${redirect_uri}&response_type=code&scope=openid+profile+email+groups+offline_access`
+  )}`);
 }

src/app/oidc/token/route.ts

@@ -1,3 +1,5 @@
+'use server';
+
 import { type NextRequest, NextResponse } from 'next/server';
 
 import oidc from '@/config/oidc.mjs';

src/app/setting/SettingClient/BtnList/index.tsx

@@ -15,6 +15,7 @@ import React from 'react';
 import BtnsBlock, { Btn } from '@/components/BtnsBlock';
 
 import { useStyles } from './styles';
+import { AUTH_DATA } from '@/utils/constants';
 
 // interface SettingBtnListProps {}
 
@@ -81,6 +82,7 @@ const SettingBtnList = React.memo<any>(() => {
         icon: LogOut,
         title: '退出登录',
         onClick: () => {
+          localStorage.removeItem(AUTH_DATA);
           router.push('/oidc/logout');
         },
       },

src/config/oidc.mjs

@@ -8,5 +8,6 @@ export default {
     client_id: process.env.CLIENT_ID,
     client_secret: process.env.CLIENT_SECRET,
     redirect_uri: process.env.CLIENT_REDIRECT_URI,
+    origin: process.env.CLIENT_ORIGIN,
   },
 };

src/layout/GlobalLayout/index.tsx

@@ -32,7 +32,7 @@ export default function GlobalLayout({ children }: { children: React.ReactNode }
       theme: localStorage.getItem('theme') || 'light',
       activeChat: 'name',
     });
-  }, []);
+  }, [ pathname ]);
   const store = useStore(initialState);
   return (
     <Provider store={store}>

src/utils/constants.ts

@@ -0,0 +1 @@
+export const AUTH_DATA = 'authData';

src/utils/index.ts

@@ -1,6 +1,5 @@
 import { headers } from 'next/headers';
 import { UAParser } from 'ua-parser-js';
-
 /**
  * check mobile device in server
  */