npm - @better-auth-ui/solid - Versions diffs - 1.6.19 - Mend

@better-auth-ui/solid 1.6.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (270) hide show

package/src/components/auth/email/reset-password.tsx ADDED Viewed

@@ -0,0 +1,250 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  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 resetPasswordEmailLocalization = {
+  RESET_YOUR_PASSWORD: "Reset your password",
+  LOGO: "Logo",
+  WE_RECEIVED_REQUEST_TO_RESET_PASSWORD:
+    "We received a request to reset the password for your {appName} account {email}.",
+  RESET_PASSWORD: "Reset password",
+  OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+  THIS_LINK_EXPIRES_IN_MINUTES:
+    "This link expires in {expirationMinutes} minutes.",
+  EMAIL_SENT_BY: "Email sent by {appName}.",
+  IF_YOU_DIDNT_REQUEST_PASSWORD_RESET:
+    "If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged.",
+  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+}
+export type ResetPasswordEmailLocalization =
+  typeof resetPasswordEmailLocalization
+export interface ResetPasswordEmailProps {
+  url: string
+  email?: string
+  appName?: string
+  expirationMinutes?: number
+  logoURL?: string | { light: string; dark: string }
+  classNames?: EmailClassNames
+  colors?: EmailColors
+  poweredBy?: boolean
+  darkMode?: boolean
+  head?: JSX.Element
+  localization?: Partial<ResetPasswordEmailLocalization>
+}
+function cleanSentence(value: string) {
+  return value.replace(/\s{2,}/g, " ").replace(" .", ".")
+}
+export function ResetPasswordEmail(props: ResetPasswordEmailProps) {
+  const expirationMinutes = () => props.expirationMinutes ?? 60
+  const darkMode = () => props.darkMode ?? true
+  const localization = () => ({
+    ...ResetPasswordEmail.localization,
+    ...props.localization
+  })
+  const requestText = () =>
+    cleanSentence(
+      localization()
+        .WE_RECEIVED_REQUEST_TO_RESET_PASSWORD.replace(
+          "{appName}",
+          props.appName || ""
+        )
+        .replace("{email}", props.email || "")
+    )
+  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().RESET_YOUR_PASSWORD}</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().RESET_YOUR_PASSWORD}
+              </Heading>
+              <Text class={cn("text-sm", props.classNames?.content)}>
+                {requestText()}
+              </Text>
+              <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={props.url}
+                >
+                  {localization().RESET_PASSWORD}
+                </Button>
+              </Section>
+              <Text
+                class={cn(
+                  "m-0 mb-3 text-muted-foreground text-xs",
+                  props.classNames?.description
+                )}
+              >
+                {localization().OR_COPY_AND_PASTE_URL}
+              </Text>
+              <Link
+                class={cn(
+                  "break-all text-primary text-xs",
+                  props.classNames?.link
+                )}
+                href={props.url}
+              >
+                {props.url}
+              </Link>
+              <Hr
+                class={cn(
+                  "my-6 w-full border border-border border-solid",
+                  props.classNames?.separator
+                )}
+              />
+              <Text
+                class={cn(
+                  "m-0 mb-3 text-muted-foreground text-xs",
+                  props.classNames?.description
+                )}
+              >
+                {localization().THIS_LINK_EXPIRES_IN_MINUTES.replace(
+                  "{expirationMinutes}",
+                  expirationMinutes().toString()
+                )}
+                <Show when={props.appName}>
+                  {(appName) =>
+                    ` ${localization().EMAIL_SENT_BY.replace("{appName}", appName())}`
+                  }
+                </Show>
+              </Text>
+              <Text
+                class={cn(
+                  "m-0 text-muted-foreground text-xs",
+                  props.classNames?.description
+                )}
+              >
+                {localization().IF_YOU_DIDNT_REQUEST_PASSWORD_RESET}
+              </Text>
+              <Show when={props.poweredBy}>
+                <Text
+                  class={cn(
+                    "m-0 mt-4 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>
+  )
+}
+ResetPasswordEmail.localization = resetPasswordEmailLocalization
+ResetPasswordEmail.PreviewProps = {
+  url: "https://better-auth-ui.com/auth/reset-password?token=example-token",
+  email: "m@example.com",
+  appName: "Better Auth",
+  darkMode: true
+} satisfies ResetPasswordEmailProps
+export default ResetPasswordEmail

