authhero 0.0.1 → 1.0.0

package/apps/react-admin/src/auth0DataProvider.ts

@@ -0,0 +1,220 @@
+import querystring from "query-string";
+import { fetchUtils, DataProvider } from "ra-core";
+import { UpdateParams } from "react-admin";
+
+function removeExtraFields(params: UpdateParams) {
+  // delete params.data?.id; // this is required for patch... but not for put?
+  delete params.data?.tenant_id;
+  delete params.data?.updated_at;
+  delete params.data?.created_at;
+  delete params.data?.identities;
+
+  // hmmmmm, this is an issue we have here with mismatching structure?
+  // seems like we need to modify our endpoints to accept connections.
+  // TBD with Markus
+  delete params.data?.connections;
+
+  // actually Auth0 does not require this for patching. seems dangerous not to rely on an auto-id
+  // as may get rejected for having the same id
+  delete params.data?.id;
+  // for user we don't want to include this
+  delete params.data?.user_id;
+
+  // extra user fields
+  delete params.data?.last_login;
+  delete params.data?.provider;
+
+  // Remove empty properties
+  Object.keys(params.data).forEach((key) => {
+    if (params.data[key] === undefined) {
+      delete params.data[key];
+    }
+  });
+
+  return params;
+}
+
+function getIdKeyFromResource(resource: string) {
+  switch (resource) {
+    case "connections":
+      return "connnection_id";
+    case "domains":
+      return "domain_id";
+    case "users":
+      return "user_id";
+    case "logs":
+      return "log_id";
+    case "tenants":
+      return "tenant_id";
+    case "applications":
+      return "application_id";
+    default:
+      throw new Error(`unknown resource ${resource}`);
+  }
+}
+
+/**
+ * Maps react-admin queries to the auth0 mamagement api
+ */
+export default (
+  apiUrl: string,
+  httpClient = fetchUtils.fetchJson,
+  tenantId?: string,
+): DataProvider => ({
+  getList: async (resource, params) => {
+    const { page, perPage } = params.pagination || { page: 1, perPage: 10 };
+    const { field, order } = params.sort || { field: "id", order: "ASC" };
+
+    const query = {
+      include_totals: true,
+      page: page - 1,
+      per_page: perPage,
+      sort: `${field}:${order === "DESC" ? "-1" : "1"}`,
+      q: params.filter.q,
+    };
+    const url = `${apiUrl}/api/v2/${resource}?${querystring.stringify(query)}`;
+
+    const headers = new Headers();
+
+    if (tenantId) {
+      headers.set("tenant-id", tenantId);
+    }
+
+    const res = await httpClient(url, { headers });
+
+    return {
+      data: res.json[resource].map((item: any) => ({
+        id: item[getIdKeyFromResource(resource)],
+        ...item,
+      })),
+      total: res.json.length,
+    };
+  },
+
+  getOne: (resource, params) => {
+    const headers = new Headers();
+
+    if (tenantId) {
+      headers.set("tenant-id", tenantId);
+    }
+
+    return httpClient(`${apiUrl}/api/v2/${resource}/${params.id}`, {
+      headers,
+    }).then(({ json }) => ({
+      data: {
+        id: json[getIdKeyFromResource(resource)],
+        ...json,
+      },
+    }));
+  },
+
+  getMany: (resource, params) => {
+    const query = `id:(${params.ids.join(" ")})})`;
+
+    const url = `${apiUrl}/api/v2/${resource}?q=${query}`;
+    return httpClient(url).then(({ json }) => ({
+      data: {
+        id: json[getIdKeyFromResource(resource)],
+        ...json,
+      },
+    }));
+  },
+
+  getManyReference: async (resource, params) => {
+    const { page, perPage } = params.pagination;
+    const { field, order } = params.sort;
+
+    if (resource !== "logs") {
+      return Promise.reject(
+        "not supporting getManyReference for anything but resource logs",
+      );
+    }
+
+    const query = {
+      include_totals: true,
+      page: page - 1,
+      per_page: perPage,
+      sort: `${field}:${order === "DESC" ? "-1" : "1"}`,
+      q: `user_id:${params.id}`,
+    };
+
+    const headers = new Headers();
+
+    if (tenantId) {
+      headers.set("tenant-id", tenantId);
+    }
+
+    const url = `${apiUrl}/api/v2/${resource}?${querystring.stringify(query)}`;
+
+    const res = await httpClient(url, { headers });
+
+    return {
+      data: res.json.logs.map((item: any) => ({
+        id: item[getIdKeyFromResource(resource)],
+        ...item,
+      })),
+      total: res.json.length,
+    };
+  },
+
+  update: (resource, params) => {
+    const headers = new Headers();
+
+    if (tenantId) {
+      headers.set("tenant-id", tenantId);
+    }
+
+    const cleanParams = removeExtraFields(params);
+
+    return httpClient(`${apiUrl}/api/v2/${resource}/${params.id}`, {
+      headers,
+      method: "PATCH",
+      body: JSON.stringify(cleanParams.data),
+    }).then(({ json }) => ({ data: json }));
+  },
+
+  updateMany: () => Promise.reject("not supporting updateMany"),
+
+  create: async (resource, params) => {
+    const headers = new Headers();
+
+    if (tenantId) {
+      headers.set("tenant-id", tenantId);
+    }
+
+    const res = await httpClient(`${apiUrl}/api/v2/${resource}`, {
+      method: "POST",
+      body: JSON.stringify(params.data),
+      headers,
+    });
+
+    const data = {
+      ...res.json,
+      id: res.json.id,
+    };
+
+    return {
+      data,
+    };
+  },
+
+  delete: async (resource, params) => {
+    const headers = new Headers({
+      "Content-Type": "text/plain",
+    });
+
+    if (tenantId) {
+      headers.set("tenant-id", tenantId);
+    }
+
+    const res = await httpClient(`${apiUrl}/api/v2/${resource}/${params.id}`, {
+      method: "DELETE",
+      headers,
+    });
+
+    return {
+      data: res.json,
+    };
+  },
+  deleteMany: () => Promise.reject("not supporting updateMany"),
+});

