feat: 認証周りを大幅修正

.env.example

@@ -1,16 +1,13 @@
 PORT=3000
 
-SESSION_NAME="bo2kshelf.sid"
+WEBSITE_DOMAIN="http://localhost:${PORT}"
+API_DOMAIN="http://localhost:4000"
 
-# Auth Server
-AUTH_SERVER_ENDPOINT="http://localhost:8000"
+# GraphQL API Endpoint
+API_GRAPHQL_ENDPOINT="${API_DOMAIN}/graphql"
 
-# Imageproxy
-IMAGE_PROXY_HOST="localhost"
-
-# Public API
-PUBLIC_API_ENDPOINT="http://localhost:8080/graphql"
-PUBLIC_API_ACCESS_TOKEN=
+# Supertokens
+SUPERTOKENS_APP_NAME="bo2kshelf"
 
-# Authenticated API
-AUTHENTICATED_API_ENDPOINT="http://localhost:8081/graphql"
+# Imageproxy
+IMAGEPROXY_HOST="localhost"

.storybook/TemplateDecolator.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import {PageLayout} from '~/components/layout/PageLayout';
+import {PageLayout} from '~/layouts/PageLayout';
 
 export const TemplateDecolator: React.FC = ({children}) => (
   <>

codegen.yml

@@ -1,31 +1,24 @@
 generates:
-  ./src/graphql/api-public/schema.graphql:
-    schema: ${PUBLIC_API_ENDPOINT:./src/graphql/api-public/schema.graphql}
+  ./src/graphql/schema.graphql:
+    schema: ${API_GRAPHQL_ENDPOINT:./src/graphql/schema.graphql}
     plugins:
       - 'schema-ast'
     config:
       includeDirectives: true
 
-  ./src/graphql/api-public/codegen/graphql-request.ts:
-    schema: ${PUBLIC_API_ENDPOINT:./src/graphql/api-public/schema.graphql}
+  ./src/graphql/codegen/graphql-request.ts:
+    schema: ${API_GRAPHQL_ENDPOINT:./src/graphql/schema.graphql}
     documents:
-      - 'src/graphql/api-public/graphql-request/*.graphql'
+      - 'src/graphql/graphql-request/*.graphql'
     plugins:
       - 'typescript'
       - 'typescript-operations'
       - 'typescript-graphql-request'
 
-  ./src/graphql/api-authenticated/schema.graphql:
-    schema: ${AUTHENTICATED_API_ENDPOINT:./src/graphql/api-authenticated/schema.graphql}
-    plugins:
-      - 'schema-ast'
-    config:
-      includeDirectives: true
-
-  ./src/graphql/api-authenticated/codegen/apollo.ts:
-    schema: ${AUTHENTICATED_API_ENDPOINT:./src/graphql/api-authenticated/schema.graphql}
+  ./src/graphql/codegen/apollo.ts:
+    schema: ${API_GRAPHQL_ENDPOINT:./src/graphql/schema.graphql}
     documents:
-      - 'src/graphql/api-authenticated/apollo/*.graphql'
+      - 'src/graphql/apollo/*.graphql'
     plugins:
       - 'typescript'
       - 'typescript-operations'

next.config.js

@@ -4,13 +4,12 @@ module.exports = {
     ignoreBuildErrors: true,
   },
   env: {
-    SESSION_NAME: process.env.SESSION_NAME,
-    AUTH_SERVER_ENDPOINT: process.env.AUTH_SERVER_ENDPOINT,
-    GRAPHQL_API_ENDPOINT: process.env.GRAPHQL_API_ENDPOINT,
-    GRAPHQL_API_SERVER_ACCESS_TOKEN:
-      process.env.GRAPHQL_API_SERVER_ACCESS_TOKEN,
+    API_GRAPHQL_ENDPOINT: process.env.API_GRAPHQL_ENDPOINT,
+    SUPERTOKENS_APP_NAME: process.env.SUPERTOKENS_APP_NAME,
+    WEBSITE_DOMAIN: process.env.WEBSITE_DOMAIN,
+    API_DOMAIN: process.env.API_DOMAIN,
   },
   images: {
-    domains: [process.env.IMAGE_PROXY_HOST],
+    domains: [process.env.IMAGEPROXY_HOST],
   },
 };

package.json

@@ -7,7 +7,7 @@
     "dev": "run-p -n dev:*",
     "dev:codegen": "yarn codegen -ws",
     "dev:next": "next dev -p $PORT",
-    "start": "next start -p $PORT",
+    "start": "next start",
     "test": "jest",
     "test:watch": "jest --watch",
     "clean": "run-p -n clean:*",
