diff --git a/docs/components/features.tsx b/docs/components/features.tsx index f3f639ec..3c829c4b 100644 --- a/docs/components/features.tsx +++ b/docs/components/features.tsx @@ -1,14 +1,14 @@ "use client"; import { - CheckIcon, - Globe2Icon, - PlugIcon, - PlugZap2Icon, - Plus, - RabbitIcon, - ShieldCheckIcon, - Webhook, - XIcon, + CheckIcon, + Globe2Icon, + PlugIcon, + PlugZap2Icon, + Plus, + RabbitIcon, + ShieldCheckIcon, + Webhook, + XIcon, } from "lucide-react"; import { GitHubLogoIcon, LockClosedIcon } from "@radix-ui/react-icons"; import Link from "next/link"; @@ -19,188 +19,188 @@ import { Ripple } from "./ripple"; import { GithubStat } from "./github-stat"; export default function Features({ stars }: { stars: string | null }) { - return ( -
- -
-
- + return ( +
+ +
+
+ -
- -

- Framework Agnostic{" "} -

-
-
-
-
-

- Supports popular frameworks -

-
-
-

- Supports your favorite frontend, backend and meta frameworks, - including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js, - Hono, and more{" "} - - Learn more - -

-
-
-
- +
+ +

+ Framework Agnostic{" "} +

+
+
+
+
+

+ Supports popular frameworks +

+
+
+

+ Supports your favorite frontend, backend and meta frameworks, + including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js, + Hono, and more{" "} + + Learn more + +

+
+
+
+ -
- -

Authentication

-
-
-
-
-

- Email & Password Authentication -

-
-
-

- Builtin support for email and password authentication, with secure - password hashing and account management features{" "} - - Learn more - -

-
-
-
- +
+ +

Authentication

+
+
+
+
+

+ Email & Password Authentication +

+
+
+

+ Builtin support for email and password authentication, with secure + password hashing and account management features{" "} + + Learn more + +

+
+
+
+ -
- -

Social Sign-on

-
-
-
-
-

- Support multiple OAuth providers. -

-
-
-

- Allow users to sign in with their accounts, including Github, - Google, Discord, Twitter, and more.{" "} - - Learn more - -

-
-
-
-
- -

Two Factor

-
-
-
-
-

- Two Factor Authentication -

-
-
-

- With our built-in two factor authentication plugin, you can add an - extra layer of security to your account.{" "} - - Learn more - -

-
-
-
-
- -

- Organization & Access Control{" "} -

-
-
-
-
-

- Gain and manage access. -

-
-
-

- Manage users and their access to resources within your - application.{" "} - - Learn more - -

-
-
-
-
- -

- Plugin Ecosystem{" "} -

-
-
-
-

- Pluggable with custom. -

-
-
-
-

- Enhance your application with our official plugins and those - created by the community.{" "} - - Learn more - -

-
-
-
-
-
-
- -

- Own your auth -

-
-

- Roll your own auth with confidence in minutes! -

-
- -
-
- -
- -
-
-
-
-
- ); +
+ +

Social Sign-on

+
+
+
+
+

+ Support multiple OAuth providers. +

+
+
+

+ Allow users to sign in with their accounts, including Github, + Google, Discord, Twitter, and more.{" "} + + Learn more + +

+
+
+
+
+ +

Two Factor

+
+
+
+
+

+ Two Factor Authentication +

+
+
+

+ With our built-in two factor authentication plugin, you can add an + extra layer of security to your account.{" "} + + Learn more + +

+
+
+
+
+ +

+ Organization & Access Control{" "} +

+
+
+
+
+

+ Gain and manage access. +

+
+
+

+ Manage users and their access to resources within your + application.{" "} + + Learn more + +

+
+
+
+
+ +

+ Plugin Ecosystem{" "} +

+
+
+
+

+ Pluggable with custom. +

+
+
+
+

+ Enhance your application with our official plugins and those + created by the community.{" "} + + Learn more + +

+
+
+
+
+
+
+ +

+ Own your auth +

+
+

+ Roll your own auth with confidence in minutes! +

+
+ +
+
+ +
+ +
+
+
+
+
+ ); } diff --git a/docs/components/github-stat.tsx b/docs/components/github-stat.tsx index a04ebde0..a6b7e6ae 100644 --- a/docs/components/github-stat.tsx +++ b/docs/components/github-stat.tsx @@ -1,35 +1,35 @@ export function GithubStat({ stars }: { stars: string | null }) { - return ( - - -
- - - - Star on GitHub -
-
- - - {stars} - -
- - ); + return ( + + +
+ + + + Star on GitHub +
+
+ + + {stars} + +
+ + ); } diff --git a/docs/components/icons.tsx b/docs/components/icons.tsx index 56c3c66f..6bdfcd25 100644 --- a/docs/components/icons.tsx +++ b/docs/components/icons.tsx @@ -186,4 +186,29 @@ export const Icons = { > ), + remix: () => ( + + + + + + ), }; diff --git a/docs/components/sidebar-content.tsx b/docs/components/sidebar-content.tsx index 92ce9185..ee044dc6 100644 --- a/docs/components/sidebar-content.tsx +++ b/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, diff --git a/docs/content/docs/basic-usage.mdx b/docs/content/docs/basic-usage.mdx index 4ebc9c02..9d885291 100644 --- a/docs/content/docs/basic-usage.mdx +++ b/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 }) ``` + + ```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 }) + } + ``` + ```astro title="index.astro" --- diff --git a/docs/content/docs/installation.mdx b/docs/content/docs/installation.mdx index b8977a39..ed317b7a 100644 --- a/docs/content/docs/installation.mdx +++ b/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. - + ```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); ``` + + ```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); + } + ``` + ```ts title="/server/api/auth/[...all].ts" import { auth } from "~/utils/auth"; // path to your auth file diff --git a/docs/content/docs/integrations/remix.mdx b/docs/content/docs/integrations/remix.mdx new file mode 100644 index 00000000..3e58db2d --- /dev/null +++ b/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. + + +Make sure to export the auth instance with the variable name `auth` or as a `default` export. + + +```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) +} +``` + + + You can change the path on your better-auth configuration but it's recommended to keep it as `routes/api.auth.$.ts` + + +## 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 ( +
+

+ Sign Up +

+
+ setName(e.target.value)} + placeholder="Name" + /> + setEmail(e.target.value)} + placeholder="Email" + /> + setPassword(e.target.value)} + placeholder="Password" + /> + +
+
+ ) +} + +``` + +#### 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 ( +
+

+ Sign In +

+
+ setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+
+ ) +} +```