Added auth project

Author: InsideAmber

.github/workflows/auth.yml

@@ -0,0 +1,34 @@
+name: deploy-auth
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'packages/auth/**'
+
+defaults:
+  run:
+    working-directory: packages/auth
+
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v2
+            - run : npm install
+            - run : npm run build
+
+            - uses: shinyinc/action-aws-cli@v1.2
+            - run: aws s3 sync dist s3://${{secrets.AWS_S3_BUCKET_NAME}}/auth/latest
+              env:
+                AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+            - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/auth/latest/remteEntry.js"
+              env:
+                AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
+                AWS_DEFAULT_REGION: us-east-1
+          

packages/auth/config/webpack.common.js

@@ -0,0 +1,17 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/, // Match JavaScript files
+        exclude: /node_modules/, // Exclude node_modules directory with babel-loader
+        use: {
+          loader: "babel-loader", // Use Babel loader to transpile JavaScript files
+          options: {
+            presets: ["@babel/preset-react", "@babel/preset-env"], // Use presets for modern JavaScript and React
+            plugins: ["@babel/plugin-transform-runtime"], // Use plugin to optimize runtime code
+          },
+        },
+      },
+    ],
+  },
+};

packages/auth/config/webpack.dev.js

@@ -0,0 +1,33 @@
+const {merge} = require('webpack-merge');    //To merge the common and development configurations
+const htmlWebpackPlugin = require('html-webpack-plugin');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const commonConfig = require('./webpack.common'); // Import common configuration
+const packageJson = require('../package.json') // Import package.json to get shared dependencies
+
+const devConfig = {
+    mode: 'development', // Set the mode to development
+    output:{
+        publicPath: 'http://localhost:8082/' // Set public path for development
+    },
+    devServer:{
+        port:8082,
+        historyApiFallback: {
+            index: '/index.html' // Fallback to index.html for SPA routing
+        }
+    },
+    plugins:[
+        new ModuleFederationPlugin({
+            name: 'auth',
+            filename:'remoteEntry.js',
+            exposes:{
+                './AuthApp':'./src/bootstrap'
+            },
+            shared:packageJson.dependencies // Shared dependencies
+        }),
+        new htmlWebpackPlugin({
+            template: './public/index.html', // Template HTML file
+        })
+    ]
+}
+
+module.exports = merge(commonConfig, devConfig); // Merge common and development configurations

packages/auth/config/webpack.prod.js

@@ -0,0 +1,25 @@
+const {merge} = require('webpack-merge');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const commonConfig = require('./webpack.common.js');
+const packageJson = require('../package.json');
+
+const prodConfig = {
+    mode: 'production',
+    output: { 
+        filename: '[name].[contenthash].js', // Use contenthash for better caching
+        publicPath: '/auth/latest/'  // Set public path for production
+    },
+    plugins: [
+        new ModuleFederationPlugin({        
+            name: 'auth',
+            filename: 'remoteEntry.js',
+            exposes:{
+                './AuthApp':'./src/bootstrap'
+            },
+            shared:packageJson.dependencies, // Shared dependencies
+        }),
+    ]
+}
+
+
+module.exports = merge(commonConfig, prodConfig); // Merge common and production configurations

packages/auth/package.json

@@ -2,7 +2,8 @@
   "name": "auth",
   "version": "1.0.0",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+     "start": "webpack serve --config config/webpack.dev.js",
+     "build": "webpack --config config/webpack.prod.js"
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",

packages/auth/public/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head> </head>
+  <body>
+    <div id="_auth-dev-root"></div>
+  </body>
+</html>

packages/auth/src/App.js

@@ -0,0 +1,30 @@
+import React from "react";
+import {Switch,Route, Router} from "react-router-dom";
+import {StylesProvider, createGenerateClassName} from "@material-ui/core/styles";
+import SignIn from "./components/Signin";
+import SignUp from "./components/Signup";
+
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: "au",
+})
+
+export default ({history,onSignIn}) => {
+
+    return (
+        <div>
+            <StylesProvider generateClassName={generateClassName}>
+                <Router history={history}>
+                    <Switch>
+                        <Route path="/auth/signin">
+                        <SignIn onSignIn={onSignIn}/>
+                        </Route>
+                        <Route path="/auth/signup">
+                        <SignUp onSignIn={onSignIn}/>
+                        </Route>
+                    </Switch>
+                </Router>
+            </StylesProvider>
+        </div>
+    )
+}

packages/auth/src/bootstrap.js

@@ -0,0 +1,41 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import {createMemoryHistory, createBrowserHistory} from "history";
+import App from "./App";
+
+// Mount function to start up the app
+const mount = (el, {onSignIn, onNavigate,defaultHistory,initialPath }) => {
+  const history = defaultHistory || createMemoryHistory({
+    initialEntries: [initialPath]
+  });
+
+  if (onNavigate){
+  history.listen(onNavigate);
+  }
+
+  ReactDOM.render(<App onSignIn={onSignIn} history={history}/>, el);
+
+  return {
+    onParentNavigate({pathname: nextPathname}){
+      const { pathname } = history.location;
+      if(pathname !== nextPathname){
+       history.push(nextPathname);
+      } 
+    }
+  }
+};
+
+// If we are in devlopment and in isolation,
+// call the mount function immediately
+
+if (process.env.NODE_ENV === "development") {
+  const devRoot = document.querySelector("#_auth-dev-root");
+  if (devRoot) {
+    mount(devRoot,{defaultHistory: createBrowserHistory()} );
+  }
+}
+
+// We are running through the container
+// Then we should export the mount function
+
+export { mount };

packages/auth/src/components/Signin.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import { Link } from 'react-router-dom';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" to="/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  '@global': {
+    a: {
+      textDecoration: 'none',
+    },
+  },
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: '100%',
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+export default function SignIn({ onSignIn }) {
+  const classes = useStyles();
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <div className={classes.paper}>
+        <Avatar className={classes.avatar}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          Sign in
+        </Typography>
+        <form
+          onSubmit={(e) => e.preventDefault()}
+          className={classes.form}
+          noValidate
+        >
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="email"
+            label="Email Address"
+            name="email"
+            autoComplete="email"
+            autoFocus
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+          />
+          <FormControlLabel
+            control={<Checkbox value="remember" color="primary" />}
+            label="Remember me"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={onSignIn}
+          >
+            Sign In
+          </Button>
+          <Grid container>
+            <Grid item>
+              <Link to="/auth/signup">{"Don't have an account? Sign Up"}</Link>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+      <Box mt={8}>
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}