From c733021784c9205220893d6407dfbdcc55c1a34c Mon Sep 17 00:00:00 2001
From: Jon Shipman <jon@jonshipman.com>
Date: Wed, 10 Jan 2024 08:58:57 -0600
Subject: [PATCH] Pocketbase Auth with Realtime Data

---
 remix-auth-pocketbase/.eslintrc.cjs           |  30 +++++
 remix-auth-pocketbase/.gitignore              |   6 +
 remix-auth-pocketbase/README.md               |  49 ++++++++
 remix-auth-pocketbase/app/pb.client.ts        |   8 ++
 remix-auth-pocketbase/app/pb.server.ts        |  41 +++++++
 remix-auth-pocketbase/app/root.tsx            |  50 ++++++++
 remix-auth-pocketbase/app/routes/_index.tsx   |  37 ++++++
 remix-auth-pocketbase/app/routes/admin.tsx    |  60 ++++++++++
 .../app/routes/forgot-password.tsx            |  70 ++++++++++++
 remix-auth-pocketbase/app/routes/login.tsx    |  82 ++++++++++++++
 remix-auth-pocketbase/app/routes/logout.tsx   |   6 +
 remix-auth-pocketbase/app/routes/register.tsx | 107 ++++++++++++++++++
 remix-auth-pocketbase/package.json            |  44 +++++++
 remix-auth-pocketbase/pocketbase/.gitignore   |   3 +
 .../pocketbase/pb_hooks/realtime.pb.js        |  33 ++++++
 .../pb_migrations/991_init_admin.js           |  20 ++++
 .../pocketbase/pb_migrations/992_init_user.js |  31 +++++
 .../pb_migrations/993_realtime_example.js     |  47 ++++++++
 remix-auth-pocketbase/public/favicon.ico      | Bin 0 -> 16958 bytes
 remix-auth-pocketbase/remix.config.js         |   8 ++
 remix-auth-pocketbase/remix.env.d.ts          |  12 ++
 remix-auth-pocketbase/scripts/install.mjs     |  67 +++++++++++
 remix-auth-pocketbase/scripts/pocketbase.mjs  |  37 ++++++
 remix-auth-pocketbase/tsconfig.json           |  22 ++++
 24 files changed, 870 insertions(+)
 create mode 100644 remix-auth-pocketbase/.eslintrc.cjs
 create mode 100644 remix-auth-pocketbase/.gitignore
 create mode 100644 remix-auth-pocketbase/README.md
 create mode 100644 remix-auth-pocketbase/app/pb.client.ts
 create mode 100644 remix-auth-pocketbase/app/pb.server.ts
 create mode 100644 remix-auth-pocketbase/app/root.tsx
 create mode 100644 remix-auth-pocketbase/app/routes/_index.tsx
 create mode 100644 remix-auth-pocketbase/app/routes/admin.tsx
 create mode 100644 remix-auth-pocketbase/app/routes/forgot-password.tsx
 create mode 100644 remix-auth-pocketbase/app/routes/login.tsx
 create mode 100644 remix-auth-pocketbase/app/routes/logout.tsx
 create mode 100644 remix-auth-pocketbase/app/routes/register.tsx
 create mode 100644 remix-auth-pocketbase/package.json
 create mode 100644 remix-auth-pocketbase/pocketbase/.gitignore
 create mode 100644 remix-auth-pocketbase/pocketbase/pb_hooks/realtime.pb.js
 create mode 100644 remix-auth-pocketbase/pocketbase/pb_migrations/991_init_admin.js
 create mode 100644 remix-auth-pocketbase/pocketbase/pb_migrations/992_init_user.js
 create mode 100644 remix-auth-pocketbase/pocketbase/pb_migrations/993_realtime_example.js
 create mode 100644 remix-auth-pocketbase/public/favicon.ico
 create mode 100644 remix-auth-pocketbase/remix.config.js
 create mode 100644 remix-auth-pocketbase/remix.env.d.ts
 create mode 100644 remix-auth-pocketbase/scripts/install.mjs
 create mode 100644 remix-auth-pocketbase/scripts/pocketbase.mjs
 create mode 100644 remix-auth-pocketbase/tsconfig.json