package/src/email.ts ADDED Viewed

@@ -0,0 +1,49 @@
+export type {
+  EmailChangedEmailLocalization,
+  EmailChangedEmailProps
+} from "./components/auth/email/email-changed.js"
+export { default as EmailChangedEmail } from "./components/auth/email/email-changed.js"
+export type {
+  EmailClassNames,
+  EmailColors
+} from "./components/auth/email/email-styles.js"
+export {
+  default as EmailStyles,
+  defaultColors
+} from "./components/auth/email/email-styles.js"
+export type {
+  EmailVerificationEmailLocalization,
+  EmailVerificationEmailProps
+} from "./components/auth/email/email-verification.js"
+export { default as EmailVerificationEmail } from "./components/auth/email/email-verification.js"
+export type {
+  MagicLinkEmailLocalization,
+  MagicLinkEmailProps
+} from "./components/auth/email/magic-link.js"
+export { default as MagicLinkEmail } from "./components/auth/email/magic-link.js"
+export type {
+  DeviceInfo,
+  NewDeviceEmailLocalization,
+  NewDeviceEmailProps
+} from "./components/auth/email/new-device.js"
+export { default as NewDeviceEmail } from "./components/auth/email/new-device.js"
+export type {
+  OrganizationInvitationEmailLocalization,
+  OrganizationInvitationEmailProps
+} from "./components/auth/email/organization-invitation.js"
+export { default as OrganizationInvitationEmail } from "./components/auth/email/organization-invitation.js"
+export type {
+  OtpEmailEmailLocalization,
+  OtpEmailProps
+} from "./components/auth/email/otp-email.js"
+export { default as OtpEmail } from "./components/auth/email/otp-email.js"
+export type {
+  PasswordChangedEmailLocalization,
+  PasswordChangedEmailProps
+} from "./components/auth/email/password-changed.js"
+export { default as PasswordChangedEmail } from "./components/auth/email/password-changed.js"
+export type {
+  ResetPasswordEmailLocalization,
+  ResetPasswordEmailProps
+} from "./components/auth/email/reset-password.js"
+export { default as ResetPasswordEmail } from "./components/auth/email/reset-password.js"

package/src/hooks/auth/use-authenticate.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { createEffect } from "solid-js"
+import { isServer } from "solid-js/web"
+import type { AuthClient } from "../../lib/auth-client"
+import { useAuth } from "../../lib/auth-provider"
+import {
+  type UseSessionOptions,
+  useSession
+} from "../../queries/auth/session-query"
+export function useAuthenticate<TAuthClient extends AuthClient>(
+  authClient: TAuthClient,
+  options?: UseSessionOptions<TAuthClient>
+) {
+  const config = useAuth()
+  const session = useSession(authClient, options)
+  createEffect(() => {
+    if (session.data || session.isPending) return
+    const currentURL = isServer
+      ? "/"
+      : window.location.pathname + window.location.search
+    const redirectTo = encodeURIComponent(currentURL)
+    const signInPath = `${config.basePaths.auth}/${config.viewPaths.auth.signIn}?redirectTo=${redirectTo}`
+    config.navigate({ to: signInPath, replace: true })
+  })
+  return session
+}

