docs: add basic remix documentation (#38)

docs/components/icons.tsx

@@ -186,4 +186,29 @@ export const Icons = {
 			></path>
 		</svg>
 	),
+	remix: () => (
+		<svg
+			width="1em"
+			height="1em"
+			viewBox="0 0 412 474"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M393.946 364.768C398.201 419.418 398.201 445.036 398.201 473H271.756C271.756 466.909 271.865 461.337 271.975 455.687C272.317 438.123 272.674 419.807 269.828 382.819C266.067 328.667 242.748 316.634 199.871 316.634H161.883H1V218.109H205.889C260.049 218.109 287.13 201.633 287.13 158.011C287.13 119.654 260.049 96.4098 205.889 96.4098H1V0H228.456C351.069 0 412 57.9117 412 150.42C412 219.613 369.123 264.739 311.201 272.26C360.096 282.037 388.681 309.865 393.946 364.768Z"
+				fill="white"
+			/>
+			<path
+				d="M1 473V399.553H134.697C157.029 399.553 161.878 416.116 161.878 425.994V473H1Z"
+				fill="white"
+			/>
+			<path
+				d="M1 399.053H0.5V399.553V473V473.5H1H161.878H162.378V473V425.994C162.378 420.988 161.152 414.26 157.063 408.77C152.955 403.255 146.004 399.053 134.697 399.053H1Z"
+				stroke="white"
+				stroke-opacity="0.8"
+			/>
+		</svg>
+	),
 };

docs/components/sidebar-content.tsx

@@ -501,6 +501,11 @@ export const contents: Content[] = [
 				href: "/docs/integrations/astro",
 			},
 
