frontend: jwt

2 files changed, 53 insertions, 0 deletions

diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
new file mode 100644
index 0000000..be274eb
--- /dev/null
+++ b/frontend/app/routes/dashboard.tsx
@@ -0,0 +1,22 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { isAuthenticated } from "../services/auth.server";
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return await isAuthenticated(request, {
+    failureRedirect: "/login",
+  });
+}
+
+export default function Dashboard() {
+  const user = useLoaderData<typeof loader>()!;
+
+  return (
+    <div>
+      <h1>
+        #{user.userId} {user.displayUsername} (@{user.username})
+      </h1>
+      {user.isAdmin && <p>Admin</p>}
+    </div>
+  );
+}
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
new file mode 100644
index 0000000..cf5be14
--- /dev/null
+++ b/frontend/app/routes/login.tsx
@@ -0,0 +1,31 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { Form } from "@remix-run/react";
+import { authenticator } from "../services/auth.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return await authenticator.isAuthenticated(request, {
+    successRedirect: "/dashboard",
+  });
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  return await authenticator.authenticate("default", request, {
+    successRedirect: "/dashboard",
+    failureRedirect: "/login",
+  });
+}
+
+export default function Login() {
+  return (
+    <Form method="post">
+      <input type="username" name="username" required />
+      <input
+        type="password"
+        name="password"
+        autoComplete="current-password"
+        required
+      />
+      <button>Log In</button>
+    </Form>
+  );
+}