package/apps/react-admin/src/authProvider.ts

@@ -0,0 +1,42 @@
+import { Auth0AuthProvider, httpClient } from "ra-auth-auth0";
+import { Auth0Client } from "@auth0/auth0-spa-js";
+
+const getUrlByEnvironment = () => {
+  // eslint-disable-next-line no-undef
+  const VITE_VERCEL_URL = process.env.VITE_VERCEL_URL;
+
+  if (VITE_VERCEL_URL) {
+    return `https://${VITE_VERCEL_URL}`;
+  }
+
+  // rename this? and nuke VITE_LOGIN_REDIRECT_URL env var
+  return import.meta.env.VITE_LOGOUT_REDIRECT_URL;
+};
+
+export const baseRedirectUri = getUrlByEnvironment();
+
+const auth0 = new Auth0Client({
+  domain: import.meta.env.VITE_AUTH0_DOMAIN,
+  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+  cacheLocation: "localstorage",
+  authorizationParams: {
+    audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+  },
+});
+
+const authProvider = Auth0AuthProvider(auth0, {
+  loginRedirectUri: `${getUrlByEnvironment()}/auth-callback`,
+  logoutRedirectUri: getUrlByEnvironment(),
+});
+
+const authorizedHttpClient = httpClient(auth0);
+
+// Temp debug code
+// function logAccessToken() {
+//   auth0.getTokenSilently().then((token) => {
+//     console.log("Access Token: ", token);
+//   });
+// }
+// logAccessToken();
+
+export { authProvider, authorizedHttpClient };

package/apps/react-admin/src/components/TenantAppBar.tsx

