Initial thoughts

e2e/README.md

@@ -0,0 +1,28 @@
+# E2E Framework
+
+[Project link](https://github.com/orgs/tinyauthapp/projects/1/views/1)
+
+This is designed as an E2E framework to be able to test for changes in common proxy and application apps that tinyauth users are likely to use.
+
+This is **not** designed to test functionality, it is a [Canary](https://en.wikipedia.org/wiki/Sentinel_species#Canaries). All functionailty testing is already done by Unit tests within the standard tinyauth PR / release workflows.
+
+## Design
+
+Primary testing is via Docker, although a minimal Kubernetes stack is also planned.
+
+Initially this is being created to test the proxy connection, and ability to login.
+
+Testing of endpoints and providers will be done via `traefik`.
+
+It requires at least two endpoints, one will be `whoami` as an easy "is this working", but it also later requires an OIDC test (TBD), and a nested HTTP Auth (TBD).
+
+It should test against all "known" Oauth providers (ie, the ones that are specifically mentioned in the documentation, including community supplied if possible).
+
+> [!NOTE]
+> This requires having both Google and Github logins for the built-in providers, so security for those on a public E2E setup must be taken into account.
+
+## Running
+
+Run the <./test.sh> script, this handles everything for all tests.
+
+TODO: Implement options to limit testing to specific proxies and auth services.

e2e/compose.base.yaml

@@ -0,0 +1,10 @@
+# This contains base apps without any proxy information
+
+services:
+  tinyauth:
+    image: ${TINYAUTH_IMAGE:-ghcr.io/steveiliop56/tinyauth}:${TINYAUTH_IMAGE_TAG:-v5}
+    environment:
+      TINYAUTH_ANALYTICS_ENABLED: "false"
+      TINYAUTH_APPURL: "https://tinyauth.${DOMAIN:-local}"
+    volumes:
+      - "./config:/data"

e2e/compose.traefik.yaml

@@ -0,0 +1,44 @@
+# This contains Traefik proxy versions
+# All apps must be prefixed by `traefik-`
+
+services:
+  traefik:
+    container_name: traefik
+    image: ${TRAEFIK_IMAGE:-traefik}:${TRAEFIK_IMAGE_TAG:-v3}
+    networks:
+      - e2e
+    environment:
+      TZ: "${TZ:-Europe/London}"
+      PUID: "${PUID:-1000}"
+      PGID: "${PGID:-1000}"
+      UMASK: "000"
+    command:
+      - "--entryPoints.web.address=:80"
+      - "--entryPoints.web.http.redirections.entryPoint.scheme=https"
+      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
+      - "--entryPoints.websecure.address=:443"
+      - "--providers.docker=true"
+      - "--providers.docker.endpoint=/var/run/docker.sock"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+      - "./.ssl/key.pem:/run/secrets/key.pem:ro"
+      - "./.ssl/cert.pem:/run/secrets/cert.pem:ro"
+      - "./config:/etc/traefik"
+
+  traefik-tinyauth:
+    container_name: traefik-tinyauth
+    extends:
+      file: ../compose.base.yaml
+      service: tinyauth
+    networks:
+      e2e-external:
+      e2e:
+        aliases:
+          - "traefik-tinyauth.$DOMAIN"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.tinyauth.rule=Host(`tinyauth.$DOMAIN`)"
+      - "traefik.http.services.tinyauth.loadbalancer.server.port=3000"
+      - "traefik.http.middlewares.tinyauth.forwardauth.address=http://tinyauth:3000/api/auth/traefik"
+      - "traefik.http.middlewares.tinyauth.forwardauth.authResponseHeaders=X-Forwarded-User"
+      - "traefik.http.middlewares.tinyauth.forwardauth.maxResponseBodySize=32768"

e2e/compose.yaml

@@ -0,0 +1,53 @@
+name: tinyauth-e2e
+
+services:
+  traefik-tinyauth:
+    container_name: traefik-tinyauth
+    extends:
+      file: ../compose.base.yaml
+      service: tinyauth
+    networks:
+      e2e-external:
+      e2e:
+        aliases:
+          - "traefik-tinyauth.$DOMAIN"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.tinyauth.rule=Host(`tinyauth.$DOMAIN`)"
+      - "traefik.http.services.tinyauth.loadbalancer.server.port=3000"
+      - "traefik.http.middlewares.tinyauth.forwardauth.address=http://tinyauth:3000/api/auth/traefik"
+      - "traefik.http.middlewares.tinyauth.forwardauth.authResponseHeaders=X-Forwarded-User"
+      - "traefik.http.middlewares.tinyauth.forwardauth.maxResponseBodySize=32768"
+
+  traefik-tinyauth-google:
+    container_name: traefik-tinyauth-google
+    secrets:
+      - google_client_secret
+    environment:
+      TINYAUTH_OAUTH_PROVIDERS_GOOGLE_CLIENTID: "$GOOGLE_CLIENT_ID"
+      TINYAUTH_OAUTH_PROVIDERS_GOOGLE_CLIENTSECRETFILE: "/run/secrets/google_client_secret"
+      TINYAUTH_OAUTH_WHITELIST: "${WHITELIST:?Set the WHITELIST to your google email address!}"
+
+  whoami:
+    image: traefik/whoami:latest
+    networks:
+      e2e:
+        aliases:
+          - "whoami.$DOMAIN"
+    labels:
+      traefik.enable: true
+      traefik.http.routers.whoami.rule: Host(`whoami.$DOMAIN`)
+      traefik.http.routers.whoami.middlewares: tinyauth
+
+networks:
+  e2e-external:
+    name: "e2e-external"
+    driver: bridge
+    enable_ipv4: true
+    enable_ipv6: true
+  e2e:
+    name: "e2e"
+    driver: bridge
+    internal: true
+    enable_ipv4: true
+    enable_ipv6: false

e2e/test.sh

@@ -0,0 +1,2 @@
+#! /bin/bash
+

frontend/src/lib/hooks/oidc.ts

@@ -1,40 +1,64 @@
-import { z } from "zod";
+export type OIDCValues = {
+  scope: string;
+  response_type: string;
+  client_id: string;
+  redirect_uri: string;
+  state: string;
+  nonce: string;
+  code_challenge: string;
+  code_challenge_method: string;
+};
 
-export const oidcParamsSchema = z.object({
+interface IuseOIDCParams {
-  scope: z.string().nonempty(),
+  values: OIDCValues;
-  response_type: z.string().nonempty(),
-  client_id: z.string().nonempty(),
-  redirect_uri: z.string().nonempty(),
-  state: z.string().optional(),
-  nonce: z.string().optional(),
-  code_challenge: z.string().optional(),
-  code_challenge_method: z.string().optional(),
-});
-
-export const useOIDCParams = (
-  params: URLSearchParams,
-): {
-  values: z.infer<typeof oidcParamsSchema>;
-  issues: string[];
-  isOidc: boolean;
   compiled: string;
-} => {
+  isOidc: boolean;
-  const obj = Object.fromEntries(params.entries());
+  missingParams: string[];
-  const parsed = oidcParamsSchema.safeParse(obj);
+}
 
-  if (parsed.success) {
+const optionalParams: string[] = [
-    return {
+  "state",
-      values: parsed.data,
+  "nonce",
-      issues: [],
+  "code_challenge",
-      isOidc: true,
+  "code_challenge_method",
-      compiled: new URLSearchParams(parsed.data).toString(),
+];
-    };
+
+export function useOIDCParams(params: URLSearchParams): IuseOIDCParams {
+  let compiled: string = "";
+  let isOidc = false;
+  const missingParams: string[] = [];
+
+  const values: OIDCValues = {
+    scope: params.get("scope") ?? "",
+    response_type: params.get("response_type") ?? "",
+    client_id: params.get("client_id") ?? "",
+    redirect_uri: params.get("redirect_uri") ?? "",
+    state: params.get("state") ?? "",
+    nonce: params.get("nonce") ?? "",
+    code_challenge: params.get("code_challenge") ?? "",
+    code_challenge_method: params.get("code_challenge_method") ?? "",
+  };
+
+  for (const key of Object.keys(values)) {
+    if (!values[key as keyof OIDCValues]) {
+      if (!optionalParams.includes(key)) {
+        missingParams.push(key);
+      }
+    }
+  }
+
+  if (missingParams.length === 0) {
+    isOidc = true;
+  }
+
+  if (isOidc) {
+    compiled = new URLSearchParams(values).toString();
   }
 
   return {
-    issues: parsed.error.issues.map((issue) => issue.path.toString()),
+    values,
-    values: {} as z.infer<typeof oidcParamsSchema>,
+    compiled,
-    isOidc: false,
+    isOidc,
-    compiled: "",
+    missingParams,
   };
-};
+}

frontend/src/pages/authorize-page.tsx

@@ -72,27 +72,36 @@ export const AuthorizePage = () => {
   const scopeMap = createScopeMap(t);
 
   const searchParams = new URLSearchParams(search);
-  const oidcParams = useOIDCParams(searchParams);
+  const {
+    values: props,
+    missingParams,
+    isOidc,
+    compiled: compiledOIDCParams,
+  } = useOIDCParams(searchParams);
+  const scopes = props.scope ? props.scope.split(" ").filter(Boolean) : [];
 
   const getClientInfo = useQuery({
-    queryKey: ["client", oidcParams.values.client_id],
+    queryKey: ["client", props.client_id],
     queryFn: async () => {
-      const res = await fetch(
+      const res = await fetch(`/api/oidc/clients/${props.client_id}`);
-        `/api/oidc/clients/${encodeURIComponent(oidcParams.values.client_id)}`,
-      );
       const data = await getOidcClientInfoSchema.parseAsync(await res.json());
       return data;
     },
-    enabled: oidcParams.isOidc,
+    enabled: isOidc,
   });
 
   const authorizeMutation = useMutation({
     mutationFn: () => {
       return axios.post("/api/oidc/authorize", {
-        ...oidcParams.values,
+        scope: props.scope,
+        response_type: props.response_type,
+        client_id: props.client_id,
+        redirect_uri: props.redirect_uri,
+        state: props.state,
+        nonce: props.nonce,
       });
     },
-    mutationKey: ["authorize", oidcParams.values.client_id],
+    mutationKey: ["authorize", props.client_id],
     onSuccess: (data) => {
       toast.info(t("authorizeSuccessTitle"), {
         description: t("authorizeSuccessSubtitle"),
@@ -106,17 +115,17 @@ export const AuthorizePage = () => {
     },
   });
 
-  if (oidcParams.issues.length > 0) {
+  if (missingParams.length > 0) {
     return (
       <Navigate
-        to={`/error?error=${encodeURIComponent(t("authorizeErrorMissingParams", { missingParams: oidcParams.issues.join(", ") }))}`}
+        to={`/error?error=${encodeURIComponent(t("authorizeErrorMissingParams", { missingParams: missingParams.join(", ") }))}`}
         replace
       />
     );
   }
 
   if (!isLoggedIn) {
-    return <Navigate to={`/login?${oidcParams.compiled}`} replace />;
+    return <Navigate to={`/login?${compiledOIDCParams}`} replace />;
   }
 
   if (getClientInfo.isLoading) {
@@ -143,9 +152,6 @@ export const AuthorizePage = () => {
     );
   }
 
-  const scopes =
-    oidcParams.values.scope.split(" ").filter((s) => s.trim() !== "") || [];
-
   return (
     <Card>
       <CardHeader className="mb-2">

frontend/src/pages/login-page.tsx

@@ -51,12 +51,15 @@ export const LoginPage = () => {
   const formId = useId();
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri") || undefined;
+  const {
-  const oidcParams = useOIDCParams(searchParams);
+    values: props,
+    isOidc,
+    compiled: compiledOIDCParams,
+  } = useOIDCParams(searchParams);
 
   const [isOauthAutoRedirect, setIsOauthAutoRedirect] = useState(
     providers.find((provider) => provider.id === oauthAutoRedirect) !==
-      undefined && redirectUri !== undefined,
+      undefined && props.redirect_uri,
   );
 
   const oauthProviders = providers.filter(
@@ -75,7 +78,7 @@ export const LoginPage = () => {
   } = useMutation({
     mutationFn: (provider: string) =>
       axios.get(
-        `/api/oauth/url/${provider}${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
+        `/api/oauth/url/${provider}${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
       ),
     mutationKey: ["oauth"],
     onSuccess: (data) => {
@@ -106,12 +109,8 @@ export const LoginPage = () => {
     mutationKey: ["login"],
     onSuccess: (data) => {
       if (data.data.totpPending) {
-        if (oidcParams.isOidc) {
-          window.location.replace(`/totp?${oidcParams.compiled}`);
-          return;
-        }
         window.location.replace(
-          `/totp${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
+          `/totp${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
         );
         return;
       }
@@ -121,12 +120,12 @@ export const LoginPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (oidcParams.isOidc) {
+        if (isOidc) {
-          window.location.replace(`/authorize?${oidcParams.compiled}`);
+          window.location.replace(`/authorize?${compiledOIDCParams}`);
           return;
         }
         window.location.replace(
-          `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
+          `/continue${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
         );
       }, 500);
     },
@@ -145,7 +144,7 @@ export const LoginPage = () => {
       !isLoggedIn &&
       isOauthAutoRedirect &&
       !hasAutoRedirectedRef.current &&
-      redirectUri !== undefined
+      props.redirect_uri
     ) {
       hasAutoRedirectedRef.current = true;
       oauthMutate(oauthAutoRedirect);
@@ -156,7 +155,7 @@ export const LoginPage = () => {
     hasAutoRedirectedRef,
     oauthAutoRedirect,
     isOauthAutoRedirect,
-    redirectUri,
+    props.redirect_uri,
   ]);
 
   useEffect(() => {
@@ -171,14 +170,14 @@ export const LoginPage = () => {
     };
   }, [redirectTimer, redirectButtonTimer]);
 
-  if (isLoggedIn && oidcParams.isOidc) {
+  if (isLoggedIn && isOidc) {
-    return <Navigate to={`/authorize?${oidcParams.compiled}`} replace />;
+    return <Navigate to={`/authorize?${compiledOIDCParams}`} replace />;
   }
 
-  if (isLoggedIn && redirectUri !== undefined) {
+  if (isLoggedIn && props.redirect_uri !== "") {
     return (
       <Navigate
-        to={`/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`}
+        to={`/continue${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`}
         replace
       />
     );

frontend/src/pages/totp-page.tsx

@@ -27,8 +27,11 @@ export const TotpPage = () => {
   const redirectTimer = useRef<number | null>(null);
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri") || undefined;
+  const {
-  const oidcParams = useOIDCParams(searchParams);
+    values: props,
+    isOidc,
+    compiled: compiledOIDCParams,
+  } = useOIDCParams(searchParams);
 
   const totpMutation = useMutation({
     mutationFn: (values: TotpSchema) => axios.post("/api/user/totp", values),
@@ -39,13 +42,13 @@ export const TotpPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (oidcParams.isOidc) {
+        if (isOidc) {
-          window.location.replace(`/authorize?${oidcParams.compiled}`);
+          window.location.replace(`/authorize?${compiledOIDCParams}`);
           return;
         }
 
         window.location.replace(
-          `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
+          `/continue${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
         );
       }, 500);
     },