package/src/hooks/auth/use-sign-out.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { authMutationKeys, authQueryKeys } from "@better-auth-ui/core"
+import { createMutation, useQueryClient } from "@tanstack/solid-query"
+import type { AuthClient } from "../../lib/auth-client"
+export function useSignOut<TAuthClient extends AuthClient>(
+  authClient: TAuthClient
+) {
+  const queryClient = useQueryClient()
+  return createMutation(() => ({
+    mutationKey: authMutationKeys.signOut,
+    mutationFn: async () => {
+      await authClient.signOut({
+        fetchOptions: { throw: true }
+      })
+    },
+    onSuccess: () => {
+      queryClient.removeQueries({
+        queryKey: authQueryKeys.all
+      })
+    }
+  }))
+}

package/src/hooks/auth/use-user.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseSessionOptions,
+  useSession
+} from "../../queries/auth/session-query"
+export function useUser<TAuthClient extends AuthClient>(
+  authClient: TAuthClient,
+  options?: UseSessionOptions<TAuthClient>
+) {
+  const session = useSession(authClient, options)
+  return {
+    ...session,
+    get data() {
+      return session.data?.user
+    }
+  }
+}

package/src/hooks/use-auth-mutation.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import {
+  type CreateMutationOptions,
+  createMutation,
+  type MutationKey
+} from "@tanstack/solid-query"
+import type { BetterFetchError } from "better-auth/client"
+import {
+  type AuthMutationFn,
+  type AuthMutationFnData,
+  type AuthMutationFnVariables,
+  authMutationOptions
+} from "../mutations/auth-mutation-options"
+type UseAuthMutationOptions<TFn extends AuthMutationFn> = Omit<
+  CreateMutationOptions<
+    AuthMutationFnData<TFn>,
+    BetterFetchError,
+    AuthMutationFnVariables<TFn>
+  >,
+  "mutationKey" | "mutationFn"
+>
+export function useAuthMutation<
+  TFn extends AuthMutationFn,
+  const TMutationKey extends MutationKey
+>(
+  authFn: TFn,
+  mutationKey: TMutationKey,
+  options?: UseAuthMutationOptions<TFn>
+) {
+  return createMutation(() => ({
+    ...authMutationOptions(authFn, mutationKey),
+    ...options
+  }))
+}

