wip: add auth0

2026-08-14 16:56:32 +00:00 · 2024-07-06 14:04:39 -05:00
parent d66a1fbacf
commit dbee584a3d
6 changed files with 203 additions and 4 deletions
@@ -39,7 +39,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/
@@ -0,0 +1,34 @@
+import React from "react";
+import { useAuth } from "../useAuth";
+import { LogoutOptions, RedirectLoginOptions } from "@auth0/auth0-react";
+
+const NavBar: React.FC = () => {
+  const { loginWithRedirect, logout, user, isAuthenticated } = useAuth();
+
+  const handleLogout = () => {
+    const logoutOptions: LogoutOptions = {};
+    logout(logoutOptions);
+  };
+
+  const handleLogin = () => {
+    const loginOptions: RedirectLoginOptions = {
+      authorizationParams: { redirect_uri: "http://localhost" },
+    };
+    loginWithRedirect(loginOptions);
+  };
+
+  return (
+    <nav>
+      {isAuthenticated ? (
+        <>
+          <p>Welcome, {user?.name}</p>
+          <button onClick={handleLogout}>Logout</button>
+        </>
+      ) : (
+        <button onClick={handleLogin}>Login</button>
+      )}
+    </nav>
+  );
+};
+
+export default NavBar;
@@ -0,0 +1,19 @@
+import { initAuth0 } from "@auth0/nextjs-auth0";
+
+const secret = process.env.AUTH0_SECRET;
+
+if (!secret) {
+  throw new Error("Secret not found");
+}
+
+export default initAuth0({
+  secret: process.env.AUTH0_SECRET as string,
+  baseURL: process.env.AUTH0_BASE_URL as string,
+  issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL as string,
+  clientID: process.env.AUTH0_CLIENT_ID as string,
+  clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
+  routes: {
+    callback: "/auth/callback",
+    postLogoutRedirect: "/",
+  },
+});
@@ -4,6 +4,12 @@ import "../styles/globals.css";
 import React from "react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import { Auth0Provider } from "@auth0/auth0-react";
+
+const domain = process.env.NEXT_PUBLIC_AUTH0_ISSUER_BASE_URL || "";
+const clientId = process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID || "";
+
+console.log(domain);

 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
@@ -11,7 +17,17 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
      <Head>
        <title>Webapp Template</title>
      </Head>
-      <Component {...pageProps} />
+      <Auth0Provider
+        domain={domain}
+        clientId={clientId}
+        authorizationParams={{
+          redirect_uri: "http://localhost",
+        }}
+        cacheLocation="localstorage"
+        useRefreshTokens={true}
+      >
+        <Component {...pageProps} />
+      </Auth0Provider>
    </>
  );
 };
@@ -1,9 +1,127 @@
-import React from "react";
+import React, { useState } from "react";
+import NavBar from "../components/NavBar";
+import {
+  Typography,
+  TextField,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Container,
+  IconButton,
+  Box,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+
+interface Element {
+  name: string;
+  xpath: string;
+  url: string;
+}
+
+interface ScrapeResult {
+  xpath: string;
+  text: string;
+  name: string;
+}
+
+type Result = {
+  [key: string]: ScrapeResult[];
+};

 const Home = () => {
+  const [url, setUrl] = useState("");
+  const [rows, setRows] = useState<Element[]>([]);
+  const [results, setResults] = useState<null | Result>(null);
+  const [newRow, setNewRow] = useState<Element>({
+    name: "",
+    xpath: "",
+    url: "",
+  });
+
+  const handleAddRow = () => {
+    newRow.url = url;
+    setRows([...rows, newRow]);
+    setNewRow({ name: "", xpath: "", url: "" });
+  };
+
+  const handleSubmit = () => {
+    fetch("/api/submit-scrape-job", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ url: url, elements: rows }),
+    })
+      .then((response) => response.json())
+      .then((data) => setResults(data));
+  };
+
  return (
    <>
-      <h1>Webapp</h1>
+      <NavBar />
+      <Container maxWidth="md">
+        <Typography variant="h1" gutterBottom>
+          Web Scraper
+        </Typography>
+        <div style={{ marginBottom: "20px" }}>
+          <TextField
+            label="URL"
+            variant="outlined"
+            fullWidth
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            style={{ marginBottom: "10px" }}
+          />
+          <Button variant="contained" color="primary" onClick={handleSubmit}>
+            Submit
+          </Button>
+        </div>
+        <Box display="flex" gap={2} marginBottom={2}>
+          <TextField
+            label="Name"
+            variant="outlined"
+            fullWidth
+            value={newRow.name}
+            onChange={(e) => setNewRow({ ...newRow, name: e.target.value })}
+          />
+          <TextField
+            label="XPath"
+            variant="outlined"
+            fullWidth
+            value={newRow.xpath}
+            onChange={(e) => setNewRow({ ...newRow, xpath: e.target.value })}
+          />
+          <Button
+            variant="contained"
+            color="secondary"
+            startIcon={<AddIcon />}
+            onClick={handleAddRow}
+          >
+            Add Row
+          </Button>
+        </Box>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>XPath</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row, index) => (
+              <TableRow key={index}>
+                <TableCell>
+                  <TextField variant="outlined" fullWidth value={row.name} />
+                </TableCell>
+                <TableCell>
+                  <TextField variant="outlined" fullWidth value={row.xpath} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Container>
    </>
  );
 };
@@ -0,0 +1,13 @@
+import { useAuth0 } from "@auth0/auth0-react";
+
+export const useAuth = () => {
+  const { loginWithRedirect, logout, user, isAuthenticated, isLoading } =
+    useAuth0();
+  return {
+    loginWithRedirect,
+    logout,
+    user,
+    isAuthenticated,
+    isLoading,
+  };
+};