@@ -36,17 +36,13 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "clsx": "1.1.1",
-    "cookie": "^0.4.1",
     "dayjs": "^1.10.4",
     "graphql": "15.4.0",
     "graphql-request": "3.4.0",
     "graphql-tag": "2.11.0",
     "i18next": "19.8.4",
     "i18next-browser-languagedetector": "6.0.1",
-    "isomorphic-unfetch": "3.1.0",
-    "jsonwebtoken": "^8.5.1",
     "next": "10.0.5",
-    "nookies": "^2.5.2",
     "ramda": "^0.27.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
@@ -55,8 +51,8 @@
     "react-is": "17.0.1",
     "react-use": "15.3.8",
     "recoil": "^0.1.2",
-    "request": "^2.88.2",
     "styled-components": "5.2.1",
+    "supertokens-auth-react": "^0.12.1",
     "tailwindcss": "2.0.2",
     "type-fest": "0.20.2"
   },
@@ -82,13 +78,10 @@
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/react": "^11.2.3",
-    "@types/cookie": "^0.4.0",
-    "@types/express": "^4.17.11",
     "@types/jest": "26.0.20",
     "@types/node": "14.14.22",
     "@types/ramda": "^0.27.35",
     "@types/react": "17.0.0",
-    "@types/request": "^2.48.5",
     "@types/styled-components": "5.1.7",
     "autoprefixer": "10.2.3",
     "babel-loader": "^8.2.2",

src/components/atoms/Link/Component.tsx

@@ -186,7 +186,7 @@ export const LinkSeriesBooksPage: React.FC<{
 
 export const LinkLoginPage: React.FC<{
   className?: string;
-}> = ({...props}) => <LinkBase href="/login" {...props} />;
+}> = ({...props}) => <LinkBase href="/auth" {...props} />;
 export const LinkLogoutPage: React.FC<{
   className?: string;
 }> = ({...props}) => <LinkBase href="/logout" {...props} />;

src/components/organisms/HeaderNav/Component.stories.tsx

@@ -28,7 +28,7 @@ export const UnloggedIn: Story<ComponentProps> = (args) => (
 );
 UnloggedIn.args = {
   userLoading: false,
-  userLoggedIn: false,
+  signedIn: false,
 };
 UnloggedIn.storyName = '未ログイン';
 
