feat: auth for dev (#29)

* feat: auth for dev

* fix EOL

* deploy test

* fix: favicon link

* restore test

* fix: use password hash

* remove unused condition

Author: maito1201

.env.tmpl

@@ -0,0 +1 @@
+NEXT_PUBLIC_AUTH_PASSWORD_HASH="password_hashed_via_sha256"

.github/workflows/ci.yml

@@ -16,15 +16,18 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
+      - name: create .env file
+        run: |
+          echo "${{ secrets.ENV }}" > .env
       - name: install deps
         run: yarn
       - name: lint
         run: yarn lint
       - name: build
         run: yarn build
-#      - name: Deploy
-#        uses: peaceiris/actions-gh-pages@v3
-#        if: github.ref == 'refs/heads/main'
-#        with:
-#          github_token: ${{ secrets.GITHUB_TOKEN }}
-#          publish_dir: ./out
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

README.md

@@ -13,23 +13,18 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+## storybook
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+```bash
+yarn storybook
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## deploy
 
-## Deploy on Vercel
+Auto-deploy runs when merged into main.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+if GitHub secrets `ENV` is set as below, password lock is enabled.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```
+NEXT_PUBLIC_AUTH_PASSWORD="password"
+```

next.config.js

@@ -2,6 +2,14 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  assetPrefix: '/2023/',
+  basePath: '/2023',
+  trailingSlash: true,
+  exportPathMap: async function () {
+    return {
+      "/": { page: "/" }
+    }
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -20,7 +20,8 @@
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "11.18.6"
+    "react-i18next": "11.18.6",
+    "use-local-storage-state": "18.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.19.3",

src/components/commons/Layout/index.tsx

@@ -1,21 +1,50 @@
 import type { NextPage } from 'next'
 import { ReactNode } from 'react'
 import Head from 'next/head'
+
 import { Header } from 'src/components/organisms'
 import { Footer } from 'src/components/organisms'
-import { Box } from '@mui/material'
+import { toSha256 } from 'src/modules/util/hash'
+
+import { Box, Input } from '@mui/material'
+import useLocalStorageState from 'use-local-storage-state'
 
 export interface LayoutProps {
   children: ReactNode
 }
 
 export const Layout: NextPage<LayoutProps> = ({ children }) => {
+  const config = require('../../../../next.config')
+  const [authorized, setAuthorized] = useLocalStorageState('authorized', { defaultValue: false })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (toSha256(e.target.value) === process.env.NEXT_PUBLIC_AUTH_PASSWORD_HASH) setAuthorized(true)
+  }
+
+  if (process.env.NEXT_PUBLIC_AUTH_PASSWORD_HASH && !authorized)
+    return (
+      <Box
+        sx={{
+          width: '100vw',
+          height: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+      >
+        <Box>
+          <Input onChange={handleChange} placeholder="enter password" />
+        </Box>
+      </Box>
+    )
+
   return (
     <>
       <Head>
         <title>Go Conference 2023</title>
+        <base href={config.basePath + '/'} />
         <meta name="description" content="Go Conference is a half-annual conference of programming language Go." />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="./favicon.ico" />
       </Head>
       <Box>
         <Header />

src/components/organisms/Footer/FooterBottom.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { useSize } from 'src/modules/common/hooks'
+import { useSize } from 'src/modules/hooks'
 
 interface FooterBottomProps {
   children: React.ReactNode

src/components/organisms/Footer/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@mui/material'
 import { Colors } from 'src/styles/color'
 import { useTranslation } from 'react-i18next'
-import { useSize } from 'src/modules/common/hooks'
+import { useSize } from 'src/modules/hooks'
 import { FooterBottom } from 'src/components/organisms/Footer/FooterBottom'
 import { IconTwitter, Link } from 'src/components/atoms'
 

src/components/organisms/Header/index.tsx

@@ -4,7 +4,7 @@ import { AppBar, Toolbar, Typography, Box } from '@mui/material'
 import { Colors } from 'src/styles/color'
 import { useTranslation } from 'react-i18next'
 import { Logo } from 'src/components/atoms'
-import { useScrollY } from 'src/modules/common/hooks'
+import { useScrollY } from 'src/modules/hooks'
 
 const handleChangeLanguage = () => {
   switch (i18n.language) {

src/components/organisms/MainVisual/index.tsx

@@ -1,11 +1,11 @@
 import { Box, Container, Typography } from '@mui/material'
 import { Colors } from 'src/styles/color'
-import { useSize } from 'src/modules/common/hooks'
+import { useSize } from 'src/modules/hooks'
 import Image from 'next/image'
 
 export const MainVisual = () => {
   const { isTabletOrOver } = useSize()
-  const image_path = isTabletOrOver ? '/Background-pc.png' : '/Background-sp.png'
+  const image_path = isTabletOrOver ? './Background-pc.png' : './Background-sp.png'
 
   return (
     <Box>

src/components/organisms/TopDescription/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Typography } from '@mui/material'
 import { Colors } from 'src/styles/color'
-import { useSize } from 'src/modules/common/hooks'
+import { useSize } from 'src/modules/hooks'
 import { useTranslation } from 'react-i18next'
 
 export const TopDescription = () => {

src/components/pages/PageTop/index.tsx

@@ -11,7 +11,6 @@ export const PageTop: NextPage = () => {
 
   return (
     <Layout>
-      implement later
       <MainVisual />
       <TopDescription />
       <Typography variant="h2">Wanted to Speakers!</Typography>

src/modules/common/hooks/index.ts renamed to src/modules/hooks/index.ts

@@ -0,0 +1,5 @@
+const { createHash } = require('crypto')
+
+export function toSha256(s: string) {
+  return createHash('sha256').update(s).digest('hex')
+}

src/modules/util/hash.ts

@@ -11438,6 +11438,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-local-storage-state@^18.1.1:
+  version "18.1.1"
+  resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-18.1.1.tgz#40e535aebed7770258e0a3a7b6923a86d9c0c52f"
+  integrity sha512-09bl6q3mkSlkEt8KeBPCmdPEWEojWYF70Qbz+7wkfQX1feaFITM9m84+h0Jr6Cnf/IvpahkFh7UbX2VNN3ioTQ==
+
 [email protected]:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"