feat/authorization

.yarnrc.yml

@@ -1,4 +1,7 @@
 packageExtensions:
+  '@graphql-codegen/plugin-helpers@*':
+    dependencies:
+      '@graphql-tools/apollo-engine-loader': '8.0.1'
   glob-promise@*:
     dependencies:
       glob: '7.2.3'

app/api/github-auth-cookie/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@app/github-auth-cookie-api",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "src/index.ts",
+  "dependencies": {
+    "@globals/data": "workspace:*"
+  }
+}

app/api/github-auth-cookie/src/github-auth-cookie-handle.api.ts

@@ -0,0 +1,36 @@
+// @ts-ignore:next-line
+import { cookies }             from 'next/headers'
+// @ts-ignore:next-line
+import { redirect }            from 'next/navigation'
+
+import { getGithubAuthToken }  from '@globals/data'
+
+import { COOKIE_EXPIRES_WEEK } from './github-auth-cookie-handle.constants.js'
+import { RU_MESSAGES }         from './github-auth-cookie-handle.messages.js'
+
+export async function githubAuthCookieHandle(request: Request) {
+  const REQUEST_URL = new URL(request.url)
+  const REQUEST_ORIGIN = REQUEST_URL.origin
+  const { searchParams } = REQUEST_URL
+  const CODE = searchParams.get('code')
+
+  const REGISTRATION_URL = new URL('/registration', REQUEST_ORIGIN)
+
+  if (CODE) {
+    try {
+      const TOKEN = await getGithubAuthToken(CODE)
+
+      const { TOKEN_COOKIE_NAME } = process.env
+      cookies().set(TOKEN_COOKIE_NAME as string, TOKEN, {
+        expires: Date.now() + COOKIE_EXPIRES_WEEK,
+      })
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e)
+      REGISTRATION_URL.searchParams.set('errorMessage', RU_MESSAGES.tokenError)
+      return redirect(REGISTRATION_URL.href)
+    }
+  }
+
+  return redirect(REQUEST_ORIGIN)
+}

app/api/github-auth-cookie/src/github-auth-cookie-handle.constants.ts

@@ -0,0 +1 @@
+export const COOKIE_EXPIRES_WEEK = 1000 * 60 * 60 * 24 * 7

app/api/github-auth-cookie/src/github-auth-cookie-handle.messages.ts

@@ -0,0 +1,3 @@
+export const RU_MESSAGES = {
+  tokenError: 'Ошибка с получением TOKEN от GitHub',
+}

app/api/github-auth-cookie/src/index.ts

@@ -0,0 +1 @@
+export * from './github-auth-cookie-handle.api.js'

app/api/logout/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@app/logout-api",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "src/index.ts"
+}

app/api/logout/src/index.ts

@@ -0,0 +1 @@
+export * from './logout.api.js'

app/api/logout/src/logout.api.ts

@@ -0,0 +1,10 @@
+// @ts-ignore:next-line
+import { cookies }  from 'next/headers'
+// @ts-ignore:next-line
+import { redirect } from 'next/navigation'
+
+export const logoutHandle = (request: Request) => {
+  cookies().delete('token')
+  const redirectUrl = new URL(request.url)
+  return redirect(redirectUrl.origin)
+}

app/entrypoints/renderer/package.json

@@ -10,14 +10,18 @@
     "start": "node dist/src/index.cjs"
   },
   "dependencies": {
+    "graphql": "16.8.2",
     "react-intl": "6.6.8"
   },
   "devDependencies": {
     "@app/base-layout": "workspace:*",
+    "@app/github-auth-cookie-api": "workspace:*",
     "@app/index-page": "workspace:*",
     "@app/loading": "workspace:*",
+    "@app/logout-api": "workspace:*",
     "@app/organizations-page": "workspace:*",
     "@app/registration-page": "workspace:*",
+    "@app/root-layout": "workspace:*",
     "@app/users-page": "workspace:*",
     "@emotion/react": "11.11.4",
     "@types/node": "20.12.12",
@@ -27,7 +31,6 @@
     "next": "14.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-intl": "6.6.8",
     "typescript": "5.2.2"
   }
 }

app/entrypoints/renderer/src/.env

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_GH_CLIENT_ID="Ov23li9kGqtVre5AFIeA"
+NEXT_PUBLIC_GH_CLIENT_SECRET="234d7e0689b3f86506133b082896aa95c6fdf341"
+TOKEN_COOKIE_NAME='token'

app/entrypoints/renderer/src/app/(dashboard)/layout.tsx

@@ -1,13 +1,16 @@
+/* eslint-disable */
+
 import React          from 'react'
 import { Suspense }   from 'react'
 
 import { BaseLayout } from '@app/base-layout'
 import { Loading }    from '@app/loading'
 
 const Layout = ({ children }) => (
-  <BaseLayout>
-    <Suspense fallback={<Loading />}>{children}</Suspense>
-  </BaseLayout>
+  <Suspense fallback={<Loading />}>
+    {/* @ts-expect-error Async Server Component */}
+    <BaseLayout children={children} />
+  </Suspense>
 )
 
 export default Layout