@@ -37,7 +37,7 @@ export const LoggedIn: Story<ComponentProps> = (args) => (
 );
 LoggedIn.args = {
   userLoading: false,
-  userLoggedIn: true,
+  signedIn: true,
   currentUser: {
     userName: 'INTERNET_EXPLORER',
     displayName: 'IAMTHEKIDYOUKNOWWHATIMEAN',

src/components/organisms/HeaderNav/Component.tsx

@@ -1,27 +1,12 @@
 import clsx from 'clsx';
 import React from 'react';
-import {Popup} from './atoms/Popup';
-import {LoginButton} from './molecules/LoginButton';
-import {PopupMenu} from './molecules/PopupMenu';
-import {PopupSummary} from './molecules/PopupSummary';
+import {Profile} from './molecules/Profile';
 
 export type ComponentProps = {
   className?: string;
-} & (
-  | {
-      userLoading: true;
-    }
-  | {
-      userLoading: false;
-      userLoggedIn: false;
-    }
-  | {
-      userLoading: false;
-      userLoggedIn: true;
-      currentUser: {userName: string; displayName: string; picture: string};
-    }
-);
-export const Component: React.FC<ComponentProps> = ({className, ...props}) => (
+  signedIn: boolean;
+};
+export const Component: React.FC<ComponentProps> = ({className, signedIn}) => (
   <nav
     className={clsx(
       className,
@@ -35,33 +20,7 @@ export const Component: React.FC<ComponentProps> = ({className, ...props}) => (
       className={clsx('container', 'mx-auto', 'px-12', 'flex', 'items-center')}
     >
       <div className={clsx('flex-grow')} />
-      <div className={clsx()}>
-        {props.userLoading && <span>Loading</span>}
-        {!props.userLoading && !props.userLoggedIn && <LoginButton />}
-        {!props.userLoading && props.userLoggedIn && (
-          <Popup
-            className={clsx('relative', 'select-none')}
-            Summary={({className}) => (
-              <PopupSummary
-                className={clsx(className, 'w-12', 'h-12')}
-                picture={props.currentUser.picture}
-              />
-            )}
-            Content={({className}) => (
-              <PopupMenu
-                currentUser={props.currentUser}
-                className={clsx(
-                  className,
-                  'w-80',
-                  'shadow-md',
-                  'mt-1',
-                  'right-0',
-                )}
-              />
-            )}
-          />
-        )}
-      </div>
+      <Profile className={clsx()} />
     </div>
   </nav>
 );

src/components/organisms/HeaderNav/Container.tsx

@@ -1,22 +1,10 @@
 import React from 'react';
-import {useCurrentUser} from '~/lib/useCurrentUser';
+import {useAuth} from '~/hooks/useAuth';
 import {Component} from './Component';
 
 export type ContainerProps = {className?: string};
 export const Container: React.FC<ContainerProps> = ({...props}) => {
-  const {currentUser, isLoading} = useCurrentUser();
-
-  if (isLoading) return <Component {...props} userLoading={isLoading} />;
-
-  return currentUser ? (
-    <Component
-      {...props}
-      userLoading={false}
-      userLoggedIn
-      currentUser={currentUser}
-    />
-  ) : (
-    <Component {...props} userLoading={false} userLoggedIn={false} />
-  );
+  const {signedIn} = useAuth();
+  return <Component {...props} signedIn={signedIn} />;
 };
 Container.displayName = 'HeaderNav';

src/components/organisms/HeaderNav/molecules/PopupMenu/Component.tsx

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import {
   MenuItemHaveBooks,
   MenuItemLikedBooks,
-  MenuItemLogout,
   MenuItemReadBooks,
   MenuItemReadingBooks,
   MenuItemReadRecords,
@@ -13,6 +12,7 @@ import {
   MenuItemWishBooks,
 } from '../PopupMenuItem';
 import {PopupMenuProfile} from '../PopupMenuProfile';
+import {LogoutButton} from '../SignOut';
 
 export type ComponentProps = {
   className?: string;
@@ -48,7 +48,7 @@ const UnstyledComponent: React.VFC<ComponentProps> = ({
       <MenuItemWishBooks className={clsx('col-span-1', 'col-start-2')} />
 
       <MenuItemSettings className={clsx('col-span-1', 'col-start-1')} />
-      <MenuItemLogout className={clsx('col-span-1', 'col-start-2')} />
+      <LogoutButton className={clsx('col-span-1', 'col-start-2')} />
     </div>
   </div>
 );

src/components/organisms/HeaderNav/molecules/Profile/Container.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import React from 'react';
+import {withComponentAuthenticated} from '~/hoc/withComponentAuthenticated';
+import {useAuth} from '~/hooks/useAuth';
+import {LoginButton} from '../LoginButton';
+import {UserPopup} from '../UserPopup';
+
+export type ContainerProps = {className?: string};
+export const UnwrappedContainer: React.VFC<ContainerProps> = ({className}) => {
+  const {signedIn} = useAuth();
+
+  return (
+    <div className={clsx(className)}>
+      {!signedIn && <LoginButton />}
+      {signedIn && <UserPopup className={clsx('relative', 'select-none')} />}
+    </div>
+  );
+};
+
+export const Container = withComponentAuthenticated(UnwrappedContainer);

src/components/organisms/HeaderNav/molecules/Profile/index.ts

@@ -0,0 +1,2 @@
+export {Container as Profile} from './Container';
+export type {ContainerProps as ProfileProps} from './Container';

src/components/organisms/HeaderNav/molecules/SignOut/Container.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {IconLogout} from '~/components/atoms/Icon';
+import {useSignOut} from '~/hooks/useSignOut';
+
+export type BaseComponentProps = {
+  className?: string;
+};
+export const BaseComponent: React.FC<BaseComponentProps> = ({className}) => {
+  const {t} = useTranslation();
+
+  const signOut = useSignOut();
+
+  const onClick = async () => {
+    signOut();
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={clsx(
+        className,
+        'group',
+        'bg-white',
+        'hover:bg-blue-500',
+        'bg-opacity-90',
+        'hover:bg-opacity-80',
+        'px-4',
+        'py-3',
+        'flex',
+        'items-center',
+      )}
+    >
+      <IconLogout
+        className={clsx(
+          'text-xs',
+          'mr-2',
+          'text-gray-400',
+          'group-hover:text-white',
+        )}
+      />
+      <span
+        className={clsx(
+          'text-sm',
+          'whitespace-nowrap',
+          'text-black',
+          'group-hover:text-white',
+        )}
+      >
+        {t('common:logout')}
+      </span>
+    </div>
+  );
+};

src/components/organisms/HeaderNav/molecules/SignOut/index.ts

@@ -0,0 +1,2 @@
+export {BaseComponent as LogoutButton} from './Container';
+export type {BaseComponentProps as LogoutButtonProps} from './Container';