이어서 할 곳

GitHub - fc-micro-frontends/career-up at step8

➜ pnpm i

➜ pnpm build

REACT_APP_AUTH0_DOMAIN=dev-vcrmf0xuep020tri.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=27LLb4I9cIjiiQNSjbNIX9sQM1KECUfk
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000

인증 처리

➜ pnpm --filter @career-up/posting add @auth0/auth0-spa-js

➜ pnpm --filter @career-up/posting add @types/node -D

{
  "name": "@career-up/monorepo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "turbo start:live",
    "build": "turbo build",
    "serve": "turbo build:start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "[email protected]+sha1.77d568bacf41eeefd6695a7087c1282433955b5c",
  "devDependencies": {
****    "turbo": "^1.11.1",
    **"typescript": "5.2.2"**
  }
}

{
  "name": "@career-up/shell",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3000 npx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },
  "license": "MIT",
  "author": {
    "name": "Jack Herrington",
    "email": "[email protected]"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.10.4",
    "@types/node": "^20.10.5",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "dotenv-webpack": "^8.0.1",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    **"typescript": "5.2.2",**
    "webpack": "^5.57.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@auth0/auth0-react": "^2.2.4",
    "@babel/runtime": "^7.23.6",
    "@career-up/shell-router": "workspace:*",
    "@career-up/ui-kit": "workspace:*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1"
  }
}

{
  "name": "@career-up/posting",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3001 npx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },
  "license": "MIT",
  "author": {
    "name": "Jack Herrington",
    "email": "[email protected]"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.10.4",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    **"typescript": "5.2.2",**
    "webpack": "^5.57.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^2.1.3",
    "@career-up/shell-router": "workspace:*",
    "@career-up/ui-kit": "workspace:*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1"
  }
}

➜ pnpm i

// career-up/career-up.code-workspace

{
  "folders": [
    {
      "name": "shell",
      "path": "apps/shell"
    },
    {
      "name": "posting",
      "path": "apps/posting"
    },
    {
      "name": "shell-router",
      "path": "packages/shell-router"
    },
    {
      "name": "ui-kit",
      "path": "packages/ui-kit"
    },
    {
      "name": "server",
      "path": "server"
    },
    {
      "name": "monorepo",
      "path": "."
    }
  ],
  "settings": {
    "typescript.tsdk": "monorepo/node_modules/typescript/lib"
  }
}

REACT_APP_AUTH0_DOMAIN=dev-vcrmf0xuep020tri.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=27LLb4I9cIjiiQNSjbNIX9sQM1KECUfk
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000

// career-up/apps/posting/src/providers/auth0-client-provider.tsx

import React from "react";
import { Auth0Client } from "@auth0/auth0-spa-js";

export const Auth0ClientContext = React.createContext<Auth0Client | null>(null);

const Auth0ClientProvider: React.FC<React.PropsWithChildren> = ({
  children,
}) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN!;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID!;
  const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL!;

  const auth0Client = new Auth0Client({
    domain,
    clientId,
    authorizationParams: {
      redirect_uri: redirectUri,
    },
  });

  return (
    <Auth0ClientContext.Provider value={auth0Client}>
      {children}
    </Auth0ClientContext.Provider>
  );
};

export default Auth0ClientProvider;

// career-up/apps/posting/src/hooks/use-auth0-client.tsx

import { useContext } from "react";
import { Auth0ClientContext } from "../providers/auth0-client-provider";
import { type Auth0Client } from "@auth0/auth0-spa-js";

export default function useAuth0Client(): Auth0Client {
  const auth0Client = useContext(Auth0ClientContext);

  if (auth0Client === null) {
    throw new Error(
      "useAuth0Client must be used within an Auth0ClientProvider"
    );
  }

  return auth0Client;
}

➜ pnpm --filter @career-up/posting add dotenv-webpack -D

// career-up/apps/posting/webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const Dotenv = require("dotenv-webpack");

const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
  output: {
    publicPath: "<http://localhost:3001/>",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3001,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new Dotenv(),
    new ModuleFederationPlugin({
      name: "posting",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./injector": "./src/injector.tsx",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        "@career-up/shell-router": {
          singleton: true,
        },
        "@career-up/ui-kit": {
          singleton: true,
        },
        "@auth0/auth0-react": {
          singleton: true,
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
});

// career-up/apps/posting/src/routes.tsx

import React from "react";
import { type RouteObject } from "react-router-dom";
import { AppRoutingManager } from "@career-up/shell-router";
import Auth0ClientProvider from "./providers/auth0-client-provider";
import PageHome from "./pages/page-home";

export const routes: RouteObject[] = [
  {
    path: "/",
    element: (
      <Auth0ClientProvider>
        <AppRoutingManager type="app-posting" />
      </Auth0ClientProvider>
    ),
    errorElement: <div>App Posting Error</div>,
    children: [
      {
        index: true,
        element: <PageHome />,
      },
    ],
  },
];

// career-up/apps/posting/src/pages/page-home.tsx

import React, { useEffect } from "react";
import useAuth0Client from "../hooks/use-auth0-client";

const PageHome: React.FC = () => {
  const auth0Client = useAuth0Client();

  useEffect(() => {
    (async () => {
      try {
        const token = await auth0Client.getTokenSilently();

        console.log(token);
      } catch (error) {
        alert(error);
      }
    })();
  }, [auth0Client]);

  return <div>page-home</div>;
};

export default PageHome;

➜ pnpm dev

➜ pnpm --filter @career-up/posting add @babel/runtime

➜ pnpm dev

➜ curl --location '<http://localhost:4000/user>' \\
--header 'Authorization: Bearer 토큰'