diff --git a/app/routes/data-request_.auth.tsx b/app/routes/data-request_.auth.tsx
new file mode 100644
index 0000000..718b534
--- /dev/null
+++ b/app/routes/data-request_.auth.tsx
@@ -0,0 +1,45 @@
+import { Button, Card, Container, Heading, VStack } from "@chakra-ui/react";
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader({ context }: { context: RequestContext }) {
+  const state = crypto.randomUUID().replace(/-/g, "");
+  const url = new URL(context.request.url);
+  url.pathname = "/api/data-requests/session";
+
+  await context.env.DATA.put(
+    `rbxstate_${state}`,
+    context.request.headers.get("cf-connecting-ip") ?? "",
+    {
+      expirationTtl: 300,
+    },
+  );
+
+  return {
+    client_id: context.env.ROBLOX_OAUTH_CLIENT_ID,
+    state,
+    url: encodeURIComponent(url.href),
+  };
+}
+
+export default function () {
+  const { client_id, state, url } = useLoaderData<typeof loader>();
+
+  return (
+    <Container pt="16vh">
+      <Card borderRadius="32px" p="4vh">
+        <VStack alignContent="center" gap="2vh">
+          <Heading>Log in to Car Crushers</Heading>
+          <br />
+          <Button
+            as="a"
+            borderRadius="24px"
+            colorScheme="blue"
+            href={`https://apis.roblox.com/oauth/v1/authorize?client_id=${client_id}&redirect_uri=${url}&response_type=code&state=${state}`}
+          >
+            Log in with Roblox
+          </Button>
+        </VStack>
+      </Card>
+    </Container>
+  );
+}