[add] API proxy & OAuth middleware of GitHub

Author: TechQuery

components/Layout/MainNavigator.tsx

@@ -11,7 +11,7 @@ import { BrandLogo, GithubIcon } from './Svg';
 
 export const mainNavLinks = () => [
   { title: t('latest_projects'), href: '/project' },
-  { title: 'GitHub-reward', href: '/project/reward/issue' },
+  { title: 'GitHub-reward', href: '/project/reward/issue', target: '_top' },
   { title: t('member'), href: '/member' },
   { title: t('open_source_project'), href: '/open-source' },
 ];
@@ -27,8 +27,8 @@ export class MainNavigator extends Component {
   };
 
   renderLinks = () =>
-    mainNavLinks().map(({ title, href }) => (
-      <Link key={title} className="py-1" href={href}>
+    mainNavLinks().map(({ title, href, target }) => (
+      <Link key={title} className="py-1" href={href} target={target}>
         {title}
       </Link>
     ));

models/Base.ts

@@ -10,7 +10,7 @@ if (!isServer()) githubClient.baseURI = `${API_Host}/api/GitHub/`;
 githubClient.use(({ request }, next) => {
   if (GithubToken)
     request.headers = {
-      authorization: `Bearer ${GithubToken}`,
+      Authorization: `Bearer ${GithubToken}`,
       ...request.headers,
     };
   return next();

models/configuration.ts

@@ -1,12 +1,11 @@
-import { parseCookie } from 'mobx-i18n';
-
 export const Name = process.env.NEXT_PUBLIC_SITE_NAME,
   Summary = process.env.NEXT_PUBLIC_SITE_SUMMARY,
   DefaultImage = process.env.NEXT_PUBLIC_LOGO || '/og.png';
 
 export const isServer = () => typeof window === 'undefined';
 
-export const VercelHost = process.env.VERCEL_URL;
+export const { VERCEL } = process.env,
+  VercelHost = process.env.VERCEL_URL;
 
 export const API_Host = isServer()
   ? VercelHost
@@ -18,8 +17,9 @@ export const CACHE_HOST = process.env.NEXT_PUBLIC_CACHE_HOST!;
 
 export const { CRAWLER_TOKEN, JWT_SECRET } = process.env;
 
-export const GithubToken =
-  parseCookie(globalThis.document?.cookie || '').token || process.env.GITHUB_TOKEN;
+export const ProxyBaseURL = `https://idea2.app/proxy`;
+
+export const GithubToken = process.env.GITHUB_TOKEN;
 
 export const LARK_API_HOST = `${API_Host}/api/Lark/`;
 

next.config.ts

@@ -1,4 +1,5 @@
 import { withSentryConfig } from '@sentry/nextjs';
+import { NextConfig } from 'next';
 import setPWA from 'next-pwa';
 import webpack from 'webpack';
 
@@ -12,6 +13,20 @@ const withPWA = setPWA({
   disable: isDev,
 });
 
+const rewrites: NextConfig['rewrites'] = async () => ({
+  beforeFiles: [
+    {
+      source: '/proxy/github.com/:path*',
+      destination: 'https://github.com/:path*',
+    },
+    {
+      source: '/proxy/raw.githubusercontent.com/:path*',
+      destination: 'https://raw.githubusercontent.com/:path*',
+    },
+  ],
+  afterFiles: [],
+});
+
 const nextConfig = withPWA({
   output: CI ? 'standalone' : undefined,
   compiler: {
@@ -30,6 +45,7 @@ const nextConfig = withPWA({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return config;
   },
+  rewrites,
 });
 
 export default isDev || !SENTRY_AUTH_TOKEN

pages/api/GitHub/core.ts

@@ -1,5 +1,8 @@
 import { Context, Middleware } from 'koa';
 import { githubClient } from 'mobx-github';
+import { githubOAuth2 } from 'next-ssr-middleware';
+
+import { ProxyBaseURL, VERCEL } from '../../../models/configuration';
 
 export const proxyGithub = async <T>({
   method,
@@ -20,3 +23,13 @@ export const proxyGitHubAll: Middleware = async context => {
   context.status = status;
   context.body = body;
 };
+
+const client_id = process.env.GITHUB_OAUTH_CLIENT_ID!,
+  client_secret = process.env.GITHUB_OAUTH_CLIENT_SECRET!;
+
+export const githubOAuth = githubOAuth2({
+  rootBaseURL: VERCEL ? undefined : `${ProxyBaseURL}/github.com/`,
+  client_id,
+  client_secret,
+  scopes: ['user', 'repo'],
+});

pages/project/reward/issue.tsx

@@ -9,14 +9,15 @@ import { PageHead } from '../../../components/PageHead';
 import { ScrollList } from '../../../components/ScrollList';
 import issueStore, { IssueFilter, IssueModel } from '../../../models/Issue';
 import { i18n } from '../../../models/Translation';
+import { githubOAuth } from '../../api/GitHub/core';
 
 const issueFilter: IssueFilter = {
   repository_url: 'https://github.com/idea2app',
   state: 'open',
   title: 'reward',
 };
 
-export const getServerSideProps = compose(cache(), errorLogger, translator(i18n), async () => {
+export const getServerSideProps = compose(githubOAuth, errorLogger, translator(i18n), async () => {
   const list = await new IssueModel().getList(issueFilter);
 
   return { props: JSON.parse(JSON.stringify({ list })) };