client apis/react-router

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

React Router v7 auth.server.ts location and export requirement

Create a file named `auth.server.ts` in one of these locations: project root, `lib/` folder, `utils/` folder, or nested under `app/` folder (e.g. `app/lib/auth.server.ts`). The auth instance must be exported with the variable name `auth` or as a `default` export.

React Router v7 auth instance creation

Create a Better Auth instance by importing `betterAuth` from "better-auth" and calling it with configuration. Example: `export const auth = betterAuth({ database: { provider: "postgres", url: process.env.DATABASE_URL } })`

React Router v7 API route setup

Create a resource route file named `api.auth.$.ts` inside the `app/routes/` directory. Export a `loader` function and an `action` function, both of which call `auth.handler(request)`. Import `LoaderFunctionArgs` and `ActionFunctionArgs` from "react-router".

React Router v7 API route implementation

The `api.auth.$.ts` file requires two exports: ```ts import { auth } from '~/lib/auth.server' import type { LoaderFunctionArgs, ActionFunctionArgs } from "react-router" export async function loader({ request }: LoaderFunctionArgs) { return auth.handler(request) } export async function action({ request }: ActionFunctionArgs) { return auth.handler(request) } ```

React Router v7 client instance creation

Create a client instance by importing `createAuthClient` from "better-auth/react" and call it with configuration. Store this in a file like `app/lib/auth-client.ts`. Example: `export const authClient = createAuthClient({})`

React Router v7 sign up example

Sign up example using `authClient.signUp.email()` with React Router v7: ```ts import { Form } from "react-router" import { useState } from "react" import { authClient } 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> ) } ```

React Router v7 sign in example

Sign in example using `authClient.signIn.email()` with React Router v7: ```ts import { Form } from "react-router" import { useState } from "react" import { authClient } from "~/lib/auth-client" export default function SignIn() { 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)} placeholder="Email" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" /> <button type="submit">Sign In</button> </Form> </div> ) } ```

React Router v7 is successor to Remix

React Router v7 is the successor to Remix. When migrating from Remix v2, the main difference is changing imports from `@remix-run/*` to `react-router`. The APIs remain the same.

Recommended API route path for Better Auth

The recommended path for the Better Auth API route is `routes/api.auth.$.ts`. While the path can be changed in the Better Auth configuration, it is recommended to keep it as the default.

Give your agent this brain