feat(web): configure graphql client to send auth token

apps/core/package.json

@@ -22,6 +22,7 @@
  "apollo-server-core": "^3.6.7",
  "apollo-server-express": "^3.6.7",
  "axios": "^0.26.1",
+ "cors": "^2.8.5",
  "dotenv": "^16.0.0",
  "express": "^4.17.3",
  "graphql": "^16.3.0",
@@ -31,6 +32,7 @@
  "@graphql-codegen/cli": "^2.6.2",
  "@graphql-codegen/typescript": "^2.4.8",
  "@graphql-codegen/typescript-resolvers": "^2.6.1",
+ "@types/cors": "^2.8.12",
  "@types/express": "^4.17.13",
  "@types/jest": "^27.4.1",
  "@types/node": "^17.0.21",

apps/core/src/utils/constants.ts

@@ -1,5 +1,4 @@
 export const PATH_NOT_FOUND = 'Path not found';
-export const COOKIE_NAME = 'shguid';
 
 export const DATE_REGEX = /^([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))$/;
 

apps/web/package.json

@@ -17,6 +17,7 @@
  "graphql": "^16.3.0",
  "next": "12.1.5",
  "react": "17.0.2",
+ "react-cookie": "^4.1.1",
  "react-dom": "17.0.2"
  },
  "devDependencies": {

apps/web/src/hooks/authentication/use-auth.ts

@@ -0,0 +1,27 @@
+import { useCookies } from 'react-cookie';
+
+import { useAuthenticatedUser } from '@/services/users/authenticated-user';
+import { COOKIE_NAME } from '@/utils/constants';
+
+const useAuth = () => {
+ const [, setCookie, removeCookie] = useCookies([COOKIE_NAME]);
+
+ const { data, isLoading } = useAuthenticatedUser();
+
+ const saveToken = (token: string) => {
+ setCookie(COOKIE_NAME, token, { path: '/', secure: true });
+ };
+
+ const deleteToken = () => {
+ removeCookie(COOKIE_NAME, { path: '/' });
+ };
+
+ return {
+ deleteToken,
+ loading: isLoading,
+ saveToken,
+ user: data,
+ };
+};
+
+export { useAuth };

apps/web/src/hooks/authentication/use-set-authenticated-user.ts

@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+import { useAuth } from '@/hooks/authentication/use-auth';
+
+export const useSetAuthenticatedUser = () => {
+ const router = useRouter();
+ const { saveToken } = useAuth();
+
+ useEffect(() => {
+ const { token } = router.query;
+
+ if (token) {
+ saveToken(token as string);
+ }
+
+ void router.push('/board');
+ }, [router.query]);
+};

apps/web/src/pages/_app.tsx

@@ -1,10 +1,12 @@
 import { ApolloProvider } from '@apollo/client';
 import type { AppProps } from 'next/app';
 
-import apolloClient from '@/utils/apollo';
+import useApolloClient from '@/utils/apollo';
 import '@/styles/globals.css';
 
 const SharinganApp = ({ Component, pageProps }: AppProps) => {
+ const apolloClient = useApolloClient();
+
  return (
  <ApolloProvider client={apolloClient}>
  <Component {...pageProps} />

apps/web/src/pages/auth/success.tsx

@@ -2,8 +2,11 @@ import type { NextPage } from 'next';
 import Link from 'next/link';
 
 import PublicLayout from '@/components/layout/public/public-layout';
+import { useSetAuthenticatedUser } from '@/hooks/authentication/use-set-authenticated-user';
 
 const AuthSuccessPage: NextPage = () => {
+ useSetAuthenticatedUser();
+
  return (
  <PublicLayout>
  <h1>Auth Success !</h1>

apps/web/src/services/users/authenticated-user.ts

@@ -1,5 +1,5 @@
-import { useAuthenticatedUserQuery } from '@/graphql/users/queries/authenticated-user';
 import { AuthenticatedUserQuery } from '@/graphql/generated';
+import { useAuthenticatedUserQuery } from '@/graphql/users/queries/authenticated-user';
 import { AuthenticatedUser } from '@/typings/queries';
 
 const formatAuthenticatedUserResult = (data?: AuthenticatedUserQuery): AuthenticatedUser | undefined => {

apps/web/src/utils/apollo.ts

@@ -1,10 +1,20 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { useCookies } from 'react-cookie';
 
-const apolloClient = new ApolloClient({
- cache: new InMemoryCache(),
- connectToDevTools: true,
- credentials: 'include',
- uri: process.env.NEXT_PUBLIC_SERVER_URL,
-});
+import { COOKIE_NAME } from '@/utils/constants';
 
-export default apolloClient;
+const useApolloClient = () => {
+ const [cookies] = useCookies([COOKIE_NAME]);
+
+ return new ApolloClient({
+ cache: new InMemoryCache(),
+ connectToDevTools: true,
+ credentials: 'include',
+ headers: {
+ Authorization: cookies[COOKIE_NAME],
+ },
+ uri: process.env.NEXT_PUBLIC_SERVER_URL,
+ });
+};
+
+export default useApolloClient;

yarn.lock

@@ -1863,7 +1863,12 @@
  dependencies:
  "@types/node" "*"
 
-"@types/[email protected]":
+"@types/cookie@^0.3.3":
+ version "0.3.3"
+ resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+ integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
+"@types/[email protected]", "@types/cors@^2.8.12":
  version "2.8.12"
  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080"
  integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==
@@ -1894,6 +1899,14 @@
  dependencies:
  "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.0.1":
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+ integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+ dependencies:
+ "@types/react" "*"
+ hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -3285,7 +3298,7 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-[email protected], cookie@^0.4.1:
+[email protected], cookie@^0.4.0, cookie@^0.4.1:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
@@ -4719,7 +4732,7 @@ header-case@^2.0.4:
  capital-case "^1.0.4"
  tslib "^2.0.3"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7105,6 +7118,15 @@ rc@^1.2.8:
  minimist "^1.2.0"
  strip-json-comments "~2.0.1"
 
+react-cookie@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-4.1.1.tgz#832e134ad720e0de3e03deaceaab179c4061a19d"
+ integrity sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==
+ dependencies:
+ "@types/hoist-non-react-statics" "^3.0.1"
+ hoist-non-react-statics "^3.0.0"
+ universal-cookie "^4.0.0"
+
 [email protected]:
  version "17.0.2"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
@@ -8345,6 +8367,14 @@ unique-string@^2.0.0:
  dependencies:
  crypto-random-string "^2.0.0"
 
+universal-cookie@^4.0.0:
+ version "4.0.4"
+ resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
+ integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
+ dependencies:
+ "@types/cookie" "^0.3.3"
+ cookie "^0.4.0"
+
 universalify@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"