Switch to pure HTML authorize loop

README.md

@@ -128,15 +128,18 @@ token they want to use. For example, given the following `FAUXAUTH_CONFIG`:
 something like the following form will be rendered:
 
 ```html
-<form action="" id="root-form">
+<form action="/authorize" method="post" id="root-form">
     <label for="role-select">
         Select token
-        <select id="role-select">
+        <select id="role-select" name="code">
             <option value="288e5e60aa9220000000">Headteacher</option>
             <option value="c4f9e4bfffa600000000">Teacher</option>
             <option value="76555f344527c0000000">Student</option>
         </select>
     </label>
+
+    <!-- hidden inputs -->
+
     <button id="submit-button" type="submit">Authenticate</button>
 </form>
 ```

e2e/tests/fauxauth.e2e.js

@@ -102,14 +102,16 @@ describe("fauxauth", () => {
     });
     expect(res.statusCode).toBe(200);
 
-    await browser.url("/authorize?client_id=1ae9b0ca17e754106b51");
+    await browser.url("/authorize?client_id=1ae9b0ca17e754106b51&state=bananas&redirect_uri=http%3A%2F%2Fexample.org%2Ftest");
     const select = await browser.$("#role-select");
     await select.selectByVisibleText("User");
     const button = await browser.$("#submit-button");
     await button.click();
 
-    const url = await browser.getUrl();
     const codePattern = /code=([a-z0-9]{20})/i;
+    const url = await browser.getUrl();
+    expect(url).toMatch(/^http:\/\/example.org\/test/);
+    expect(url).toMatch(/state=bananas/);
     expect(url).toMatch(codePattern);
     const [, code] = codePattern.exec(url);
 

src/routes/authorize.ts

@@ -59,7 +59,12 @@ export default (configuration: Configuration) => {
       configuration.codes[code] = configuration.tokenMap![role];
     });
 
-    res.render("index", { redirectUrl, roles });
+    res.render("index", { query: { ...query, redirect_uri: redirectUrl }, roles });
+  });
+
+  router.post("/", (req, res) => {
+    const { redirect_uri: pathname, ...query } = req.body;
+    res.redirect(format({ pathname, query }));
   });
 
   return router;

tests/integration/authorize.integration.spec.ts

@@ -103,12 +103,36 @@ describe("authorize endpoint", () => {
       .expect(404);
   });
 
-  it("uses a token map if provided", () => {
+  describe("with token map", () => {
     const tokenMap = { role: "tokenforthatrole" };
-    return request(appFactory({ ...defaultConfiguration, tokenMap }))
-      .get(endpoint)
-      .query({ client_id: defaultConfiguration.clientId })
-      .expect(200)
-      .expect("Content-Type", /html/);
+
+    beforeEach(() => {
+      app = appFactory({ ...defaultConfiguration, tokenMap });
+    });
+
+    it("uses a token map if provided", () => {
+      return request(app)
+        .get(endpoint)
+        .query({ client_id: defaultConfiguration.clientId })
+        .expect(200)
+        .expect("Content-Type", /html/);
+    });
+
+    it("handles the post from the form", () => {
+      const code = "mycode";
+      const redirectUri = "/path/to";
+      const state = "state";
+
+      return request(app)
+        .post(endpoint)
+        .type("form")
+        .send({ redirect_uri: redirectUri, state, code })
+        .expect(302)
+        .then((res) => {
+          const { query, pathname } = parse(res.get("Location"), true);
+          expect(pathname).toBe(redirectUri);
+          expect(query).toEqual({ code, state });
+        });
+    });
   });
 });

views/index.ejs

@@ -1,24 +1,17 @@
-<form action="" id="root-form">
+<form action="/authorize" method="post" id="root-form">
     <label for="role-select">
         Select token
-        <select id="role-select">
+        <select id="role-select" name="code">
             <% Object.keys(roles).forEach(function (role) { %>
                 <%- `<option value="${roles[role]}">${role}</option>` %>
             <% }); %>
         </select>
     </label>
+
+    <% Object.keys(query).forEach(function (param) { %>
+        <%- `<input hidden name="${param}" type="text" value="${query[param]}" />` %>
+    <% }); %>
+
+
     <button id="submit-button" type="submit">Authenticate</button>
 </form>
-
-<script>
-  var redirectUrl = "<%= redirectUrl %>";
-  window.addEventListener("load", function () {
-    document.getElementById("root-form").onsubmit = function () {
-      window.location = redirectUrl.replace(
-        "code=placeholder",
-        `code=${document.getElementById("role-select").value}`
-      );
-      return false;
-    };
-  });
-</script>