Start auth

api/auth/index.ts

@@ -0,0 +1,34 @@
+import { createAuthenticator } from "@glenstack/cf-workers-access";
+import { FABRuntime } from "@fab/core";
+
+const AUTHENTICATION_DOMAIN = "gregbrimble.cloudflareaccess.com";
+const POLICY_AUD =
+  "95c32a0c3411d058a18ae26e96f95b09f30f59da55f17973018f7f14a7eb6aca";
+
+const loginHandler = async (request: Request): Promise<Response> => {
+  const authenticator = await createAuthenticator(AUTHENTICATION_DOMAIN, {
+    aud: POLICY_AUD,
+  });
+
+  const jwt = await authenticator(request);
+
+  if (jwt)
+    return new Response(null, {
+      status: 301,
+      headers: { Location: "/search" },
+    });
+
+  return new Response(null, { status: 301, headers: { Location: "/" } });
+};
+
+export default function login({ Router, ServerContext }: FABRuntime) {
+  Router.on("/login", ({ request }) => loginHandler(request));
+  Router.on("/logout", ({ request }) =>
+    Promise.resolve(
+      new Response(null, {
+        status: 301,
+        headers: { Location: "/cdn-cgi/access/logout" },
+      })
+    )
+  );
+}

fab.config.json5

@@ -6,6 +6,9 @@
     },
     "@fab/plugin-precompile": {
       "./api/graphql/index.ts": {},
+      "./api/auth/index.ts": {
+        _config: "./plugin-overrides.js",
+      },
     },
     "@fab/plugin-render-html": {
       fallback: "/index.html",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/client": "3.3.7",
     "@fontsource/inter": "4.1.0",
+    "@glenstack/cf-workers-access": "1.0.8",
     "@glenstack/cf-workers-graphql": "1.0.4",
     "@graphql-tools/schema": "6.0.18",
     "@headlessui/react": "0.2.0",

plugin-overrides.js

@@ -0,0 +1,12 @@
+const webpack = require("webpack");
+
+module.exports = {
+  webpack: (config) => {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        window: {},
+      })
+    );
+    return config;
+  },
+};

src/App.tsx

@@ -1,5 +1,5 @@
-import { Home } from "./pages/Home";
-import { Login } from "./pages/Login";
+import { SearchPage } from "./pages/Search";
+// import { Login } from "./pages/Login";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { ApolloProvider } from "@apollo/client";
 import { client } from "./client";
@@ -9,11 +9,11 @@ function App() {
     <ApolloProvider client={client}>
       <Router>
         <Switch>
-          <Route path="/login" exact>
+          {/* <Route path="/login" exact>
             <Login />
-          </Route>
-          <Route path="/" exact>
-            <Home />
+          </Route> */}
+          <Route path="/search" exact>
+            <SearchPage />
           </Route>
         </Switch>
       </Router>

src/pages/Home.tsx → src/pages/Search.tsx

@@ -30,7 +30,7 @@ const SEARCH = gql`
   }
 `;
 
-export const Home: FC = () => {
+export const SearchPage: FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -186,7 +186,7 @@ export const Home: FC = () => {
                       type="search"
                       name="search"
                       value={searchTerm}
-                      onChange={event => setSearchTerm(event.target.value)}
+                      onChange={(event) => setSearchTerm(event.target.value)}
                     />
                   </div>
                 </div>
@@ -313,7 +313,7 @@ export const Home: FC = () => {
                         type="search"
                         name="search"
                         value={searchTerm}
-                        onChange={event => setSearchTerm(event.target.value)}
+                        onChange={(event) => setSearchTerm(event.target.value)}
                       />
                     </div>
                   </div>