[refactor] migrate JWT verification from CSR to SSR (#201)

kaiyuanshe · Nov 6, 2023 · e5bbc9f · e5bbc9f · github-actions · Nov 6, 2023
1 parent bd35ed3
commit e5bbc9f
Show file tree

Hide file tree

Showing 43 changed files with 2,124 additions and 2,219 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers = false
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Open-source Hackathon Platform with Git-based Cloud Development Environment
 ## Technology stack
 
 - Language: [TypeScript v5][2]
-- Component engine: [Nextjs v12][3]
+- Component engine: [Nextjs v14][3]
 - Component suite: [Bootstrap v5][4]
 - State management: [MobX v6][6]
 - PWA framework: [Workbox v6][5]
@@ -60,7 +60,7 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform][12] f
 
 Check out our [Next.js deployment documentation][17] for more details.
 
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web.svg?type=large)][18]
 
 [1]: https://react.dev/
 [2]: https://www.typescriptlang.org/
@@ -76,3 +76,4 @@ Check out our [Next.js deployment documentation][17] for more details.
 [15]: https://nextjs.org/learn
 [16]: https://github.com/vercel/next.js/
 [17]: https://nextjs.org/docs/deployment
+[18]: https://app.fossa.com/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web?ref=badge_large
diff --git a/components/Activity/ActivityCard.tsx b/components/Activity/ActivityCard.tsx
@@ -5,7 +5,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import Link from 'next/link';
 import { Card, Col, Row } from 'react-bootstrap';
 
 import { Activity } from '../../models/Activity';
