@better-auth-ui/solid 1.6.19

package/dist/server.d.ts

@@ -0,0 +1,7 @@
+export type * from './lib/auth-server';
+export * from './queries/api-key/list-api-keys-query';
+export * from './queries/multi-session/list-device-sessions-query';
+export * from './queries/passkey/list-passkeys-query';
+export * from './queries/settings/account-info-query';
+export * from './queries/settings/list-accounts-query';
+export * from './server/queries/auth/session-query';

package/dist/server.js

@@ -0,0 +1,7 @@
+import { ensureListApiKeys as e, fetchListApiKeys as t, listApiKeysOptions as n, prefetchListApiKeys as r, useListApiKeys as i } from "./queries/api-key/list-api-keys-query.js";
+import { ensureListDeviceSessions as a, fetchListDeviceSessions as o, listDeviceSessionsOptions as s, prefetchListDeviceSessions as c, useListDeviceSessions as l } from "./queries/multi-session/list-device-sessions-query.js";
+import { ensureListPasskeys as u, fetchListPasskeys as d, listPasskeysOptions as f, prefetchListPasskeys as p, useListPasskeys as m } from "./queries/passkey/list-passkeys-query.js";
+import { accountInfoOptions as h, ensureAccountInfo as g, fetchAccountInfo as _, prefetchAccountInfo as v, useAccountInfo as y } from "./queries/settings/account-info-query.js";
+import { ensureListAccounts as b, fetchListAccounts as x, listAccountsOptions as S, prefetchListAccounts as C, useListAccounts as w } from "./queries/settings/list-accounts-query.js";
+import { ensureSession as T, fetchSession as E, prefetchSession as D, sessionOptions as O } from "./server/queries/auth/session-query.js";
+export { h as accountInfoOptions, g as ensureAccountInfo, b as ensureListAccounts, e as ensureListApiKeys, a as ensureListDeviceSessions, u as ensureListPasskeys, T as ensureSession, _ as fetchAccountInfo, x as fetchListAccounts, t as fetchListApiKeys, o as fetchListDeviceSessions, d as fetchListPasskeys, E as fetchSession, S as listAccountsOptions, n as listApiKeysOptions, s as listDeviceSessionsOptions, f as listPasskeysOptions, v as prefetchAccountInfo, C as prefetchListAccounts, r as prefetchListApiKeys, c as prefetchListDeviceSessions, p as prefetchListPasskeys, D as prefetchSession, O as sessionOptions, y as useAccountInfo, w as useListAccounts, i as useListApiKeys, l as useListDeviceSessions, m as useListPasskeys };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@better-auth-ui/solid",
+  "version": "1.6.19",
+  "type": "module",
+  "scripts": {
+    "build": "vite build && vite build --config vite.email.config.ts",
+    "dev": "tsc --watch",
+    "test": "vitest"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./email": {
+      "types": "./dist/email.d.ts",
+      "import": "./dist/email.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./plugins": {
+      "types": "./dist/plugins.d.ts",
+      "import": "./dist/plugins.js"
+    }
+  },
+  "devDependencies": {
+    "@better-auth/api-key": "^1.6.9",
+    "@better-auth/passkey": "^1.6.10",
+    "@solidjs-email/main": "^2.0.0",
+    "@tanstack/solid-query": "^5.100.9",
+    "better-auth": "^1.6.11",
+    "solid-js": "^1.9.12",
+    "vite-plugin-solid": "^2.11.8",
+    "vitest": "^4.1.5",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "@better-auth-ui/core": "*",
+    "@better-auth/api-key": ">=1.6.9",
+    "@better-auth/passkey": ">=1.6.10",
+    "@solidjs-email/main": ">=2.0.0",
+    "@tanstack/solid-query": ">=5.100.9",
+    "better-auth": ">=1.6.11",
+    "solid-js": ">=1.9.12",
+    "zod": ">=4.4.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/better-auth-ui/better-auth-ui",
+    "directory": "packages/solid"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/auth/email/email-changed.tsx

@@ -0,0 +1,305 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text
+} from "@solidjs-email/main"
+import type { JSX } from "solid-js"
+import { Show } from "solid-js"
+import {
+  type EmailClassNames,
+  type EmailColors,
+  EmailStyles
+} from "./email-styles"
+
+function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ")
+}
+
+const emailChangedEmailLocalization = {
+  YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
+  LOGO: "Logo",
+  EMAIL_ADDRESS_CHANGED: "Email address changed",
+  EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED:
+    "The email address for your {appName} account has been changed.",
+  PREVIOUS_EMAIL: "Previous email:",
+  NEW_EMAIL: "New email:",
+  IF_YOU_MADE_THIS_CHANGE:
+    "If you made this change, you can safely ignore this email.",
+  I_DIDNT_MAKE_THIS_CHANGE: "I didn't make this change",
+  EMAIL_SENT_BY: "Email sent by {appName}.",
+  IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE:
+    "If you didn't authorize this change, please contact support immediately {supportEmail} to secure your account.",
+  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+}
+
+export type EmailChangedEmailLocalization = typeof emailChangedEmailLocalization
+
+export interface EmailChangedEmailProps {
+  oldEmail?: string
+  newEmail?: string
+  revertURL?: string
+  appName?: string
+  supportEmail?: string
+  logoURL?: string | { light: string; dark: string }
+  classNames?: EmailClassNames
+  colors?: EmailColors
+  poweredBy?: boolean
+  darkMode?: boolean
+  head?: JSX.Element
+  localization?: Partial<EmailChangedEmailLocalization>
+}
+
+function cleanSentence(value: string) {
+  return value.replace(/\s{2,}/g, " ").replace(" .", ".")
+}
+
+export function EmailChangedEmail(props: EmailChangedEmailProps) {
+  const darkMode = () => props.darkMode ?? true
+  const localization = () => ({
+    ...EmailChangedEmail.localization,
+    ...props.localization
+  })
+  const accountText = () =>
+    cleanSentence(
+      localization().EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED.replace(
+        "{appName}",
+        props.appName || ""
+      )
+    )
+  const supportText = () =>
+    cleanSentence(
+      localization().IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.replace(
+        "{supportEmail}",
+        props.supportEmail || ""
+      )
+    )
+
+  return (
+    <Html>
+      <Head>
+        <meta content="light dark" name="color-scheme" />
+        <meta content="light dark" name="supported-color-schemes" />
+        <EmailStyles colors={props.colors} darkMode={darkMode()} />
+        {props.head}
+      </Head>
+
+      <Preview>{localization().YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED}</Preview>
+
+      <Tailwind>
+        <Body
+          class={cn("bg-background", props.classNames?.body)}
+          style={{ "font-family": "Arial, Helvetica, sans-serif" }}
+        >
+          <Container
+            class={cn(
+              "mx-auto my-auto max-w-xl px-2 py-10",
+              props.classNames?.container
+            )}
+          >
+            <Section
+              class={cn(
+                "rounded-none border border-border bg-card p-8 text-card-foreground",
+                props.classNames?.card
+              )}
+            >
+              {props.logoURL &&
+                (typeof props.logoURL === "string" ? (
+                  <Img
+                    alt={props.appName || localization().LOGO}
+                    class={cn("mx-auto mb-8", props.classNames?.logo)}
+                    height={48}
+                    src={props.logoURL}
+                    width={48}
+                  />
+                ) : (
+                  <>
+                    <Img
+                      alt={props.appName || localization().LOGO}
+                      class={cn(
+                        "logo-light mx-auto mb-8",
+                        props.classNames?.logo
+                      )}
+                      height={48}
+                      src={props.logoURL.light}
+                      width={48}
+                    />
+                    <Img
+                      alt={props.appName || localization().LOGO}
+                      class={cn(
+                        "logo-dark hidden mx-auto mb-8",
+                        props.classNames?.logo
+                      )}
+                      height={48}
+                      src={props.logoURL.dark}
+                      width={48}
+                    />
+                  </>
+                ))}
+
+              <Heading
+                class={cn(
+                  "m-0 mb-5 font-semibold text-2xl",
+                  props.classNames?.title
+                )}
+              >
+                {localization().EMAIL_ADDRESS_CHANGED}
+              </Heading>
+
+              <Text
+                class={cn("font-normal text-sm", props.classNames?.content)}
+              >
+                {accountText()}
+              </Text>
+
+              <Show when={props.oldEmail || props.newEmail}>
+                <Section
+                  class={cn(
+                    "my-6 border border-border bg-muted p-4",
+                    props.classNames?.codeBlock
+                  )}
+                >
+                  <Show when={props.oldEmail}>
+                    {(oldEmail) => (
+                      <>
+                        <Text
+                          class={cn(
+                            "m-0 mb-2 text-muted-foreground text-xs",
+                            props.classNames?.description
+                          )}
+                        >
+                          {localization().PREVIOUS_EMAIL}
+                        </Text>
+                        <Text
+                          class={cn(
+                            "m-0 mb-4 font-semibold text-sm",
+                            props.classNames?.content
+                          )}
+                        >
+                          {oldEmail()}
+                        </Text>
+                      </>
+                    )}
+                  </Show>
+
+                  <Show when={props.newEmail}>
+                    {(newEmail) => (
+                      <>
+                        <Text
+                          class={cn(
+                            "m-0 mb-2 text-muted-foreground text-xs",
+                            props.classNames?.description
+                          )}
+                        >
+                          {localization().NEW_EMAIL}
+                        </Text>
+                        <Text
+                          class={cn(
+                            "m-0 font-semibold text-primary text-sm",
+                            props.classNames?.content
+                          )}
+                        >
+                          {newEmail()}
+                        </Text>
+                      </>
+                    )}
+                  </Show>
+                </Section>
+              </Show>
+
+              <Text
+                class={cn("font-normal text-sm", props.classNames?.content)}
+              >
+                {localization().IF_YOU_MADE_THIS_CHANGE}
+              </Text>
+
+              <Show when={props.revertURL}>
+                {(revertURL) => (
+                  <Section class="my-6">
+                    <Button
+                      class={cn(
+                        "inline-block whitespace-nowrap rounded-none bg-primary px-6 py-2.5 font-medium text-primary-foreground text-sm no-underline",
+                        props.classNames?.button
+                      )}
+                      href={revertURL()}
+                    >
+                      {localization().I_DIDNT_MAKE_THIS_CHANGE}
+                    </Button>
+                  </Section>
+                )}
+              </Show>
+
+              <Hr
+                class={cn(
+                  "my-6 w-full border border-border border-solid",
+                  props.classNames?.separator
+                )}
+              />
+
+              <Show when={props.appName}>
+                {(appName) => (
+                  <Text
+                    class={cn(
+                      "mb-3 text-muted-foreground text-xs",
+                      props.classNames?.description
+                    )}
+                  >
+                    {localization().EMAIL_SENT_BY.replace(
+                      "{appName}",
+                      appName()
+                    )}
+                  </Text>
+                )}
+              </Show>
+
+              <Text
+                class={cn(
+                  "mt-3 text-muted-foreground text-xs",
+                  props.classNames?.description
+                )}
+              >
+                {supportText()}
+              </Text>
+
+              <Show when={props.poweredBy}>
+                <Text
+                  class={cn(
+                    "mt-4 mb-0 text-center text-[11px] text-muted-foreground",
+                    props.classNames?.poweredBy
+                  )}
+                >
+                  {localization().POWERED_BY_BETTER_AUTH.replace(
+                    "{betterAuth}",
+                    "better-auth"
+                  )}
+                </Text>
+              </Show>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}
+
+EmailChangedEmail.localization = emailChangedEmailLocalization
+
+EmailChangedEmail.PreviewProps = {
+  oldEmail: "old@example.com",
+  newEmail: "new@example.com",
+  supportEmail: "support@example.com",
+  revertURL: "https://better-auth-ui.com/auth/revert-email?token=example-token",
+  appName: "Better Auth",
+  poweredBy: true,
+  darkMode: true
+} satisfies EmailChangedEmailProps
+
+export default EmailChangedEmail

package/src/components/auth/email/email-styles.tsx

@@ -0,0 +1,139 @@
+export const defaultColors = {
+  light: {
+    background: "#F5F5F5",
+    border: "#E5E5E5",
+    card: "#FFFFFF",
+    cardForeground: "#0A0A0A",
+    foreground: "#262626",
+    muted: "#F5F5F5",
+    mutedForeground: "#737373",
+    primary: "#171717",
+    primaryForeground: "#FAFAFA"
+  },
+  dark: {
+    background: "#0A0A0A",
+    border: "#2E2E2E",
+    card: "#171717",
+    cardForeground: "#FAFAFA",
+    foreground: "#D4D4D4",
+    muted: "#212121",
+    mutedForeground: "#A1A1A1",
+    primary: "#E5E5E5",
+    primaryForeground: "#171717"
+  }
+}
+
+export type EmailClassNames = {
+  body?: string
+  container?: string
+  card?: string
+  logo?: string
+  title?: string
+  content?: string
+  button?: string
+  description?: string
+  separator?: string
+  link?: string
+  poweredBy?: string
+  codeBlock?: string
+}
+
+export type EmailColors = {
+  light?: Partial<typeof defaultColors.light>
+  dark?: Partial<typeof defaultColors.dark>
+}
+
+type EmailStylesProps = {
+  colors?: EmailColors
+  darkMode?: boolean
+}
+
+export function EmailStyles(props: EmailStylesProps) {
+  const darkMode = () => props.darkMode ?? true
+
+  return (
+    <style type="text/css">{`
+      .font-sans {
+        font-family: Arial, Helvetica, sans-serif !important;
+      }
+      .bg-background {
+        background-color: ${props.colors?.light?.background || defaultColors.light.background} !important;
+      }
+      .bg-card {
+        background-color: ${props.colors?.light?.card || defaultColors.light.card} !important;
+      }
+      .bg-primary {
+        background-color: ${props.colors?.light?.primary || defaultColors.light.primary} !important;
+      }
+      .bg-muted {
+        background-color: ${props.colors?.light?.muted || defaultColors.light.muted} !important;
+      }
+      .border-border {
+        border-color: ${props.colors?.light?.border || defaultColors.light.border} !important;
+      }
+      .text-card-foreground {
+        color: ${props.colors?.light?.cardForeground || defaultColors.light.cardForeground} !important;
+      }
+      .text-muted-foreground {
+        color: ${props.colors?.light?.mutedForeground || defaultColors.light.mutedForeground} !important;
+      }
+      .text-primary {
+        color: ${props.colors?.light?.primary || defaultColors.light.primary} !important;
+      }
+      .text-primary-foreground {
+        color: ${props.colors?.light?.primaryForeground || defaultColors.light.primaryForeground} !important;
+      }
+      .logo-dark {
+        display: none !important;
+      }
+      .logo-light {
+        display: block !important;
+      }
+
+      ${
+        darkMode()
+          ? `@media (prefers-color-scheme: dark) {
+        .bg-background {
+          background-color: ${props.colors?.dark?.background || defaultColors.dark.background} !important;
+        }
+        .bg-card {
+          background-color: ${props.colors?.dark?.card || defaultColors.dark.card} !important;
+        }
+        .bg-primary {
+          background-color: ${props.colors?.dark?.primary || defaultColors.dark.primary} !important;
+        }
+        .bg-muted {
+          background-color: ${props.colors?.dark?.muted || defaultColors.dark.muted} !important;
+        }
+        .border-border {
+          border-color: ${props.colors?.dark?.border || defaultColors.dark.border} !important;
+        }
+        .text-card-foreground {
+          color: ${props.colors?.dark?.cardForeground || defaultColors.dark.cardForeground} !important;
+        }
+        .text-muted-foreground {
+          color: ${props.colors?.dark?.mutedForeground || defaultColors.dark.mutedForeground} !important;
+        }
+        .text-primary {
+          color: ${props.colors?.dark?.primary || defaultColors.dark.primary} !important;
+        }
+        .text-primary-foreground {
+          color: ${props.colors?.dark?.primaryForeground || defaultColors.dark.primaryForeground} !important;
+        }
+        .logo-dark {
+          display: block !important;
+        }
+        .logo-light {
+          display: none !important;
+        }
+        * {
+          box-shadow: none !important;
+        }
+      }`
+          : ""
+      }
+    `}</style>
+  )
+}
+
+export default EmailStyles