app/entrypoints/renderer/src/app/api/github-auth-cookie/route.ts

@@ -0,0 +1,3 @@
+import { githubAuthCookieHandle as GET } from '@app/github-auth-cookie-api'
+
+export { GET }

app/entrypoints/renderer/src/app/layout.tsx

@@ -1,20 +1,10 @@
-'use client'
+import React          from 'react'
 
-import React             from 'react'
-import { IntlProvider }  from 'react-intl'
+import BaseRootLayout from '@app/root-layout'
 
-import { ThemeProvider } from '@ui/theme'
+import messages       from '../../locales/ru.json'
 
-import messages          from '../../locales/ru.json'
-
-const RootLayout = ({ children }) => (
-  <html>
-    <body>
-      <IntlProvider messages={messages} locale='ru' defaultLocale='ru'>
-        <ThemeProvider>{children}</ThemeProvider>
-      </IntlProvider>
-    </body>
-  </html>
-)
+// @ts-expect-error Async Server Component
+const RootLayout = ({ children }) => <BaseRootLayout messages={messages}>{children}</BaseRootLayout>
 
 export default RootLayout

app/entrypoints/renderer/src/app/logout/route.ts

@@ -0,0 +1,3 @@
+import { logoutHandle as GET } from '@app/logout-api'
+
+export { GET }

app/entrypoints/renderer/src/app/registration/page.ts

@@ -1 +1,2 @@
-export { default } from '@app/registration-page'
+import { RegistrationClient } from '@app/registration-page'
+export default RegistrationClient

app/entrypoints/renderer/src/middleware.ts

@@ -0,0 +1,17 @@
+// @ts-ignore:next-line
+import type { NextRequest } from 'next/server'
+
+// @ts-ignore:next-line
+import { NextResponse }     from 'next/server'
+
+export const middleware = (request: NextRequest) => {
+  const { TOKEN_COOKIE_NAME } = process.env
+  if (!request.cookies.has(TOKEN_COOKIE_NAME as string)) {
+    return NextResponse.redirect(new URL('/registration', request.url))
+  }
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/organizations', '/users'],
+}

app/fragments/app-add-member-to-organization-modal/src/add-member-to-organization-modal.component.tsx

@@ -50,7 +50,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
     <Modal open={open} width={theme.spaces.superPuperExtra} onBackdropClick={onBackdropClick}>
       <Column flexDirection='column' gap={theme.spaces.large}>
         <Text fontSize='medium.semiReduced' fontWeight='normal' padding={theme.spaces.micro}>
-          {formatMessage({ id: 'app-add-member-to-organization-modal.header' })}
+          {formatMessage({ id: 'add-member-to-organization-modal.header' })}
         </Text>
         <SelectInput
           placeholder={formatMessage({ id: 'add-member-to-organization-modal_input.placeholder' })}
@@ -65,7 +65,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
           rowGap={theme.spaces.large}
         >
           <Text fontSize='normal.semiIncreased' width='100%'>
-            {formatMessage({ id: 'app-add-member-to-organization-modal.teams' })}
+            {formatMessage({ id: 'add-member-to-organization-modal.teams' })}
           </Text>
           <TeamSwitch teamName='Design' onChange={(e) => handlerSwitch(e, 'design')} />
           <TeamSwitch teamName='Frontend' onChange={(e) => handlerSwitch(e, 'frontend')} />
@@ -80,7 +80,7 @@ export const AddMemberToOrganizationModal: FC<AddMemberToOrganizationModalProps>
             size='middlingRoundedPadding'
           >
             <Text fontSize='normal.semiDefault' fontWeight='normal' color={theme.colors.white}>
-              {formatMessage({ id: 'app-add-member-to-organization-modal.button' })}
+              {formatMessage({ id: 'add-member-to-organization-modal.button' })}
             </Text>
           </Button>
         </Row>

app/fragments/app-base-layout/package.json

@@ -11,18 +11,21 @@
   "dependencies": {
     "@app/theme-selector": "workspace:*",
     "@app/users-title": "workspace:*",
+    "@globals/data": "workspace:*",
     "@ui/layout": "workspace:*",
     "@ui/sidebar": "workspace:*"
   },
   "devDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
+    "@octokit/graphql": "8.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "*",
     "@emotion/styled": "*",
+    "@octokit/graphql": "*",
     "react": "*",
     "react-dom": "*"
   }