diff --git a/remix-auth-pocketbase/.eslintrc.cjs b/remix-auth-pocketbase/.eslintrc.cjs
new file mode 100644
index 00000000..287534bb
--- /dev/null
+++ b/remix-auth-pocketbase/.eslintrc.cjs
@@ -0,0 +1,30 @@
+/* eslint-env es6 */
+const OFF = 0;
+const WARN = 1;
+const ERROR = 2;
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@remix-run/eslint-config/internal", "plugin:markdown/recommended"],
+  plugins: ["markdown"],
+  settings: {
+    "import/internal-regex": "^~/",
+  },
+  ignorePatterns: ["pocketbase/**"],
+  rules: {
+    "prefer-let/prefer-let": OFF,
+    "prefer-const": WARN,
+
+    "import/order": [
+      ERROR,
+      {
+        alphabetize: { caseInsensitive: true, order: "asc" },
+        groups: ["builtin", "external", "internal", "parent", "sibling"],
+        "newlines-between": "always",
+      },
+    ],
+
+    "react/jsx-no-leaked-render": [WARN, { validStrategies: ["ternary"] }],
+  },
+};
diff --git a/remix-auth-pocketbase/.gitignore b/remix-auth-pocketbase/.gitignore
new file mode 100644
index 00000000..3f7bf98d
--- /dev/null
+++ b/remix-auth-pocketbase/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/remix-auth-pocketbase/README.md b/remix-auth-pocketbase/README.md
new file mode 100644
index 00000000..5f860701
--- /dev/null
+++ b/remix-auth-pocketbase/README.md
@@ -0,0 +1,49 @@
+# Pocketbase example
+
+This is an example showing a basic integration of Remix with [Pocketbase](https://pocketbase.io/).
+
+## Example
+
+### Getting started
+
+First, install dependencies in both the root folder (right here)
+
+```bash
+npm i
+```
+
+Then, start both the Remix and Pocketbase with
+
+```bash
+npm run dev
+```
+
+### Pocketbase
+
+In this example, a Pocketbase instance will be downloaded to `pocketbase/`. Using the migration framework, an admin user and app user will be created. A `realtime_example` collection will be created and supported with `pocketbase/pb_hooks/realtime.pb.js` by a `cronAdd` function. __In order for the email verification and forgot-password emails to work, you will need to setup SMTP in the Pocketbase admin.__ You can also manually verify new accounts in the Pocketbase admin for testing.
+
+> Note that in a real app, you'd likely not have your admin password commited in a migration. This is for demo purposes only.
+
+#### Administration Panel
+
+Pocketbase's administration panel is at [http://localhost:8090/_](http://localhost:8090/_).
+
+<pre>
+# Credentials
+Email:    <strong>pocketbase@remix.example</strong>
+Password: <strong>Passw0rd</strong>
+</pre>
+
+### Remix
+
+The Remix app is at http://localhost:3000. The following routes are provided:
+
+- __/__ - with links to the below
+- __/login__ - populated with the test user by default
+- __/register__ - populated with `2+pocketbase@remix.example` by default
+- __/forgot-password__ - populated with the test user's email by default
+- __/admin__ - accessible only after login and count is auto updated by way of Pocketbase's Realtime API
+
+There are two Pocketbase files, `pb.server.ts` and `pb.client.ts`. `pb.server.ts` handles the connection to the server for the auth and setting the cookies for persistence. It can also be used in the `loader` functions to prepopulate data on the server. `pb.client.ts` creates a new Pocketbase instance for the client. It uses the cookie setup on server for authenticating. You can use the client export for `useEffect` hooks or the realtime data API. `admin.tsx` has an example of loading data on the server and the realtime API.
+
+You may want to implement a `Content Security Policy` as this setup requires `httpOnly: false` set on the Pocketbase cookie to share between the server and client. This demo does not cover CSP.
diff --git a/remix-auth-pocketbase/app/pb.client.ts b/remix-auth-pocketbase/app/pb.client.ts
new file mode 100644
index 00000000..35d3f8e3
--- /dev/null
+++ b/remix-auth-pocketbase/app/pb.client.ts
@@ -0,0 +1,8 @@
+import Pocketbase from "pocketbase";
+
+export let pb: Pocketbase | null = null;
+
+if (typeof window !== "undefined") {
+  pb = new Pocketbase(window.ENV.POCKETBASE_URL);
+  pb.authStore.loadFromCookie(document.cookie);
+}
diff --git a/remix-auth-pocketbase/app/pb.server.ts b/remix-auth-pocketbase/app/pb.server.ts
new file mode 100644
index 00000000..ff992762
--- /dev/null
+++ b/remix-auth-pocketbase/app/pb.server.ts
@@ -0,0 +1,41 @@
+import { redirect } from "@remix-run/node";
+import Pocketbase from "pocketbase";
+
+export function getPocketbase(request?: Request) {
+  const pb = new Pocketbase(
+    process.env.POCKETBASE_URL || "http://localhost:8090",
+  );
+
+  if (request) {
+    pb.authStore.loadFromCookie(request.headers.get("cookie") || "");
+  } else {
+    pb.authStore.loadFromCookie("");
+  }
+
+  return pb;
+}
+
+export function getUser(pb: Pocketbase) {
+  if (pb.authStore.model) {
+    return structuredClone(pb.authStore.model);
+  }
+
+  return null;
+}
+
+export function createSession(redirectTo: string, pb: Pocketbase) {
+  return redirect(redirectTo, {
+    headers: {
+      "set-cookie": pb.authStore.exportToCookie({
+        secure: redirectTo.startsWith("https:"),
+        httpOnly: false,
+      }),
+    },
+  });
+}
+
+export function destroySession(pb: Pocketbase) {
+  pb.authStore.clear();
+
+  return createSession("/", pb);
+}
diff --git a/remix-auth-pocketbase/app/root.tsx b/remix-auth-pocketbase/app/root.tsx
new file mode 100644
index 00000000..7e1c3ce7
--- /dev/null
+++ b/remix-auth-pocketbase/app/root.tsx
@@ -0,0 +1,50 @@
+import { cssBundleHref } from "@remix-run/css-bundle";
+import type { LinksFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "@remix-run/react";
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+];
+
+export async function loader() {
+  return json({
+    ENV: {
+      POCKETBASE_URL: process.env.POCKETBASE_URL || "http://localhost:8090",
+    },
+  });
+}
+
+export default function App() {
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
+          }}
+        />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/remix-auth-pocketbase/app/routes/_index.tsx b/remix-auth-pocketbase/app/routes/_index.tsx
new file mode 100644
index 00000000..676b2e98
--- /dev/null
+++ b/remix-auth-pocketbase/app/routes/_index.tsx
@@ -0,0 +1,37 @@
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+
+import { getPocketbase, getUser } from "~/pb.server";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const pb = getPocketbase(request);
+  const user = getUser(pb);
+
+  return json({ user });
+}
+
+export default function Index() {
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      {data.user ? (
+        <Link to="/logout">Logout</Link>
+      ) : (
+        <>
+          <Link to="/login">Login</Link>
+          <Link to="/register">Register</Link>
+          <Link to="/forgot-password">Forgot Password</Link>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/remix-auth-pocketbase/app/routes/admin.tsx b/remix-auth-pocketbase/app/routes/admin.tsx
new file mode 100644
index 00000000..9c46e84e
--- /dev/null
+++ b/remix-auth-pocketbase/app/routes/admin.tsx
@@ -0,0 +1,60 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+import { useEffect, useState } from "react";
+
+import { pb } from "~/pb.client";
+import { createSession, getPocketbase, getUser } from "~/pb.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const pb = getPocketbase(request);
+  const user = getUser(pb);
+
+  const redirectUrl = "/admin";
+
+  if (!user) {
+    return createSession("/", pb);
+  }
+
+  let realtime_example = null;
+
+  try {
+    realtime_example = await pb.collection("realtime_example").getFullList();
+  } catch (_) {}
+
+  return json({ redirectUrl, user, realtime_example });
+}
+
+export default function Admin() {
+  const loaderData = useLoaderData<typeof loader>();
+  const [count, setCount] = useState(
+    loaderData.realtime_example?.[0]?.count || 0,
+  );
+
+  useEffect(() => {
+    pb?.collection("realtime_example").subscribe("*", (data) => {
+      setCount(data.record.count);
+    });
+
+    return () => {
+      pb?.collection("realtime_example").unsubscribe("*");
+    };
+  }, [setCount]);
+
+  return (
+    <div>
+      <div>Hello {loaderData.user.name || loaderData.user.email}</div>
+      <div style={{ display: "flex", gap: "1rem", margin: "1rem 0" }}>
+        <Link to="/logout" reloadDocument>
+          Logout
+        </Link>
+
+        <Link to="/">Home</Link>
+      </div>
+
+      <div>
+        Realtime Data Demo: <span>{count}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/remix-auth-pocketbase/app/routes/forgot-password.tsx b/remix-auth-pocketbase/app/routes/forgot-password.tsx
new file mode 100644
index 00000000..4b12a742
--- /dev/null
+++ b/remix-auth-pocketbase/app/routes/forgot-password.tsx
@@ -0,0 +1,70 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Form, Link, useActionData } from "@remix-run/react";
+import { ClientResponseError } from "pocketbase";
+
+import { createSession, getPocketbase, getUser } from "~/pb.server";
+
+interface ForgotPasswordRequestData {
+  email: string;
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const pb = getPocketbase(request);
+
+  const result = (await request.formData()) as unknown as Iterable<
+    [ForgotPasswordRequestData, FormDataEntryValue]
+  >;
+  const data: ForgotPasswordRequestData = Object.fromEntries(result);
+
+  try {
+    await pb.collection("users").requestPasswordReset(data.email);
+
+    return json({
+      success: true,
+      error: false,
+      message: "An email has been sent to reset your password!",
+    });
+  } catch (error) {
+    if (error instanceof ClientResponseError) {
+      return json({ success: false, error: true, message: error.message });
+    }
+  }
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const pb = getPocketbase(request);
+  const user = getUser(pb);
+
+  const redirectUrl = "/admin";
+
+  if (user) return createSession(redirectUrl, pb);
+
+  return json({ redirectUrl, user });
+}
+
+export default function Login() {
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <Form method="post">
+      {actionData?.error ? <div>{actionData.message}</div> : null}
+      {actionData?.success ? (
+        <div style={{ color: "green" }}>{actionData.message}</div>
+      ) : null}
+      <div>
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          defaultValue="pocketbase@remix.example"
+        />
+      </div>
+
+      <button>Forgot Password</button>
+
+      <Link to="/login">Login</Link>
+    </Form>
+  );
+}
diff --git a/remix-auth-pocketbase/app/routes/login.tsx b/remix-auth-pocketbase/app/routes/login.tsx
new file mode 100644
index 00000000..c3e13689
--- /dev/null
+++ b/remix-auth-pocketbase/app/routes/login.tsx
@@ -0,0 +1,82 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Form, useActionData } from "@remix-run/react";
+import { ClientResponseError } from "pocketbase";
+
+import { createSession, getPocketbase, getUser } from "~/pb.server";
+
+interface LoginRequestData {
+  email: string;
+  password: string;
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const pb = getPocketbase(request);
+
+  const result = (await request.formData()) as unknown as Iterable<
+    [LoginRequestData, FormDataEntryValue]
+  >;
+  const data: LoginRequestData = Object.fromEntries(result);
+
+  try {
+    await pb.collection("users").authWithPassword(data.email, data.password);
+
+    if (!pb.authStore.model?.verified) {
+      pb.authStore.clear();
+
+      return json({ error: true, message: "Please verify your account" });
+    }
+  } catch (error) {
+    if (error instanceof ClientResponseError) {
+      return json({ error: true, message: error.message });
+    }
+  }
+
+  if (!pb?.authStore?.isValid) {
+    return json({ error: true, message: "invalid authstore" });
+  }
+
+  return createSession("/admin", pb);
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const pb = getPocketbase(request);
+  const user = getUser(pb);
+
+  const redirectUrl = "/admin";
+
+  if (user) return createSession(redirectUrl, pb);
+
+  return json({ redirectUrl, user });
+}
+
+export default function Login() {
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <Form method="post">
+      {actionData?.error ? <div>{actionData.message}</div> : null}
+      <div>
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          defaultValue="pocketbase@remix.example"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="password">Password</label>
+        <input
+          type="password"
+          name="password"
+          id="password"
+          defaultValue="Passw0rd"
+        />
+      </div>
+
+      <button>Log In</button>
+    </Form>
+  );
+}
diff --git a/remix-auth-pocketbase/app/routes/logout.tsx b/remix-auth-pocketbase/app/routes/logout.tsx
new file mode 100644
index 00000000..9c228716
--- /dev/null
+++ b/remix-auth-pocketbase/app/routes/logout.tsx
@@ -0,0 +1,6 @@
+import { destroySession, getPocketbase } from "~/pb.server";
+
+export function loader() {
+  const pb = getPocketbase();
+  return destroySession(pb);
+}
diff --git a/remix-auth-pocketbase/app/routes/register.tsx b/remix-auth-pocketbase/app/routes/register.tsx
new file mode 100644
index 00000000..42d49c0e
--- /dev/null
+++ b/remix-auth-pocketbase/app/routes/register.tsx
@@ -0,0 +1,107 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Form, useActionData, Link } from "@remix-run/react";
+import { ClientResponseError } from "pocketbase";
+
+import { createSession, getPocketbase, getUser } from "~/pb.server";
+
+interface RegisterRequestData {
+  email: string;
+  password: string;
+  passwordConfirm: string;
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const pb = getPocketbase(request);
+
+  const result = (await request.formData()) as unknown as Iterable<
+    [RegisterRequestData, FormDataEntryValue]
+  >;
+  const data: RegisterRequestData = Object.fromEntries(result);
+
+  if (data.password !== data.passwordConfirm)
+    return json({
+      success: false,
+      error: true,
+      message: "Passwords do not match",
+    });
+  if (data.password.length < 8)
+    return json({
+      success: false,
+      error: true,
+      message: "Password needs to be 8 characters or longer",
+    });
+
+  try {
+    await pb.collection("users").create(data);
+    await pb.collection("users").requestVerification(data.email);
+  } catch (error) {
+    if (error instanceof ClientResponseError) {
+      return json({ success: false, error: true, message: error.message });
+    }
+  }
+
+  return json({
+    error: false,
+    success: true,
+    message:
+      "Please check your email inbox and click the link to verify your account",
+  });
+}
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const pb = getPocketbase(request);
+  const user = getUser(pb);
+
+  const redirectUrl = "/admin";
+
+  if (user) return createSession(redirectUrl, pb);
+
+  return json({ redirectUrl, user });
+}
+
+export default function Login() {
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <Form method="post">
+      {actionData?.error ? <div>{actionData.message}</div> : null}
+      {actionData?.success ? (
+        <div style={{ color: "green" }}>{actionData.message}</div>
+      ) : null}
+      <div>
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          defaultValue="2+pocketbase@remix.example"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="password">Password</label>
+        <input
+          type="password"
+          name="password"
+          id="password"
+          defaultValue="Passw0rd"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="passwordConfirm">Password Confirm</label>
+        <input
+          type="password"
+          name="passwordConfirm"
+          id="passwordConfirm"
+          defaultValue="Passw0rd"
+        />
+      </div>
+
+      <button>Register</button>
+
+      <Link to="/login">Login</Link>
+    </Form>
+  );
+}
diff --git a/remix-auth-pocketbase/package.json b/remix-auth-pocketbase/package.json
new file mode 100644
index 00000000..fc5c87dd
--- /dev/null
+++ b/remix-auth-pocketbase/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "pocketbase",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "postinstall": "node ./scripts/install.mjs",
+    "build": "remix build",
+    "dev": "concurrently \"npm run dev:remix\" \"npm run dev:pocketbase\"",
+    "dev:pocketbase": "node ./scripts/pocketbase.mjs",
+    "dev:remix": "remix dev --manual",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "remix-serve ./build/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/css-bundle": "^2.4.1",
+    "@remix-run/node": "^2.4.1",
+    "@remix-run/react": "^2.4.1",
+    "@remix-run/serve": "^2.4.1",
+    "isbot": "^3.6.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.4.1",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "pocketbase": "^0.20.1",
+    "typescript": "^5.1.6"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
diff --git a/remix-auth-pocketbase/pocketbase/.gitignore b/remix-auth-pocketbase/pocketbase/.gitignore
new file mode 100644
index 00000000..b743fee2
--- /dev/null
+++ b/remix-auth-pocketbase/pocketbase/.gitignore
@@ -0,0 +1,3 @@
+/pocketbase.exe
+/pocketbase
+/pb_data
diff --git a/remix-auth-pocketbase/pocketbase/pb_hooks/realtime.pb.js b/remix-auth-pocketbase/pocketbase/pb_hooks/realtime.pb.js
new file mode 100644
index 00000000..affe9838
--- /dev/null
+++ b/remix-auth-pocketbase/pocketbase/pb_hooks/realtime.pb.js
@@ -0,0 +1,33 @@
+cronAdd("realtime_example", "*/1 * * * *", function () {
+  let records = null;
+
+  try {
+    records = $app
+      .dao()
+      .findRecordsByFilter("realtime_example", "1=1", "-created", 1, 0);
+  } catch (_) {}
+
+  const record = records?.[0] || null;
+
+  let count = record?.get("count") || 1;
+
+  if (!record) {
+    const collection = $app.dao().findCollectionByNameOrId("realtime_example");
+
+    const record = new Record(collection, {
+      count,
+    });
+
+    $app.dao().saveRecord(record);
+  } else {
+    count++;
+
+    const form = new RecordUpsertForm($app, record);
+    form.loadData({
+      count,
+    });
+    form.submit();
+  }
+
+  console.log("realtime_example", count);
+});
diff --git a/remix-auth-pocketbase/pocketbase/pb_migrations/991_init_admin.js b/remix-auth-pocketbase/pocketbase/pb_migrations/991_init_admin.js
new file mode 100644
index 00000000..c6b37a2c
--- /dev/null
+++ b/remix-auth-pocketbase/pocketbase/pb_migrations/991_init_admin.js
@@ -0,0 +1,20 @@
+migrate(
+  (db) => {
+    const dao = new Dao(db);
+
+    const admin = new Admin();
+    admin.email = "pocketbase@remix.example";
+    admin.setPassword("Passw0rd");
+
+    dao.saveAdmin(admin);
+  },
+  (db) => {
+    const dao = new Dao(db);
+
+    try {
+      const admin = dao.findAdminByEmail("pocketbase@remix.example");
+
+      dao.deleteAdmin(admin);
+    } catch (_) {}
+  },
+);
diff --git a/remix-auth-pocketbase/pocketbase/pb_migrations/992_init_user.js b/remix-auth-pocketbase/pocketbase/pb_migrations/992_init_user.js
new file mode 100644
index 00000000..b4d45b58
--- /dev/null
+++ b/remix-auth-pocketbase/pocketbase/pb_migrations/992_init_user.js
@@ -0,0 +1,31 @@
+migrate(
+  (db) => {
+    const dao = new Dao(db);
+
+    const collection = dao.findCollectionByNameOrId("users");
+
+    const record = new Record(collection);
+    record.set("name", "John Doe");
+    record.set("email", "pocketbase@remix.example");
+    record.set("verified", true);
+    record.set(
+      "username",
+      "u_" + $security.randomStringWithAlphabet(5, "123456789"),
+    );
+    record.setPassword("Passw0rd");
+
+    dao.saveRecord(record);
+  },
+  (db) => {
+    const dao = new Dao(db);
+
+    try {
+      const record = dao.findAuthRecordByEmail(
+        "users",
+        "pocketbase@remix.example",
+      );
+
+      dao.deleteRecord(record);
+    } catch (_) {}
+  },
+);
diff --git a/remix-auth-pocketbase/pocketbase/pb_migrations/993_realtime_example.js b/remix-auth-pocketbase/pocketbase/pb_migrations/993_realtime_example.js
new file mode 100644
index 00000000..51486317
--- /dev/null
+++ b/remix-auth-pocketbase/pocketbase/pb_migrations/993_realtime_example.js
@@ -0,0 +1,47 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate(
+  (db) => {
+    const collection = new Collection({
+      id: "3fgzix6mozksgdo",
+      created: "2024-01-10 13:26:07.505Z",
+      updated: "2024-01-10 13:26:07.505Z",
+      name: "realtime_example",
+      type: "base",
+      system: false,
+      schema: [
+        {
+          system: false,
+          id: "naymwtuv",
+          name: "count",
+          type: "number",
+          required: false,
+          presentable: false,
+          unique: false,
+          options: {
+            min: null,
+            max: null,
+            noDecimal: false,
+          },
+        },
+      ],
+      indexes: [
+        "CREATE UNIQUE INDEX `idx_mIunNVu` ON `realtime_example` (`count`)",
+        "CREATE INDEX `idx_BcMwMuN` ON `realtime_example` (`created`)",
+      ],
+      listRule: '@request.auth.id != ""',
+      viewRule: '@request.auth.id != ""',
+      createRule: '@request.auth.id != ""',
+      updateRule: '@request.auth.id != ""',
+      deleteRule: '@request.auth.id != ""',
+      options: {},
+    });
+
+    return Dao(db).saveCollection(collection);
+  },
+  (db) => {
+    const dao = new Dao(db);
+    const collection = dao.findCollectionByNameOrId("3fgzix6mozksgdo");
+
+    return dao.deleteCollection(collection);
+  },
+);
diff --git a/remix-auth-pocketbase/public/favicon.ico b/remix-auth-pocketbase/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8830cf6821b354114848e6354889b8ecf6d2bc61
GIT binary patch
literal 16958
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
EKbET!0{{R3

literal 0
HcmV?d00001

diff --git a/remix-auth-pocketbase/remix.config.js b/remix-auth-pocketbase/remix.config.js
new file mode 100644
index 00000000..7fac2d30
--- /dev/null
+++ b/remix-auth-pocketbase/remix.config.js
@@ -0,0 +1,8 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+export default {
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
+};
diff --git a/remix-auth-pocketbase/remix.env.d.ts b/remix-auth-pocketbase/remix.env.d.ts
new file mode 100644
index 00000000..661196f5
--- /dev/null
+++ b/remix-auth-pocketbase/remix.env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />
+
+declare global {
+  interface Window {
+    ENV: {
+      POCKETBASE_URL: string;
+    };
+  }
+}
+
+export {};
diff --git a/remix-auth-pocketbase/scripts/install.mjs b/remix-auth-pocketbase/scripts/install.mjs
new file mode 100644
index 00000000..bac8acc2
--- /dev/null
+++ b/remix-auth-pocketbase/scripts/install.mjs
@@ -0,0 +1,67 @@
+import cp from 'node:child_process';
+import os from 'node:os';
+import path from 'node:path';
+
+const PBVERSION = '0.20.5';
+
+const pblink = getPocketbaseLink();
+const pbzippath = path.join(os.tmpdir(), 'pocketbase.zip');
+await run('curl', ['-o', pbzippath, '-L', pblink]);
+
+if (os.platform() == 'win32') {
+	await run('TAR.EXE', ['-xf', pbzippath], { cwd: os.tmpdir() });
+	await run('MOVE', [path.join(os.tmpdir(), 'pocketbase.exe'), 'pocketbase\\']);
+	await run('DEL', ['/F', pbzippath]);
+} else {
+	await run('unzip', [pbzippath], { cwd: os.tmpdir() });
+	await run('mv', [path.join(os.tmpdir(), 'pocketbase'), 'pocketbase/']);
+	await run('rm', ['-f', pbzippath]);
+}
+
+function run(command, args = [], options = {}) {
+	console.log('\x1b[43m', 'command', '\x1b[0m');
+	console.log('\x1b[33m', command, args.join(' '), '\x1b[0m', '\n');
+
+	return new Promise((resolve, reject) => {
+		options.cwd = options.cwd || '.';
+
+		if (os.platform() === 'win32') {
+			options.execPath = 'CMD.EXE';
+			options.execArgv = ['/C'];
+		} else {
+			options.execPath = 'bash';
+			options.execArgv = ['-c'];
+			command = command + ' ' + args.join(' ');
+			args = [];
+		}
+
+		const p = cp.fork(command, args, options);
+
+		p.on('error', (code) => {
+			reject(code);
+		});
+
+		p.on('close', () => {
+			resolve();
+		});
+	});
+}
+
+function getPocketbaseLink() {
+	let platform = 'linux';
+	let arch = 'amd64';
+
+	if (os.arch() === 'arm64') {
+		arch = 'arm64';
+	} else if (os.arch() === 'armv7') {
+		arch = 'armv7';
+	}
+
+	if (os.platform() == 'win32') {
+		platform = 'windows';
+	} else if (os.platform() === 'darwin') {
+		platform = 'darwin';
+	}
+
+	return `https://github.com/pocketbase/pocketbase/releases/download/v${PBVERSION}/pocketbase_${PBVERSION}_${platform}_${arch}.zip`;
+}
diff --git a/remix-auth-pocketbase/scripts/pocketbase.mjs b/remix-auth-pocketbase/scripts/pocketbase.mjs
new file mode 100644
index 00000000..2f374dc3
--- /dev/null
+++ b/remix-auth-pocketbase/scripts/pocketbase.mjs
@@ -0,0 +1,37 @@
+import cp from 'node:child_process';
+import os from 'node:os';
+
+if (os.platform() == 'win32') {
+	await run('.\\pocketbase\\pocketbase.exe',['serve']);
+} else {
+	await run('./pocketbase/pocketbase',['serve']);
+}
+
+function run(command, args = [], options = {}) {
+	console.log('\x1b[43m', 'command', '\x1b[0m');
+	console.log('\x1b[33m', command, args.join(' '), '\x1b[0m', '\n');
+
+	return new Promise((resolve, reject) => {
+		options.cwd = options.cwd || '.';
+
+		if (os.platform() === 'win32') {
+			options.execPath = 'CMD.EXE';
+			options.execArgv = ['/C'];
+		} else {
+			options.execPath = 'bash';
+			options.execArgv = ['-c'];
+			command = command + ' ' + args.join(' ');
+			args = [];
+		}
+
+		const p = cp.fork(command, args, options);
+
+		p.on('error', (code) => {
+			reject(code);
+		});
+
+		p.on('close', () => {
+			resolve();
+		});
+	});
+}
\ No newline at end of file
diff --git a/remix-auth-pocketbase/tsconfig.json b/remix-auth-pocketbase/tsconfig.json
new file mode 100644
index 00000000..28cce918
--- /dev/null
+++ b/remix-auth-pocketbase/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}