require site url in cross domain plugin, improve react example

Author: erquhart

docs/app/page.tsx

@@ -664,11 +664,15 @@ export default function Home() {
                     type AuthFunctions,
                   } from "@convex-dev/better-auth";
                   import { convex, crossDomain } from "@convex-dev/better-auth/plugins";
+                  import { requireEnv } from "@convex-dev/better-auth/utils";
                   import { betterAuth } from "better-auth";
                   import { api, components, internal } from "./_generated/api";
                   import { query, type GenericCtx } from "./_generated/server";
                   import type { Id, DataModel } from "./_generated/dataModel";
 
+                  // You'll want to replace this with an environment variable
+                  const siteUrl = "http://localhost:5173";
+
                   // Typesafe way to pass Convex functions defined in this file
                   const authFunctions: AuthFunctions = internal.auth;
 
@@ -683,6 +687,7 @@ export default function Home() {
                   export const createAuth = (ctx: GenericCtx) =>
                     // Configure your Better Auth instance here
                     betterAuth({
+                      trustedOrigins: [siteUrl],
                       database: convexAdapter(ctx, betterAuthComponent),
 
                       // Simple non-verified email/password to get started
@@ -696,7 +701,7 @@ export default function Home() {
 
                         // The cross domain plugin is required for client side frameworks
                         crossDomain({
-                          siteUrl: "http://localhost:5173",
+                          siteUrl,
                         }),
                       ],
                     });

examples/next/convex/auth.ts

@@ -8,8 +8,12 @@ import { convex } from "@convex-dev/better-auth/plugins";
 import { api, components, internal } from "./_generated/api";
 import { twoFactor } from "better-auth/plugins";
 import { emailOTP } from "better-auth/plugins";
-import { sendMagicLink, sendOTPVerification } from "./email";
-import { sendEmailVerification, sendResetPassword } from "./email";
+import {
+  sendMagicLink,
+  sendOTPVerification,
+  sendEmailVerification,
+  sendResetPassword,
+} from "./email";
 import { magicLink } from "better-auth/plugins";
 import { betterAuth } from "better-auth";
 import { GenericCtx, query } from "./_generated/server";

examples/react/convex/_generated/api.d.ts

@@ -9,6 +9,12 @@
  */
 
 import type * as auth from "../auth.js";
+import type * as email from "../email.js";
+import type * as emails_components_BaseEmail from "../emails/components/BaseEmail.js";
+import type * as emails_magicLink from "../emails/magicLink.js";
+import type * as emails_resetPassword from "../emails/resetPassword.js";
+import type * as emails_verifyEmail from "../emails/verifyEmail.js";
+import type * as emails_verifyOTP from "../emails/verifyOTP.js";
 import type * as http from "../http.js";
 import type * as todos from "../todos.js";
 import type * as util from "../util.js";
@@ -29,6 +35,12 @@ import type {
  */
 declare const fullApi: ApiFromModules<{
   auth: typeof auth;
+  email: typeof email;
+  "emails/components/BaseEmail": typeof emails_components_BaseEmail;
+  "emails/magicLink": typeof emails_magicLink;
+  "emails/resetPassword": typeof emails_resetPassword;
+  "emails/verifyEmail": typeof emails_verifyEmail;
+  "emails/verifyOTP": typeof emails_verifyOTP;
   http: typeof http;
   todos: typeof todos;
   util: typeof util;
@@ -54,14 +66,17 @@ export declare const components: {
           input:
             | {
                 createdAt: number;
+                displayUsername?: string;
                 email: string;
                 emailVerified: boolean;
                 image?: string;
+                isAnonymous?: boolean;
                 name: string;
                 table: string;
                 twoFactorEnabled?: boolean;
                 updatedAt: number;
-                userId: string;
+                userId?: string;
+                username?: string;
               }
             | {
                 createdAt: number;
@@ -88,12 +103,6 @@ export declare const components: {
                 updatedAt: number;
                 userId: string;
               }
-            | {
-                backupCodes: string;
-                secret: string;
-                table: string;
-                userId: string;
-              }
             | {
                 createdAt?: number;
                 expiresAt: number;
@@ -102,12 +111,23 @@ export declare const components: {
                 updatedAt?: number;
                 value: string;
               }
+            | {
+                backupCodes: string;
+                secret: string;
+                table: string;
+                userId: string;
+              }
             | {
                 createdAt: number;
-                id?: string;
                 privateKey: string;
                 publicKey: string;
                 table: string;
+              }
+            | {
+                count?: number;
+                key?: string;
+                lastRequest?: number;
+                table: string;
               };
         },
         any
@@ -158,6 +178,12 @@ export declare const components: {
         { expiresAt: number; userId: string },
         any
       >;
+      deleteIn: FunctionReference<
+        "mutation",
+        "internal",
+        { input: { field: "token"; table: "session"; values: Array<string> } },
+        any
+      >;
       deleteOldVerifications: FunctionReference<
         "action",
         "internal",
@@ -186,12 +212,6 @@ export declare const components: {
         { accountId: string; providerId: string },
         any
       >;
-      getAccountsByUserId: FunctionReference<
-        "query",
-        "internal",
-        { limit?: number; userId: string },
-        any
-      >;
       getBy: FunctionReference<
         "query",
         "internal",
@@ -227,11 +247,41 @@ export declare const components: {
         any
       >;
       getCurrentSession: FunctionReference<"query", "internal", {}, any>;
+      getIn: FunctionReference<
+        "query",
+        "internal",
+        {
+          input:
+            | { field: "token"; table: "session"; values: Array<string> }
+            | { field: "userId"; table: "user"; values: Array<string> };
+        },
+        any
+      >;
       getJwks: FunctionReference<"query", "internal", { limit?: number }, any>;
-      getSessionsByUserId: FunctionReference<
+      listBy: FunctionReference<
         "query",
         "internal",
-        { limit?: number; userId: string },
+        {
+          input:
+            | {
+                field: "accountId" | "userId";
+                limit?: number;
+                table: "account";
+                value: string;
+              }
+            | {
+                field: "userId";
+                limit?: number;
+                table: "session";
+                value: string;
+              }
+            | {
+                field: "key";
+                limit?: number;
+                table: "rateLimit";
+                value: string;
+              };
+        },
         any
       >;
       listVerificationsByIdentifier: FunctionReference<
@@ -308,12 +358,25 @@ export declare const components: {
         },
         any
       >;
-      updateTwoFactor: FunctionReference<
+      updateMany: FunctionReference<
         "mutation",
         "internal",
         {
-          update: { backupCodes?: string; secret?: string; userId?: string };
-          userId: string;
+          input:
+            | {
+                field: "key";
+                table: "rateLimit";
+                update: { count?: number; key?: string; lastRequest?: number };
+              }
+            | {
+                field: "userId";
+                table: "twoFactor";
+                update: {
+                  backupCodes?: string;
+                  secret?: string;
+                  userId?: string;
+                };
+              };
         },
         any
       >;

examples/react/convex/auth.ts

@@ -10,6 +10,14 @@ import { GenericCtx, query } from "./_generated/server";
 import { requireEnv } from "./util";
 import { Id } from "./_generated/dataModel";
 import { asyncMap } from "convex-helpers";
+import { emailOTP } from "better-auth/plugins";
+import { magicLink } from "better-auth/plugins";
+import {
+  sendMagicLink,
+  sendOTPVerification,
+  sendEmailVerification,
+  sendResetPassword,
+} from "./email";
 
 const authFunctions: AuthFunctions = internal.auth;
 const siteUrl = requireEnv("SITE_URL");
@@ -21,10 +29,25 @@ export const betterAuthComponent = new BetterAuth(components.betterAuth, {
 
 export const createAuth = (ctx: GenericCtx) =>
   betterAuth({
+    trustedOrigins: [siteUrl],
     database: convexAdapter(ctx, betterAuthComponent),
+    emailVerification: {
+      sendVerificationEmail: async ({ user, url }) => {
+        await sendEmailVerification({
+          to: user.email,
+          url,
+        });
+      },
+    },
     emailAndPassword: {
       enabled: true,
       requireEmailVerification: false,
+      sendResetPassword: async ({ user, url }) => {
+        await sendResetPassword({
+          to: user.email,
+          url,
+        });
+      },
     },
     socialProviders: {
       github: {
@@ -37,7 +60,26 @@ export const createAuth = (ctx: GenericCtx) =>
         enabled: true,
       },
     },
-    plugins: [crossDomain({ siteUrl }), convex()],
+    plugins: [
+      magicLink({
+        sendMagicLink: async ({ email, url }) => {
+          await sendMagicLink({
+            to: email,
+            url,
+          });
+        },
+      }),
+      emailOTP({
+        async sendVerificationOTP({ email, otp }) {
+          await sendOTPVerification({
+            to: email,
+            code: otp,
+          });
+        },
+      }),
+      crossDomain({ siteUrl }),
+      convex(),
+    ],
     logger: {
       level: "debug",
     },

examples/react/convex/email.tsx

@@ -0,0 +1,82 @@
+import "./polyfills";
+import { Resend } from "resend";
+import VerifyEmail from "./emails/verifyEmail";
+import MagicLinkEmail from "./emails/magicLink";
+import VerifyOTP from "./emails/verifyOTP";
+import { render } from "@react-email/components";
+import React from "react";
+import ResetPasswordEmail from "./emails/resetPassword";
+
+const sendEmail = async ({
+  to,
+  subject,
+  html,
+}: {
+  to: string;
+  subject: string;
+  html: string;
+}) => {
+  const resend = new Resend(process.env.RESEND_API_KEY);
+  await resend.emails.send({
+    from: "Test <[email protected]>",
+    to: [to],
+    subject,
+    html,
+  });
+};
+
+export const sendEmailVerification = async ({
+  to,
+  url,
+}: {
+  to: string;
+  url: string;
+}) => {
+  await sendEmail({
+    to,
+    subject: "Verify your email address",
+    html: await render(<VerifyEmail url={url} />),
+  });
+};
+
+export const sendOTPVerification = async ({
+  to,
+  code,
+}: {
+  to: string;
+  code: string;
+}) => {
+  await sendEmail({
+    to,
+    subject: "Verify your email address",
+    html: await render(<VerifyOTP code={code} />),
+  });
+};
+
+export const sendMagicLink = async ({
+  to,
+  url,
+}: {
+  to: string;
+  url: string;
+}) => {
+  await sendEmail({
+    to,
+    subject: "Sign in to your account",
+    html: await render(<MagicLinkEmail url={url} />),
+  });
+};
+
+export const sendResetPassword = async ({
+  to,
+  url,
+}: {
+  to: string;
+  url: string;
+}) => {
+  await sendEmail({
+    to,
+    subject: "Reset your password",
+    html: await render(<ResetPasswordEmail url={url} />),
+  });
+};