app/fragments/app-base-layout/src/base-layout.client.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import type { GetViewerQuery } from '@globals/data'
+
+import { useTheme }            from '@emotion/react'
+
+import React                   from 'react'
+import { FC }                  from 'react'
+import { PropsWithChildren }   from 'react'
+
+import { ThemeSelector }       from '@app/theme-selector'
+import { UsersTitle }          from '@app/users-title'
+import { Row }                 from '@ui/layout'
+import { Column }              from '@ui/layout'
+import { Sidebar }             from '@ui/sidebar'
+
+import { BaseLayoutProps }     from './base-layout.interfaces.js'
+
+export const BaseLayoutClient: FC<PropsWithChildren<BaseLayoutProps>> = ({
+  children,
+  ...baseLayoutData
+}) => {
+  const theme: any = useTheme()
+  const { name, avatarUrl, email, url } = baseLayoutData as GetViewerQuery['viewer']
+
+  return (
+    <Row backgroundColor={theme.colors.baseLayout.background}>
+      <Sidebar name={name} email={email} avatarUrl={avatarUrl} url={url} />
+      <Column alignItems='center' flex={1}>
+        <ThemeSelector />
+        <Column
+          maxWidth={theme.spaces.extraSuperLarge}
+          margin={theme.spaces.horizontalAutoMargin}
+          gap={theme.spaces.large}
+          justifyContent='flex-start'
+          alignItems='flex-start'
+        >
+          <UsersTitle />
+          {children}
+        </Column>
+      </Column>
+    </Row>
+  )
+}

app/fragments/app-base-layout/src/base-layout.component.tsx

@@ -1,41 +1,9 @@
-'use client'
+import React                from 'react'
 
-import { useTheme }          from '@emotion/react'
+import { BaseLayoutClient } from './base-layout.client.js'
+import { BaseLayoutServer } from './base-layout.server.js'
 
-import React                 from 'react'
-import { FC }                from 'react'
-import { PropsWithChildren } from 'react'
-
-import { ThemeSelector }     from '@app/theme-selector'
-import { UsersTitle }        from '@app/users-title'
-import { Row }               from '@ui/layout'
-import { Column }            from '@ui/layout'
-import { Sidebar }           from '@ui/sidebar'
-
-import { AVATAR }            from './base-layout.constants.js'
-import { EMAIL }             from './base-layout.constants.js'
-import { NAME }              from './base-layout.constants.js'
-import { BaseLayoutProps }   from './base-layout.interfaces.js'
-
-export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({ children }) => {
-  const theme: any = useTheme()
-  return (
-    <Row backgroundColor={theme.backgrounds.main}>
-      <Sidebar name={NAME} email={EMAIL} src={AVATAR} />
-      <Column alignItems='center' flex={1}>
-        <ThemeSelector />
-        <Column
-          maxWidth={theme.spaces.extraSuperLarge}
-          margin={theme.spaces.horizontalAutoMargin}
-          minHeight={theme.spaces.fullVh}
-          gap={theme.spaces.large}
-          justifyContent='flex-start'
-          alignItems='flex-start'
-        >
-          <UsersTitle />
-          {children}
-        </Column>
-      </Column>
-    </Row>
-  )
+export const BaseLayout = async ({ children }) => {
+  const baseLayoutData = await BaseLayoutServer()
+  return <BaseLayoutClient {...baseLayoutData}>{children}</BaseLayoutClient>
 }

app/fragments/app-base-layout/src/base-layout.interfaces.ts

@@ -1,5 +1,6 @@
 export interface BaseLayoutProps {
-  name?: string
+  name?: string | null | undefined
   email?: string
-  avatar?: string
+  avatarUrl?: string
+  url?: string
 }

app/fragments/app-base-layout/src/base-layout.server.ts

@@ -0,0 +1,26 @@
+import type { GetViewerQuery }  from '@globals/data'
+
+// @ts-ignore:next-line
+import { cookies }              from 'next/headers'
+// @ts-ignore:next-line
+import { redirect }             from 'next/navigation'
+
+import { GET_VIEWER }           from '@globals/data'
+import { octokitGraphqlClient } from '@globals/data'
+
+export const BaseLayoutServer = async () => {
+  const { TOKEN_COOKIE_NAME } = process.env
+  const token = cookies().get(TOKEN_COOKIE_NAME as string).value
+  try {
+    const client = octokitGraphqlClient(token)
+    const response = (await client(GET_VIEWER)) as GetViewerQuery
+
+    const { viewer } = response
+    return viewer
+  } catch (e: any) {
+    if (e.status === 401) {
+      redirect('/registration')
+    }
+    throw e
+  }
+}

app/fragments/app-registration/src/github-auth.hook.ts

@@ -0,0 +1,18 @@
+// @ts-ignore:next-line
+import { useRouter }      from 'next/navigation'
+
+import { GH_AUTH_URL }    from './registration.constants.js'
+import { GH_AUTH_SCOPES } from './registration.constants.js'
+
+export const githubAuthRedirectHook = (router: typeof useRouter) => {
+  const CURRENT_URL = new URL(window.location.href)
+
+  const GH_CLIENT_ID = process.env.NEXT_PUBLIC_GH_CLIENT_ID as string
+
+  GH_AUTH_URL.searchParams.set('client_id', GH_CLIENT_ID)
+  GH_AUTH_URL.searchParams.set('scope', GH_AUTH_SCOPES)
+
+  GH_AUTH_URL.searchParams.set('redirect_uri', `${CURRENT_URL.origin}/api/github-auth-cookie`)
+
+  router.replace(GH_AUTH_URL.href)
+}