@@ -0,0 +1,46 @@
+import { AppBar, TitlePortal } from "react-admin";
+import { useEffect, useState } from "react";
+import { Link } from "@mui/material";
+import { authorizedHttpClient } from "../authProvider";
+
+type TenantResponse = {
+  audience: string;
+  created_at: string;
+  id: string;
+  language: string;
+  logo: string;
+  updated_at: string;
+  name: string;
+  primary_color: string;
+  secondary_color: string;
+  sender_email: string;
+  sender_name: string;
+};
+
+export function TenantAppBar() {
+  const pathSegments = location.pathname.split("/").filter(Boolean);
+  const tenantId = pathSegments[0];
+  const [tenant, setTenant] = useState<TenantResponse>();
+
+  useEffect(() => {
+    authorizedHttpClient(
+      `${import.meta.env.VITE_SIMPLE_REST_URL}/api/v2/tenants/${tenantId}`,
+      {},
+    ).then((response) => {
+      const res: TenantResponse = JSON.parse(response.body);
+      setTenant(res);
+    });
+  }, [tenantId]);
+
+  const isDefaultSettings = tenantId === "DEFAULT_SETTINGS";
+
+  return (
+    <AppBar sx={{ ...(isDefaultSettings && { backgroundColor: "red" }) }}>
+      <TitlePortal />
+      <p>{tenant?.name}&nbsp;-&nbsp;</p>
+      <Link color="inherit" href="/tenants" underline="none">
+        Tenants
+      </Link>
+    </AppBar>
+  );
+}

package/apps/react-admin/src/components/TenantLayout.tsx

@@ -0,0 +1,17 @@
+import { Layout } from "react-admin";
+
+import { TenantAppBar } from "./TenantAppBar";
+
+export function tenantLayout(props: any) {
+  const tenantId = location.pathname.split("/").filter(Boolean)[0];
+
+  const isDefaultSettings = tenantId === "DEFAULT_SETTINGS";
+
+  return (
+    <Layout
+      {...props}
+      appBar={TenantAppBar}
+      sx={{ ...(isDefaultSettings && { backgroundColor: "red" }) }}
+    />
+  );
+}

package/apps/react-admin/src/components/applications/create.tsx

@@ -0,0 +1,29 @@
+import {
+  Create,
+  SimpleForm,
+  TextInput,
+  required,
+  SelectInput,
+} from "react-admin";
+
+export function ApplicationCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <TextInput source="allowed_callback_urls" fullWidth multiline={true} />
+        <TextInput source="allowed_logout_urls" fullWidth multiline={true} />
+        <TextInput source="allowed_web_origins" fullWidth multiline={true} />
+        <TextInput source="id" validate={[required()]} />
+        <SelectInput
+          source="email_validation"
+          choices={[
+            { id: "disabled", name: "Disabled" },
+            { id: "enabled", name: "Enabled" },
+            { id: "enforced", name: "Enforced" },
+          ]}
+        />
+      </SimpleForm>
+    </Create>
+  );
+}

package/apps/react-admin/src/components/applications/edit.tsx

@@ -0,0 +1,40 @@
+import {
+  DateField,
+  Edit,
+  FieldTitle,
+  Labeled,
+  SelectInput,
+  SimpleForm,
+  TextInput,
+  BooleanInput,
+} from "react-admin";
+
+export function ApplicationEdit() {
+  return (
+    <Edit>
+      <SimpleForm>
+        <TextInput source="id" />
+        <TextInput source="name" />
+        <TextInput source="client_secret" />
+        <SelectInput
+          source="email_validation"
+          choices={[
+            { id: "disabled", name: "Disabled" },
+            { id: "enabled", name: "Enabled" },
+            { id: "enforced", name: "Enforced" },
+          ]}
+        />
+        <BooleanInput source="disable_sign_ups" />
+        <TextInput source="allowed_callback_urls" fullWidth multiline={true} />
+        <TextInput source="allowed_logout_urls" fullWidth multiline={true} />
+        <TextInput source="allowed_web_origins" fullWidth multiline={true} />
+        <Labeled label={<FieldTitle source="created_at" />}>
+          <DateField source="created_at" showTime={true} />
+        </Labeled>
+        <Labeled label={<FieldTitle source="updated_at" />}>
+          <DateField source="updated_at" showTime={true} />
+        </Labeled>
+      </SimpleForm>
+    </Edit>
+  );
+}

