tWIL 2022.07 2주차

import express, { Response } from "express";
import { graphqlUploadExpress } from "graphql-upload";

const app = express();
app.use(graphqlUploadExpress());
// omitted

export { app };

import { ApolloServer } from "apollo-server-express";
import { app } from "./app";

const server = new ApolloServer({
  schema,
  context,
  introspection: process.env.NODE_ENV !== "production",
  // omitted
  csrfPrevention: true,
  cache: "bounded",
});
// omitted

export async function runServer() {
  await server.start();
  server.applyMiddleware({ app, path: "/" });
  await new Promise<void>((resolve) => app.listen(Number(port), resolve));
  logger.info(`🚀 GraphQL service ready at http://localhost:${port}${server.graphqlPath}`);
}

const httpLink = createUploadLink({
  uri,
  headers: { "apollo-require-preflight": true },
});

import { setContext } from "@apollo/client/link/context";
import { Auth } from "aws-amplify";

const asyncAuthLink = setContext(
  () =>
    new Promise((resolve, reject) => {
      Auth.currentSession()
        .then((token) => {
          const accessToken = token.getAccessToken();
          resolve({
            headers: { authorization: `${accessToken.getJwtToken()}` },
          });
        })
        .catch(reject);
    })
);

let amplifyAuthLink: AuthLink | null = null;
/**
 * It listens for events from the Amplify Auth library and updates the `amplifyAuthLink` variable
 * accordingly. Add Hub auth listeners, to detect sign-in/out.
 * @param {string} region - The AWS region you're using.
 * @param {string} url - The URL of the GraphQL API.
 * @returns A function that takes an object with a payload property and returns nothing.
 */
export const addListeners = (region: string, url: string) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleAuthEvents = ({ payload }: { payload: any }) => {
    switch (payload.event) {
      case "signIn":
        amplifyAuthLink = createCognitoAuthLink(payload.data.signInUserSession, region, url);
        break;
      case "signOut":
        amplifyAuthLink = createIamAuthLink(region, url);
        break;
      case "configured":
      case "signIn_failure":
      case "signUp":
      default:
        break;
    }
  };
  Hub.listen("auth", handleAuthEvents);
  return handleAuthEvents;
};

/**
 * It removes a listener from the Hub
 * @param {HubCallback} handler - The function that will be called when the event is emitted.
 */
export const removeListeners = (handler: HubCallback) => Hub.remove("auth", handler);

/**
 * It creates an Apollo Client that uses the IAM Auth Link to authenticate with AWS AppSync, and then
 * uses the Upload Link to send GraphQL requests to AWS AppSync
 * @param {string} region - The AWS region where your AppSync API is deployed.
 * @param {string} uri - The endpoint of the GraphQL API.
 * @returns A new ApolloClient instance.
 */
const createApolloClient = (region: string, uri: string) => {
  const httpLink = createUploadLink({
    uri,
    headers: { "apollo-require-preflight": true },
  });
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: from([
      // createIamAuthLink(region, uri), // IAM Auth token setup
      asyncAuthLink, // jwt setup
      httpLink,
    ]),
  });
};

/**
 * It creates an Apollo Client, and then adds and removes listeners to update the client when the
 * region or uri changes
 * @param {string} region - The region you want to connect to.
 * @param {string} uri - The URI of the GraphQL endpoint.
 * @returns A function that returns an ApolloClient.
 */
export const useApolloClient = (region: string, uri: string) => {
  const [client] = React.useState(() => createApolloClient(region, uri));
  React.useEffect(() => {
    const handler = addListeners(region, uri);
    return () => removeListeners(handler);
  });
  return client;
};

import { ApolloLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { Auth, Hub } from "aws-amplify";
import type { HubCallback } from "@aws-amplify/core";
import { CognitoUserSession } from "amazon-cognito-identity-js";
import { AUTH_TYPE, createAuthLink as awsCreateAuthLink, AuthLink } from "aws-appsync-auth-link";

/**
 * It creates an ApolloLink that uses IAM/Cognito based on sign-in state.
 * Uses a cached AuthLink created by aws-appsync-auth-link under the covers.
 * @param {string} region - The region of the user's identity pool.
 * @param {string} url - The URL of the GraphQL API.
 * @returns A new ApolloLink that is a concatenation of the cachedAmplifyAuthLink and a new ApolloLink
 * that is a request handler.
 */
export const createAuthLink = (region: string, url: string) => {
  return cachedAmplifyAuthLink(region, url).concat(
    new ApolloLink((operation, forward) =>
      operation.getContext().amplifyAuthLink.request(operation, forward)
    )
  );
};

/**
 * Create an AWS AuthLink that uses Cognito, suitable for signed-in users.
 * It takes a CognitoUserSession, a region, and a url, and returns an AuthLink
 * @param {CognitoUserSession} session - The CognitoUserSession object returned from the
 * CognitoUser.getSession() method.
 * @param {string} region - The AWS region where your AppSync API is deployed.
 * @param {string} url - The URL of your GraphQL API.
 */
const createCognitoAuthLink = (session: CognitoUserSession, region: string, url: string) =>
  awsCreateAuthLink({
    auth: {
      jwtToken: session.getIdToken().getJwtToken(),
      type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    },
    region,
    url,
  });

/* Creating an AuthLink that uses IAM, suitable for non signed-in users. */
export const createIamAuthLink = (region: string, url: string) =>
  awsCreateAuthLink({
    auth: {
      credentials: () => Auth.currentCredentials(),
      type: AUTH_TYPE.AWS_IAM,
    },
    region,
    url,
  });

/**
 * An ApolloLink that uses context to cache the amplifyAuthLink instance.
 * @param {string} region - The AWS region you're using.
 * @param {string} url - The URL of the GraphQL API.
 */
const cachedAmplifyAuthLink = (region: string, url: string) =>
  setContext(() => {
    if (amplifyAuthLink) {
      return { amplifyAuthLink };
    }
    return Auth.currentSession()
      .then((session) => {
        amplifyAuthLink = createCognitoAuthLink(session, region, url);
        return { amplifyAuthLink };
      })
      .catch((error) => {
        amplifyAuthLink = createIamAuthLink(region, url);
        return { amplifyAuthLink };
      });
  });

amplify add function

import { API } from "aws-amplify";
import { createAsyncThunk } from "@reduxjs/toolkit";

export const unauthCheck = createAsyncThunk("auth/unauthCheck", async () => {
  interface Response {
    unauthCheck: boolean;
  }
  const result = (await API.post("unauth", `/unauth`, {
    headers: {
      "Content-Type": "application/json",
    },
    body: {},
  })) as Response;
  return result;
});

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import awsExports from "aws-exports";

const {
  aws_cloud_logic_custom: [{ endpoint }],
} = awsExports;

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: endpoint,
    prepareHeaders(headers) {
      headers.set("Content-Type", "application/json");
      return headers;
    },
  }),
  endpoints: (builder) => ({
    unauth: builder.mutation({
      query: () => ({
        url: `/unauth`,
        method: "POST",
      }),
    }),
  }),
});

export const { useUnauthMutation } = apiSlice;