+			{
+				title: "Remix",
+				icon: Icons.remix,
+				href: "/docs/integrations/remix",
+			},
 			{
 				title: "Next",
 				icon: Icons.nextJS,

docs/content/docs/basic-usage.mdx

@@ -53,7 +53,7 @@ export default function SignUp() {
         onRequest: (ctx) => {
          //show loading     
         },
-        onsSuccess: (ctx) => {
+        onSuccess: (ctx) => {
           //redirect to the dashboard
         },
         onError: (ctx) => {
@@ -317,6 +317,19 @@ The server provides a `session` object that you can use to access the session da
     })
     ```
     </Tab>
+    <Tab value="Remix">
+    ```ts title="route.ts"
+    import { auth } from "lib/auth"; // path to your better auth server instance
+
+    export async function loader({ request }: LoaderFunctionArgs) {
+        const session = await auth.api.getSession({
+            headers: request.headers
+        })
+
+        return json({ session })
+    }
+    ```
+    </Tab>
     <Tab value="Astro">
     ```astro title="index.astro"
     ---

docs/content/docs/installation.mdx

@@ -209,7 +209,7 @@ Create a new file or route in your framework's designated catch-all route handle
 Better auth supports any backend framework with standard Request and Response objects and offers helper functions for popular frameworks.
 </Callout>
 
-<Tabs items={["next-js", "nuxt", "svelte-kit",  "solid-start", "hono", "express"]} defaultValue="react">
+<Tabs items={["next-js", "remix", "nuxt", "svelte-kit",  "solid-start", "hono", "express"]} defaultValue="react">
     <Tab value="next-js">
         ```ts title="/app/api/auth/[...all]/route.ts"
         import { auth } from "@/lib/auth"; // path to your auth file
@@ -218,6 +218,15 @@ Better auth supports any backend framework with standard Request and Response ob
         export const { POST, GET } = toNextJsHandler(auth);
         ```
     </Tab>
+    <Tab value="remix">
+    ```ts title="/app/routes/api.auth.$.ts"
+    import { auth } from "@/lib/auth"; // path to your auth file
+
+    export async function loader({ request }) {
+        return auth.handler(request);
+    }
+    ```
+    </Tab>
     <Tab value="nuxt">
     ```ts title="/server/api/auth/[...all].ts"
     import { auth } from "~/utils/auth"; // path to your auth file

docs/content/docs/integrations/remix.mdx

@@ -0,0 +1,203 @@
+---
+title: Remix Integration 
+description: Integrate Better Auth with Remix
+---
+
+Better Auth can be easily integrated with Remix. This guide will show you how to integrate better auth with Remix.
+
+You can follow the steps from [installation](/docs/installation) to get started or you can follow this guide to make it the Remix-way.
+
+If you have followed the installation steps, you can skip the first step.
+
+## Create auth instance
+
+
+Create a file named `auth.server.ts` in one of these locations:
+   - Project root
+   - `lib/` folder
+   - `utils/` folder
+
+You can also nest any of these folders under `app/` folder. (e.g. `app/lib/auth.server.ts`)
+
+And in this file, import Better Auth and create your instance.
+
+<Callout type="warn">
+Make sure to export the auth instance with the variable name `auth` or as a `default` export.
+</Callout>
+
+```ts title="app/lib/auth.server.ts"
+import { betterAuth } from "better-auth"
+
+export const auth = betterAuth({
+    database: {
+        provider: "postgres", //change this to your database provider
+        url: process.env.DATABASE_URL, // path to your database or connection string
+    }
+})
+```
+
+## Create API Route
+
+We need to mount the handler to a API route. Create a resource route file `api.auth.$.ts` inside `app/routes/` directory. And add the following code:
+
+```ts title="app/routes/api.auth.$.ts"
+import { auth } from '~/lib/auth.server' // Adjust the path as necessary
+import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node"
+
+export async function loader({ request }: LoaderFunctionArgs) {
+    return auth.handler(request)
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+    return auth.handler(request)
+}
+```
+
+<Callout type="info">
+ You can change the path on your better-auth configuration but it's recommended to keep it as `routes/api.auth.$.ts`
+</Callout>
+
+## Create a client
+
+Create a client instance. Here we are creating `auth.client.ts` file inside the `lib/` directory.
+
+```ts title="app/lib/auth.client.ts"
+import { createAuthClient } from "better-auth/react" // make sure to import from better-auth/react
+
+export const client = createAuthClient({
+    //you can pass client configuration here
+})
+```
+
+Once you have created the client, you can use it to sign up, sign in, and perform other actions.
+
+### Example usage
+
+#### Sign Up
+
+```ts title="app/routes/signup.tsx"
+import { Form } from "@remix-run/react"
+import { useState } from "react"
+import { client } from "~/lib/auth.client"
+
+export default function Signup() {
+  const [email, setEmail] = useState("")
+  const [name, setName] = useState("")
+  const [password, setPassword] = useState("")
+
+  const signUp = async () => {
+    await authClient.signUp.email(
+      {
+        email,
+        password,
+        name,
+      },
+      {
+        onRequest: (ctx) => {
+          // show loading state
+        },
+        onSuccess: (ctx) => {
+          // redirect to home
+        },
+        onError: (ctx) => {
+          alert(ctx.error)
+        },
+      },
+    )
+  }
+
+  return (
+    <div>
+      <h2>
+        Sign Up
+      </h2>
+      <Form
+        onSubmit={signUp}
+      >
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Name"
+        />
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Email"
+        />
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <button
+          type="submit"
+        >
+          Sign Up
+        </button>
+      </Form>
+    </div>
+  )
+}
+
+```
+
+#### Sign In
+
+```ts title="app/routes/signin.tsx"
+import { Form } from "@remix-run/react"
+import { useState } from "react"
+import { authClient } from "~/services/auth.client"
+
+export default function Signup() {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+
+  const signIn = async () => {
+    await authClient.signIn.email(
+      {
+        email,
+        password,
+      },
+      {
+        onRequest: (ctx) => {
+          // show loading state
+        },
+        onSuccess: (ctx) => {
+          // redirect to home
+        },
+        onError: (ctx) => {
+          alert(ctx.error)
+        },
+      },
+    )
+  }
+
+  return (
+    <div>
+      <h2>
+        Sign In
+      </h2>
+      <Form onSubmit={signIn}>
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button
+          type="submit"
+        >
+          Sign In
+        </button>
+      </Form>
+    </div>
+  )
+}
+```