package/apps/react-admin/src/components/applications/index.ts

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./list";
+export * from "./edit";

package/apps/react-admin/src/components/applications/list.tsx

@@ -0,0 +1,37 @@
+import {
+  List,
+  Datagrid,
+  TextField,
+  DateField,
+  FunctionField,
+} from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export function ApplicationsList() {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" />
+        <TextField source="name" />
+        <FunctionField
+          label="Login"
+          render={(record: any) => (
+            <a
+              href={`${
+                import.meta.env.VITE_SIMPLE_REST_URL
+              }/authorize?client_id=${record.id}&redirect_uri=${
+                import.meta.env.VITE_SIMPLE_REST_URL
+              }/u/info&scope=profile%20email%20openid&state=1234&response_type=code`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Login
+            </a>
+          )}
+        />
+        <DateField source="created_at" showTime={true} />
+        <DateField source="updated_at" showTime={true} />
+      </Datagrid>
+    </List>
+  );
+}

package/apps/react-admin/src/components/common/DateAgo.tsx

@@ -0,0 +1,6 @@
+import { formatDistance } from "date-fns";
+
+export function DateAgo({ date }: { date?: string }) {
+  if (!date) return "N/A";
+  return `${formatDistance(new Date(date), new Date())} ago`;
+}

package/apps/react-admin/src/components/common/JsonOutput.tsx

@@ -0,0 +1,3 @@
+export function JsonOutput({ data }: { data: any }) {
+  return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}

package/apps/react-admin/src/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./DateAgo";

package/apps/react-admin/src/components/connections/create.tsx

@@ -0,0 +1,11 @@
+import { Create, SimpleForm, TextInput, required } from "react-admin";
+
+export function ConnectionCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+      </SimpleForm>
+    </Create>
+  );
+}

package/apps/react-admin/src/components/connections/edit.tsx

@@ -0,0 +1,66 @@
+import {
+  DateField,
+  Edit,
+  FieldTitle,
+  Labeled,
+  SelectInput,
+  SimpleForm,
+  TextInput,
+} from "react-admin";
+
+export function ConnectionEdit() {
+  return (
+    <Edit>
+      <SimpleForm>
+        <TextInput source="id" />
+        <TextInput source="name" />
+        <TextInput
+          source="client_id"
+          label="Client ID"
+          style={{ width: "800px" }}
+        />
+        <TextInput
+          source="client_secret"
+          label="Client Secret"
+          style={{ width: "800px" }}
+        />
+        <SelectInput
+          source="response_type"
+          label="Response Type"
+          choices={[
+            { id: "code", name: "Code" },
+            { id: "code id_token", name: "Code ID-token" },
+          ]}
+        />
+        <SelectInput
+          source="response_mode"
+          label="Response Mode"
+          choices={[
+            { id: "query", name: "Query" },
+            { id: "fragment", name: "Fragment" },
+            { id: "web_message", name: "Web Message" },
+            { id: "form_post", name: "Form Post" },
+          ]}
+        />
+        <TextInput source="scope" fullWidth />
+        <TextInput
+          source="private_key"
+          label="Private Key"
+          style={{ width: "800px" }}
+          multiline={true}
+        />
+        <TextInput source="kid" label="Key ID" />
+        <TextInput source="team_id" label="Team ID" />
+        <TextInput source="token_endpoint" fullWidth />
+        <TextInput source="authorization_endpoint" fullWidth />
+        <TextInput source="userinfo_endpoint" fullWidth />
+        <Labeled label={<FieldTitle source="created_at" />}>
+          <DateField source="created_at" showTime={true} />
+        </Labeled>
+        <Labeled label={<FieldTitle source="updated_at" />}>
+          <DateField source="updated_at" showTime={true} />
+        </Labeled>
+      </SimpleForm>
+    </Edit>
+  );
+}