@@ -42,10 +41,12 @@ export function ActivityCard({
     <Card className={classNames('border-success', className)}>
       <Card.Body>
         <Card.Title
+          as="a"
           className="text-primary text-truncate text-wrap"
           title={displayName}
+          href={`/activity/${name}`}
         >
-          <Link href={`/activity/${name}`}>{displayName}</Link>
+          {displayName}
         </Card.Title>
         <Row as="small" className="g-4" xs={1}>
           <Col

diff --git a/components/Activity/ActivityManageFrame.tsx b/components/Activity/ActivityManageFrame.tsx
@@ -15,20 +15,19 @@ import {
   faUserSecret,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { computed, reaction } from 'mobx';
+import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { Fragment, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 
 import { menus } from '../../configuration/menu';
 import activityStore from '../../models/Activity';
 import { i18n } from '../../models/Base/Translation';
-import sessionStore from '../../models/User/Session';
 import { findDeep } from '../../utils/data';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
-import PageHead from '../layout/PageHead';
+import { PageHead } from '../layout/PageHead';
 import { PlatformAdminFrameProps } from '../PlatformAdmin/PlatformAdminFrame';
-import { SessionBox } from '../User/SessionBox';
+import { ServerSessionBox } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -54,19 +53,8 @@ export interface ActivityManageFrameProps extends PlatformAdminFrameProps {
 
 @observer
 export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps> {
-  sessionDisposer = reaction(
-    () => sessionStore.user,
-    user => user && this.componentDidMount(),
-  );
-
-  async componentDidMount() {
-    await activityStore.getOne(this.props.name);
-
-    if (!activityStore.currentOne.roles) sessionStore.signOut();
-  }
-
-  componentWillUnmount() {
-    this.sessionDisposer();
+  componentDidMount() {
+    activityStore.getOne(this.props.name);
   }
 
   get currentRoute() {
@@ -138,11 +126,11 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
 
   render() {
     const { authorized, currentRoute } = this,
-      { children, name, title } = this.props;
+      { children, name, title, ...props } = this.props;
 
     return (
-      <SessionBox
-        auto
+      <ServerSessionBox
+        {...props}
         className="d-flex justify-content-center align-items-center"
         style={{ height: 'calc(100vh - 3.5rem)' }}
       >
@@ -160,7 +148,7 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </SessionBox>
+      </ServerSessionBox>
     );
   }
 }
diff --git a/components/Activity/QuestionnairePreview.tsx b/components/Activity/QuestionnairePreview.tsx
@@ -1,5 +1,4 @@
 import { observer } from 'mobx-react';
-import Link from 'next/link';
 import { PureComponent } from 'react';
 import { Container, Form, Row } from 'react-bootstrap';
 
@@ -49,10 +48,14 @@ export class QuestionnaireForm extends PureComponent<QuestionnaireFormProps> {
         <legend className="text-center">{t('questionnaire')}</legend>
         <small className="text-muted mt-2">
           {t('please_complete_all_mandatory_fields_before_you_proceed')}
-
-          <Link href="https://ophapiv2-demo.authing.cn/u" passHref>
-            <a className="text-primary ms-2">{t('personal_profile')}</a>
-          </Link>
+          <a
+            className="text-primary ms-2"
+            target="_blank"
+            href="https://ophapiv2-demo.authing.cn/u"
+            rel="noreferrer"
+          >
+            {t('personal_profile')}
+          </a>
         </small>
         <ol className="my-3 px-3">{fields.map(this.renderField)}</ol>
       </Container>

diff --git a/components/PlatformAdmin/PlatformAdminFrame.tsx b/components/PlatformAdmin/PlatformAdminFrame.tsx
@@ -14,19 +14,21 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Loading } from 'idea-react';
-import { makeObservable, observable, reaction } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Fragment, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 
 import { adminMenus } from '../../configuration/menu';
 import { i18n } from '../../models/Base/Translation';
 import platformAdminStore from '../../models/User/PlatformAdmin';
-import sessionStore from '../../models/User/Session';
 import { findDeep } from '../../utils/data';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
-import PageHead from '../layout/PageHead';
-import { SessionBox } from '../User/SessionBox';
+import { PageHead } from '../layout/PageHead';
+import {
+  ServerSessionBox,
+  ServerSessionBoxProps,
+} from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -44,7 +46,7 @@ library.add(
   faDesktop,
 );
 
-export interface PlatformAdminFrameProps {
+export interface PlatformAdminFrameProps extends ServerSessionBoxProps {
   title: string;
   path?: string;
 }
@@ -59,21 +61,12 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
   @observable
   loading = false;
 
-  sessionDisposer = reaction(
-    () => sessionStore.user,
-    user => user && this.componentDidMount(),
-  );
-
   async componentDidMount() {
     this.loading = true;
     await platformAdminStore.checkAuthorization();
     this.loading = false;
   }
 
-  componentWillUnmount() {
-    this.sessionDisposer();
-  }
-
   get currentRoute() {
     const { path = '' } = this.props;
 
@@ -123,16 +116,17 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
 
   render() {
     const { currentRoute, loading } = this,
-      { children, title } = this.props,
+      { children, title, ...props } = this.props,
       { isPlatformAdmin } = platformAdminStore;
 
     return (
-      <SessionBox
-        auto
+      <ServerSessionBox
+        {...props}
         className="d-flex justify-content-center align-items-center"
         style={{ height: 'calc(100vh - 3.5rem)' }}
       >
         <PageHead title={`${title} - ${t('platform_management')}`} />
+
         {loading ? (
           <Loading />
         ) : isPlatformAdmin ? (
@@ -147,7 +141,7 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </SessionBox>
+      </ServerSessionBox>
     );
   }
 }
diff --git a/components/Team/TeamManageFrame.tsx b/components/Team/TeamManageFrame.tsx
@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Loading } from 'idea-react';
 import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
+import { JWTProps, RouteProps } from 'next-ssr-middleware';
 import { Fragment, PureComponent } from 'react';
 import { Col, Nav } from 'react-bootstrap';
 
@@ -22,14 +22,16 @@ import sessionStore from '../../models/User/Session';
 import { findDeep } from '../../utils/data';
 import { ActivityManageFrameProps } from '../Activity/ActivityManageFrame';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
-import PageHead from '../layout/PageHead';
-import { SessionBox } from '../User/SessionBox';
+import { PageHead } from '../layout/PageHead';
+import { ServerSessionBox } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
 library.add(faTrophy, faUser, faUserSecret, faCloud);
 
-export type TeamManageBaseRouterProps = Record<'path' | 'name' | 'tid', string>;
+export type TeamManageBaseParams = Record<'name' | 'tid', string>;
+
+export type TeamManageBaseProps = RouteProps<TeamManageBaseParams> & JWTProps;
 
 export interface TeamManageFrameProps extends ActivityManageFrameProps {
   tid: string;
@@ -87,19 +89,16 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
                 (teamMemberRole === 'admin' ||
                   (teamMemberRole &&
                     roles?.includes(teamMemberRole as Staff['type']))) && (
-                  <Link
+                  <Nav.Link
                     key={title}
                     href={`/activity/${name}/team/${tid}/manage/${href}`}
-                    passHref
                   >
-                    <Nav.Link>
-                      <FontAwesomeIcon
-                        icon={icon}
-                        className="text-primary ms-3 me-3"
-                      />
-                      <span className="d-md-none d-lg-inline">{title}</span>
-                    </Nav.Link>
-                  </Link>
+                    <FontAwesomeIcon
+                      icon={icon}
+                      className="text-primary ms-3 me-3"
+                    />
+                    <span className="d-md-none d-lg-inline">{title}</span>
+                  </Nav.Link>
                 ),
             )}
           </Fragment>
@@ -131,13 +130,11 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
 
   render() {
     const { authorized, currentRoute, isLoading } = this,
-      { children, name, title, tid } = this.props;
+      { children, name, title, tid, ...props } = this.props;
 
-    return isLoading ? (
-      <Loading />
-    ) : (
-      <SessionBox
-        auto
+    return (
+      <ServerSessionBox
+        {...props}
         className={
           authorized
             ? 'row row-cols-xs-1 row-cols-md-2'
@@ -146,7 +143,9 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
       >
         <PageHead title={`${title} - ${tid} - ${name} ${t('team_manage')}`} />
 
-        {authorized ? (
+        {isLoading ? (
+          <Loading />
+        ) : authorized ? (
           <>
             <Col md="auto">{this.renderNav()}</Col>
 
@@ -158,7 +157,7 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </SessionBox>
+      </ServerSessionBox>
     );
   }
 }
diff --git a/components/Team/WorkEdit.tsx → components/Team/WorkEditor.tsx b/components/Team/WorkEdit.tsx → components/Team/WorkEditor.tsx
@@ -12,15 +12,11 @@ import { i18n } from '../../models/Base/Translation';
 
 const { t } = i18n;
 
-export interface WorkEditProps {
-  name: string;
-  tid: string;
-  wid?: string;
-}
+export type WorkEditorProps = Record<'name' | 'tid', string> & { wid?: string };
 
 @observer
-export class WorkEdit extends PureComponent<WorkEditProps> {
-  constructor(props: WorkEditProps) {
+export class WorkEditor extends PureComponent<WorkEditorProps> {
+  constructor(props: WorkEditorProps) {
     super(props);
     makeObservable(this);
   }

diff --git a/components/User/AuthingGuard.tsx b/components/User/AuthingGuard.tsx
@@ -1,16 +1,20 @@
 import '@authing/native-js-ui-components/lib/index.min.css';
 
 import { Guard, GuardEvents } from '@authing/native-js-ui-components';
+import { FC } from 'react';
+
+import sessionStore from '../../models/User/Session';
 
 const title = process.env.NEXT_PUBLIC_SITE_NAME,
   AppId = process.env.NEXT_PUBLIC_AUTHING_APP_ID!;
 
 export type AuthingGuardProps = Pick<GuardEvents, 'onLogin' | 'onLoginError'>;
 
-const AuthingGuard = ({
-  onLogin = console.log,
+const AuthingGuard: FC<AuthingGuardProps> = ({
+  // @ts-ignore
+  onLogin = profile => sessionStore.signIn(profile, true),
   onLoginError = console.error,
-}: AuthingGuardProps) => (
+}) => (
   <div
     className="d-flex justify-content-center"
     ref={async target => {

diff --git a/components/User/ServerSessionBox.tsx b/components/User/ServerSessionBox.tsx
@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+import { JWTProps } from 'next-ssr-middleware';
+import { FC, HTMLAttributes } from 'react';
+
+const AuthingGuard = dynamic(() => import('./AuthingGuard'), { ssr: false });
+
+export type ServerSessionBoxProps = HTMLAttributes<HTMLDivElement> & JWTProps;
+
+export const ServerSessionBox: FC<ServerSessionBoxProps> = ({
+  jwtPayload,
+  children,
+  ...props
+}) => <div {...props}>{jwtPayload ? children : <AuthingGuard />}</div>;
diff --git a/components/User/UserBar.tsx b/components/User/UserBar.tsx
@@ -30,7 +30,13 @@ const UserBar = observer(() => {
               <Dropdown.Item href={`/user/${user.id}`}>
                 {t('home_page')}
               </Dropdown.Item>
-              <Dropdown.Item onClick={() => sessionStore.signOut()}>
+              <Dropdown.Item
+                target="_blank"
+                href="https://ophapiv2-demo.authing.cn/u"
+              >
+                {t('edit_profile')}
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => sessionStore.signOut(true)}>
                 {t('sign_out')}
               </Dropdown.Item>
             </Dropdown.Menu>