package/src/hooks/use-auth-query.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { createQuery, type QueryKey } from "@tanstack/solid-query"
+import {
+  type AuthQueryFn,
+  type AuthQueryOptions,
+  authQueryOptions
+} from "../queries/auth-query-options"
+type UseAuthQueryOptions<
+  TFn extends AuthQueryFn,
+  TPrefix extends QueryKey
+> = Omit<AuthQueryOptions<TFn, TPrefix>, "queryKey" | "queryFn"> &
+  Pick<NonNullable<Parameters<TFn>[0]>, "query" | "fetchOptions">
+export function useAuthQuery<
+  TFn extends AuthQueryFn,
+  const TQueryKey extends QueryKey
+>(
+  authFn: TFn,
+  queryKey: TQueryKey,
+  options?: UseAuthQueryOptions<TFn, TQueryKey>
+) {
+  return createQuery(() => {
+    const { query, fetchOptions, ...queryOptions } = options ?? {}
+    return {
+      ...authQueryOptions(authFn, queryKey, {
+        query,
+        fetchOptions
+      } as Parameters<TFn>[0]),
+      ...queryOptions
+    }
+  })
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,48 @@
+export { createAuthClient } from "better-auth/solid"
+export * from "./hooks/auth/use-authenticate"
+export * from "./hooks/auth/use-sign-out"
+export * from "./hooks/auth/use-user"
+export * from "./hooks/use-auth-mutation"
+export * from "./hooks/use-auth-query"
+export type * from "./lib/auth-client"
+export * from "./lib/auth-config"
+export * from "./lib/auth-provider"
+export * from "./lib/auth-utils"
+export * from "./lib/fetch-options-provider"
+export * from "./lib/mutation-invalidator"
+export * from "./lib/provider-icons"
+export * from "./mutations/api-key/create-api-key-mutation"
+export * from "./mutations/api-key/delete-api-key-mutation"
+export * from "./mutations/auth/request-password-reset-mutation"
+export * from "./mutations/auth/reset-password-mutation"
+export * from "./mutations/auth/send-verification-email-mutation"
+export * from "./mutations/auth/sign-in-email-mutation"
+export * from "./mutations/auth/sign-in-social-mutation"
+export * from "./mutations/auth/sign-out-mutation"
+export * from "./mutations/auth/sign-up-email-mutation"
+export * from "./mutations/auth-mutation-options"
+export * from "./mutations/magic-link/sign-in-magic-link-mutation"
+export * from "./mutations/multi-session/revoke-multi-session-mutation"
+export * from "./mutations/multi-session/set-active-session-mutation"
+export * from "./mutations/organization"
+export * from "./mutations/passkey/add-passkey-mutation"
+export * from "./mutations/passkey/delete-passkey-mutation"
+export * from "./mutations/passkey/sign-in-passkey-mutation"
+export * from "./mutations/settings/change-email-mutation"
+export * from "./mutations/settings/change-password-mutation"
+export * from "./mutations/settings/delete-user-mutation"
+export * from "./mutations/settings/link-social-mutation"
+export * from "./mutations/settings/revoke-session-mutation"
+export * from "./mutations/settings/unlink-account-mutation"
+export * from "./mutations/settings/update-user-mutation"
+export * from "./mutations/username/is-username-available-mutation"
+export * from "./mutations/username/sign-in-username-mutation"
+export * from "./queries/api-key/list-api-keys-query"
+export * from "./queries/auth/session-query"
+export * from "./queries/auth-query-options"
+export * from "./queries/multi-session/list-device-sessions-query"
+export * from "./queries/organization"
+export * from "./queries/passkey/list-passkeys-query"
+export * from "./queries/settings/account-info-query"
+export * from "./queries/settings/list-accounts-query"
+export * from "./queries/settings/list-sessions-query"

package/src/lib/auth-client.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import type { apiKeyClient } from "@better-auth/api-key/client"
+import type { passkeyClient } from "@better-auth/passkey/client"
+import type {
+  magicLinkClient,
+  multiSessionClient,
+  organizationClient,
+  usernameClient
+} from "better-auth/client/plugins"
+import type { createAuthClient } from "better-auth/solid"
+export type AuthClient = ReturnType<typeof createAuthClient>
+export type MagicLinkAuthClient = ReturnType<
+  typeof createAuthClient<{ plugins: [ReturnType<typeof magicLinkClient>] }>
+>
+export type MultiSessionAuthClient = ReturnType<
+  typeof createAuthClient<{ plugins: [ReturnType<typeof multiSessionClient>] }>
+>
+export type PasskeyAuthClient = ReturnType<
+  typeof createAuthClient<{ plugins: [ReturnType<typeof passkeyClient>] }>
+>
+export type ApiKeyAuthClient = ReturnType<
+  typeof createAuthClient<{ plugins: [ReturnType<typeof apiKeyClient>] }>
+>
+export type UsernameAuthClient = ReturnType<
+  typeof createAuthClient<{ plugins: [ReturnType<typeof usernameClient>] }>
+>
+export type OrganizationAuthClient = ReturnType<
+  typeof createAuthClient<{
+    plugins: [ReturnType<typeof organizationClient<object>>]
+  }>
+>
+export type InferData<TMethod> = TMethod extends (
+  ...args: infer _Args
+) => Promise<infer TResult extends { data: unknown }>
+  ? TResult["data"]
+  : never

package/src/lib/auth-config.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import {
+  type AuthConfig,
+  type DeepPartial,
+  deepmerge,
+  defaultAuthConfig
+} from "@better-auth-ui/core"
+import type { AuthClient } from "./auth-client"
+import { mergeAdditionalFields, resolveRedirectTo } from "./auth-utils"
+declare module "@better-auth-ui/core" {
+  interface AuthConfig {
+    /** The Solid Better Auth client used by auth context consumers. */
+    authClient: AuthClient
+  }
+}
+export type SolidAuthConfigInput<TAuthClient = AuthClient> =
+  DeepPartial<AuthConfig> & {
+    authClient: TAuthClient
+  }
+export function resolveAuthConfig(
+  config: SolidAuthConfigInput<AuthClient>
+): AuthConfig {
+  const mergedConfig = deepmerge(defaultAuthConfig, {
+    ...config,
+    viewPaths: {
+      auth: {
+        ...defaultAuthConfig.viewPaths.auth,
+        ...config.viewPaths?.auth
+      },
+      settings: {
+        ...defaultAuthConfig.viewPaths.settings,
+        ...config.viewPaths?.settings
+      }
+    }
+  } as AuthConfig)
+  mergedConfig.redirectTo = resolveRedirectTo(mergedConfig.redirectTo)
+  mergedConfig.additionalFields = mergeAdditionalFields(
+    mergedConfig.plugins?.flatMap((plugin) => plugin.additionalFields ?? []),
+    mergedConfig.additionalFields
+  )
+  return mergedConfig as AuthConfig
+}

package/src/lib/auth-plugin.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { AuthPluginBase } from "@better-auth-ui/core"
+import type { Component } from "solid-js"
+export type CaptchaComponent = Component
+export type SolidAuthPlugin = AuthPluginBase & {
+  /** Captcha widget rendered above submit buttons in auth forms. */
+  captchaComponent?: CaptchaComponent
+  /** Allow app-owned copied components to add Solid-specific plugin slots. */
+  [key: string]: unknown
+}
+declare module "@better-auth-ui/core" {
+  interface AuthPluginRegister {
+    solid: SolidAuthPlugin
+  }
+}
+export type { AuthPluginViewPaths } from "@better-auth-ui/core"
+export type AuthPlugin = SolidAuthPlugin

package/src/lib/auth-provider.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+import type { AuthConfig } from "@better-auth-ui/core"
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
+import { createContext, type JSX, useContext } from "solid-js"
+import type { AuthClient } from "./auth-client"
+import { resolveAuthConfig, type SolidAuthConfigInput } from "./auth-config"
+import { FetchOptionsProvider } from "./fetch-options-provider"
+import { MutationInvalidator } from "./mutation-invalidator"
+const AuthContext = createContext<AuthConfig>()
+/** Provider-instance scoped config fallback for SSR — replaces the former module-level global. */
+const RenderingAuthConfigContext = createContext<AuthConfig>()
+const fallbackQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5000
+    }
+  }
+})
+export type AuthProviderProps<TAuthClient = AuthClient> =
+  SolidAuthConfigInput<TAuthClient> & {
+    children?: JSX.Element | (() => JSX.Element)
+    /** TanStack QueryClient to use for your application's queries. */
+    queryClient?: QueryClient
+  }
+const resolveProviderChildren = (children: AuthProviderProps["children"]) =>
+  typeof children === "function" ? children() : children
+export function AuthProvider(props: AuthProviderProps) {
+  const { children, queryClient: qc, ...configInput } = props
+  const config = resolveAuthConfig(configInput as AuthProviderProps<AuthClient>)
+  const queryClient = qc || fallbackQueryClient
+  return (
+    <AuthContext.Provider value={config}>
+      <RenderingAuthConfigContext.Provider value={config}>
+        <QueryClientProvider client={queryClient}>
+          <FetchOptionsProvider>
+            <MutationInvalidator queryClient={queryClient} />
+            {resolveProviderChildren(children)}
+          </FetchOptionsProvider>
+        </QueryClientProvider>
+      </RenderingAuthConfigContext.Provider>
+    </AuthContext.Provider>
+  )
+}
+export function useAuth(): AuthConfig {
+  const context = useContext(AuthContext)
+  const renderingConfig = useContext(RenderingAuthConfigContext)
+  const auth = context ?? renderingConfig
+  if (!auth) {
+    throw new Error("[Better Auth UI] AuthProvider is required")
+  }
+  return auth
+}