package/apps/react-admin/src/components/connections/index.ts

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./list";
+export * from "./edit";

package/apps/react-admin/src/components/connections/list.tsx

@@ -0,0 +1,15 @@
+import { List, Datagrid, TextField, DateField } from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export function ConnectionsList() {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" />
+        <TextField source="name" />
+        <DateField source="created_at" showTime={true} />
+        <DateField source="updated_at" showTime={true} />
+      </Datagrid>
+    </List>
+  );
+}

package/apps/react-admin/src/components/domains/create.tsx

@@ -0,0 +1,11 @@
+import { Create, SimpleForm, TextInput, required } from "react-admin";
+
+export function DomainCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="domain" validate={[required()]} />
+      </SimpleForm>
+    </Create>
+  );
+}

package/apps/react-admin/src/components/domains/edit.tsx

@@ -0,0 +1,49 @@
+import {
+  DateField,
+  Edit,
+  FieldTitle,
+  Labeled,
+  SelectInput,
+  SimpleForm,
+  TextInput,
+} from "react-admin";
+
+export function DomainEdit() {
+  return (
+    <Edit>
+      <SimpleForm>
+        <TextInput source="domain" />
+        <SelectInput
+          source="email_service"
+          choices={[
+            { id: "mailchannels", name: "Mailchannels" },
+            { id: "mailgun", name: "Mailgun" },
+          ]}
+        />
+        <TextInput
+          label="PEM Private Key"
+          source="dkim_private_key"
+          style={{ width: "800px" }}
+          multiline={true}
+        />
+        <TextInput
+          label="PEM Public Key"
+          source="dkim_public_key"
+          style={{ width: "800px" }}
+          multiline={true}
+        />
+        <TextInput
+          label="Api Key"
+          source="email_api_key"
+          style={{ width: "800px" }}
+        />
+        <Labeled label={<FieldTitle source="created_at" />}>
+          <DateField source="created_at" showTime={true} />
+        </Labeled>
+        <Labeled label={<FieldTitle source="updated_at" />}>
+          <DateField source="updated_at" showTime={true} />
+        </Labeled>
+      </SimpleForm>
+    </Edit>
+  );
+}

package/apps/react-admin/src/components/domains/index.ts

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./list";
+export * from "./edit";

package/apps/react-admin/src/components/domains/list.tsx

@@ -0,0 +1,15 @@
+import { List, Datagrid, TextField, DateField } from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export function DomainList() {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" />
+        <TextField source="domain" />
+        <DateField source="created_at" showTime={true} />
+        <DateField source="updated_at" showTime={true} />
+      </Datagrid>
+    </List>
+  );
+}

package/apps/react-admin/src/components/listActions/PostListActions.tsx

@@ -0,0 +1,10 @@
+import { CreateButton, ExportButton, TopToolbar } from "react-admin";
+
+export function PostListActions() {
+  return (
+    <TopToolbar>
+      <CreateButton />
+      <ExportButton />
+    </TopToolbar>
+  );
+}

package/apps/react-admin/src/components/tenants/create.tsx

@@ -0,0 +1,15 @@
+import { Create, SimpleForm, TextInput, required } from "react-admin";
+
+export function TenantsCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <TextInput source="audience" validate={[required()]} />
+        <TextInput source="sender_email" validate={[required()]} />
+        <TextInput source="sender_name" validate={[required()]} />
+        <TextInput source="support_url" label="Support Url" />
+      </SimpleForm>
+    </Create>
+  );
+}