@better-auth-ui/react 1.6.0

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 (250) hide show
  1. package/dist/components/auth/auth-provider.d.ts +32 -0
  2. package/dist/components/auth/auth-provider.js +44 -0
  3. package/dist/components/email/email-changed.d.ts +97 -0
  4. package/dist/components/email/email-changed.js +70 -0
  5. package/dist/components/email/email-localization.d.ts +61 -0
  6. package/dist/components/email/email-localization.js +24 -0
  7. package/dist/components/email/email-styles.d.ts +89 -0
  8. package/dist/components/email/email-styles.js +129 -0
  9. package/dist/components/email/email-verification.d.ts +97 -0
  10. package/dist/components/email/email-verification.js +75 -0
  11. package/dist/components/email/index.d.ts +9 -0
  12. package/dist/components/email/index.js +9 -0
  13. package/dist/components/email/magic-link.d.ts +93 -0
  14. package/dist/components/email/magic-link.js +72 -0
  15. package/dist/components/email/new-device.d.ts +123 -0
  16. package/dist/components/email/new-device.js +90 -0
  17. package/dist/components/email/otp-email.d.ts +88 -0
  18. package/dist/components/email/otp-email.js +65 -0
  19. package/dist/components/email/password-changed.d.ts +96 -0
  20. package/dist/components/email/password-changed.js +76 -0
  21. package/dist/components/email/reset-password.d.ts +90 -0
  22. package/dist/components/email/reset-password.js +68 -0
  23. package/dist/components/icons/apple.d.ts +8 -0
  24. package/dist/components/icons/apple.js +10 -0
  25. package/dist/components/icons/atlassian.d.ts +10 -0
  26. package/dist/components/icons/atlassian.js +14 -0
  27. package/dist/components/icons/cognito.d.ts +8 -0
  28. package/dist/components/icons/cognito.js +10 -0
  29. package/dist/components/icons/discord.d.ts +8 -0
  30. package/dist/components/icons/discord.js +10 -0
  31. package/dist/components/icons/dropbox.d.ts +8 -0
  32. package/dist/components/icons/dropbox.js +10 -0
  33. package/dist/components/icons/facebook.d.ts +10 -0
  34. package/dist/components/icons/facebook.js +12 -0
  35. package/dist/components/icons/figma.d.ts +11 -0
  36. package/dist/components/icons/figma.js +13 -0
  37. package/dist/components/icons/github.d.ts +10 -0
  38. package/dist/components/icons/github.js +12 -0
  39. package/dist/components/icons/gitlab.d.ts +8 -0
  40. package/dist/components/icons/gitlab.js +10 -0
  41. package/dist/components/icons/google.d.ts +8 -0
  42. package/dist/components/icons/google.js +10 -0
  43. package/dist/components/icons/huggingface.d.ts +8 -0
  44. package/dist/components/icons/huggingface.js +10 -0
  45. package/dist/components/icons/index.d.ts +35 -0
  46. package/dist/components/icons/index.js +35 -0
  47. package/dist/components/icons/kakao.d.ts +10 -0
  48. package/dist/components/icons/kakao.js +12 -0
  49. package/dist/components/icons/kick.d.ts +10 -0
  50. package/dist/components/icons/kick.js +12 -0
  51. package/dist/components/icons/line.d.ts +8 -0
  52. package/dist/components/icons/line.js +10 -0
  53. package/dist/components/icons/linear.d.ts +8 -0
  54. package/dist/components/icons/linear.js +10 -0
  55. package/dist/components/icons/linkedin.d.ts +8 -0
  56. package/dist/components/icons/linkedin.js +10 -0
  57. package/dist/components/icons/microsoft.d.ts +8 -0
  58. package/dist/components/icons/microsoft.js +10 -0
  59. package/dist/components/icons/naver.d.ts +8 -0
  60. package/dist/components/icons/naver.js +10 -0
  61. package/dist/components/icons/notion.d.ts +8 -0
  62. package/dist/components/icons/notion.js +10 -0
  63. package/dist/components/icons/paybin.d.ts +7 -0
  64. package/dist/components/icons/paybin.js +9 -0
  65. package/dist/components/icons/paypal.d.ts +8 -0
  66. package/dist/components/icons/paypal.js +10 -0
  67. package/dist/components/icons/polar.d.ts +8 -0
  68. package/dist/components/icons/polar.js +10 -0
  69. package/dist/components/icons/railway.d.ts +8 -0
  70. package/dist/components/icons/railway.js +10 -0
  71. package/dist/components/icons/reddit.d.ts +8 -0
  72. package/dist/components/icons/reddit.js +10 -0
  73. package/dist/components/icons/roblox.d.ts +11 -0
  74. package/dist/components/icons/roblox.js +13 -0
  75. package/dist/components/icons/salesforce.d.ts +8 -0
  76. package/dist/components/icons/salesforce.js +10 -0
  77. package/dist/components/icons/slack.d.ts +8 -0
  78. package/dist/components/icons/slack.js +10 -0
  79. package/dist/components/icons/spotify.d.ts +8 -0
  80. package/dist/components/icons/spotify.js +10 -0
  81. package/dist/components/icons/tiktok.d.ts +9 -0
  82. package/dist/components/icons/tiktok.js +11 -0
  83. package/dist/components/icons/twitch.d.ts +8 -0
  84. package/dist/components/icons/twitch.js +13 -0
  85. package/dist/components/icons/vercel.d.ts +8 -0
  86. package/dist/components/icons/vercel.js +10 -0
  87. package/dist/components/icons/vk.d.ts +8 -0
  88. package/dist/components/icons/vk.js +10 -0
  89. package/dist/components/icons/wechat.d.ts +8 -0
  90. package/dist/components/icons/wechat.js +10 -0
  91. package/dist/components/icons/x.d.ts +8 -0
  92. package/dist/components/icons/x.js +10 -0
  93. package/dist/components/icons/zoom.d.ts +8 -0
  94. package/dist/components/icons/zoom.js +12 -0
  95. package/dist/components/settings/account/theme-preview.d.ts +3 -0
  96. package/dist/components/settings/account/theme-preview.js +10 -0
  97. package/dist/core.d.ts +1 -0
  98. package/dist/core.js +1 -0
  99. package/dist/hooks/auth/use-auth-mutation.d.ts +18 -0
  100. package/dist/hooks/auth/use-auth-mutation.js +10 -0
  101. package/dist/hooks/auth/use-auth-query.d.ts +24 -0
  102. package/dist/hooks/auth/use-auth-query.js +10 -0
  103. package/dist/hooks/auth/use-authenticate.d.ts +9 -0
  104. package/dist/hooks/auth/use-authenticate.js +28 -0
  105. package/dist/hooks/auth/use-forgot-password.d.ts +20 -0
  106. package/dist/hooks/auth/use-forgot-password.js +14 -0
  107. package/dist/hooks/auth/use-request-password-reset.d.ts +26 -0
  108. package/dist/hooks/auth/use-request-password-reset.js +14 -0
  109. package/dist/hooks/auth/use-reset-password.d.ts +40 -0
  110. package/dist/hooks/auth/use-reset-password.js +13 -0
  111. package/dist/hooks/auth/use-send-verification-email.d.ts +24 -0
  112. package/dist/hooks/auth/use-send-verification-email.js +13 -0
  113. package/dist/hooks/auth/use-session.d.ts +9 -0
  114. package/dist/hooks/auth/use-session.js +18 -0
  115. package/dist/hooks/auth/use-sign-in-email.d.ts +53 -0
  116. package/dist/hooks/auth/use-sign-in-email.js +24 -0
  117. package/dist/hooks/auth/use-sign-in-magic-link.d.ts +32 -0
  118. package/dist/hooks/auth/use-sign-in-magic-link.js +13 -0
  119. package/dist/hooks/auth/use-sign-in-social.d.ts +93 -0
  120. package/dist/hooks/auth/use-sign-in-social.js +13 -0
  121. package/dist/hooks/auth/use-sign-out.d.ts +19 -0
  122. package/dist/hooks/auth/use-sign-out.js +24 -0
  123. package/dist/hooks/auth/use-sign-up-email.d.ts +526 -0
  124. package/dist/hooks/auth/use-sign-up-email.js +24 -0
  125. package/dist/hooks/auth/use-user.d.ts +513 -0
  126. package/dist/hooks/auth/use-user.js +14 -0
  127. package/dist/hooks/settings/use-account-info.d.ts +17 -0
  128. package/dist/hooks/settings/use-account-info.js +25 -0
  129. package/dist/hooks/settings/use-change-email.d.ts +24 -0
  130. package/dist/hooks/settings/use-change-email.js +23 -0
  131. package/dist/hooks/settings/use-change-password.d.ts +54 -0
  132. package/dist/hooks/settings/use-change-password.js +11 -0
  133. package/dist/hooks/settings/use-delete-user.d.ts +42 -0
  134. package/dist/hooks/settings/use-delete-user.js +11 -0
  135. package/dist/hooks/settings/use-link-social.d.ts +46 -0
  136. package/dist/hooks/settings/use-link-social.js +10 -0
  137. package/dist/hooks/settings/use-list-accounts.d.ts +20 -0
  138. package/dist/hooks/settings/use-list-accounts.js +23 -0
  139. package/dist/hooks/settings/use-list-device-sessions.d.ts +11 -0
  140. package/dist/hooks/settings/use-list-device-sessions.js +22 -0
  141. package/dist/hooks/settings/use-list-sessions.d.ts +20 -0
  142. package/dist/hooks/settings/use-list-sessions.js +22 -0
  143. package/dist/hooks/settings/use-revoke-multi-session.d.ts +19 -0
  144. package/dist/hooks/settings/use-revoke-multi-session.js +20 -0
  145. package/dist/hooks/settings/use-revoke-session.d.ts +19 -0
  146. package/dist/hooks/settings/use-revoke-session.js +21 -0
  147. package/dist/hooks/settings/use-set-active-session.d.ts +37 -0
  148. package/dist/hooks/settings/use-set-active-session.js +28 -0
  149. package/dist/hooks/settings/use-unlink-account.d.ts +21 -0
  150. package/dist/hooks/settings/use-unlink-account.js +21 -0
  151. package/dist/hooks/settings/use-update-user.d.ts +11 -0
  152. package/dist/hooks/settings/use-update-user.js +29 -0
  153. package/dist/hooks/use-hydrated.d.ts +6 -0
  154. package/dist/hooks/use-hydrated.js +18 -0
  155. package/dist/index.d.ts +32 -0
  156. package/dist/index.js +33 -0
  157. package/dist/lib/auth-client.d.ts +1979 -0
  158. package/dist/lib/auth-client.js +5 -0
  159. package/dist/lib/auth-config.d.ts +43 -0
  160. package/dist/lib/auth-config.js +1 -0
  161. package/dist/lib/auth-context.d.ts +2 -0
  162. package/dist/lib/auth-context.js +3 -0
  163. package/dist/lib/auth-hook-options.d.ts +8 -0
  164. package/dist/lib/auth-hook-options.js +1 -0
  165. package/dist/lib/provider-icons.d.ts +13 -0
  166. package/dist/lib/provider-icons.js +48 -0
  167. package/dist/lib/utils.d.ts +2 -0
  168. package/dist/lib/utils.js +5 -0
  169. package/package.json +64 -0
  170. package/src/components/auth/auth-provider.tsx +82 -0
  171. package/src/components/email/email-changed.tsx +381 -0
  172. package/src/components/email/email-localization.tsx +33 -0
  173. package/src/components/email/email-styles.tsx +175 -0
  174. package/src/components/email/email-verification.tsx +350 -0
  175. package/src/components/email/index.ts +9 -0
  176. package/src/components/email/magic-link.tsx +349 -0
  177. package/src/components/email/new-device.tsx +452 -0
  178. package/src/components/email/otp-email.tsx +321 -0
  179. package/src/components/email/password-changed.tsx +380 -0
  180. package/src/components/email/reset-password.tsx +343 -0
  181. package/src/components/icons/apple.tsx +24 -0
  182. package/src/components/icons/atlassian.tsx +43 -0
  183. package/src/components/icons/cognito.tsx +25 -0
  184. package/src/components/icons/discord.tsx +24 -0
  185. package/src/components/icons/dropbox.tsx +24 -0
  186. package/src/components/icons/facebook.tsx +30 -0
  187. package/src/components/icons/figma.tsx +43 -0
  188. package/src/components/icons/github.tsx +26 -0
  189. package/src/components/icons/gitlab.tsx +36 -0
  190. package/src/components/icons/google.tsx +42 -0
  191. package/src/components/icons/huggingface.tsx +44 -0
  192. package/src/components/icons/index.ts +35 -0
  193. package/src/components/icons/kakao.tsx +26 -0
  194. package/src/components/icons/kick.tsx +30 -0
  195. package/src/components/icons/line.tsx +24 -0
  196. package/src/components/icons/linear.tsx +24 -0
  197. package/src/components/icons/linkedin.tsx +28 -0
  198. package/src/components/icons/microsoft.tsx +24 -0
  199. package/src/components/icons/naver.tsx +24 -0
  200. package/src/components/icons/notion.tsx +25 -0
  201. package/src/components/icons/paybin.tsx +37 -0
  202. package/src/components/icons/paypal.tsx +36 -0
  203. package/src/components/icons/polar.tsx +31 -0
  204. package/src/components/icons/railway.tsx +24 -0
  205. package/src/components/icons/reddit.tsx +25 -0
  206. package/src/components/icons/roblox.tsx +28 -0
  207. package/src/components/icons/salesforce.tsx +24 -0
  208. package/src/components/icons/slack.tsx +36 -0
  209. package/src/components/icons/spotify.tsx +24 -0
  210. package/src/components/icons/tiktok.tsx +32 -0
  211. package/src/components/icons/twitch.tsx +50 -0
  212. package/src/components/icons/vercel.tsx +21 -0
  213. package/src/components/icons/vk.tsx +24 -0
  214. package/src/components/icons/wechat.tsx +24 -0
  215. package/src/components/icons/x.tsx +24 -0
  216. package/src/components/icons/zoom.tsx +48 -0
  217. package/src/components/settings/account/theme-preview.tsx +271 -0
  218. package/src/core.ts +1 -0
  219. package/src/hooks/auth/use-auth-mutation.ts +56 -0
  220. package/src/hooks/auth/use-auth-query.ts +50 -0
  221. package/src/hooks/auth/use-authenticate.ts +35 -0
  222. package/src/hooks/auth/use-request-password-reset.ts +24 -0
  223. package/src/hooks/auth/use-reset-password.ts +23 -0
  224. package/src/hooks/auth/use-send-verification-email.ts +23 -0
  225. package/src/hooks/auth/use-session.ts +26 -0
  226. package/src/hooks/auth/use-sign-in-email.ts +35 -0
  227. package/src/hooks/auth/use-sign-in-magic-link.ts +23 -0
  228. package/src/hooks/auth/use-sign-in-social.ts +23 -0
  229. package/src/hooks/auth/use-sign-out.ts +34 -0
  230. package/src/hooks/auth/use-sign-up-email.ts +35 -0
  231. package/src/hooks/auth/use-user.ts +21 -0
  232. package/src/hooks/settings/use-account-info.ts +30 -0
  233. package/src/hooks/settings/use-change-email.ts +33 -0
  234. package/src/hooks/settings/use-change-password.ts +21 -0
  235. package/src/hooks/settings/use-delete-user.ts +21 -0
  236. package/src/hooks/settings/use-link-social.ts +19 -0
  237. package/src/hooks/settings/use-list-accounts.ts +27 -0
  238. package/src/hooks/settings/use-list-device-sessions.ts +32 -0
  239. package/src/hooks/settings/use-list-sessions.ts +26 -0
  240. package/src/hooks/settings/use-revoke-multi-session.ts +30 -0
  241. package/src/hooks/settings/use-revoke-session.ts +31 -0
  242. package/src/hooks/settings/use-set-active-session.ts +46 -0
  243. package/src/hooks/settings/use-unlink-account.ts +31 -0
  244. package/src/hooks/settings/use-update-user.ts +44 -0
  245. package/src/index.ts +34 -0
  246. package/src/lib/auth-client.ts +37 -0
  247. package/src/lib/auth-config.ts +48 -0
  248. package/src/lib/auth-context.ts +6 -0
  249. package/src/lib/provider-icons.ts +90 -0
  250. package/src/lib/utils.ts +6 -0
package/src/components/email/reset-password.tsx ADDED
@@ -0,0 +1,343 @@
1
+ import {
2
+ Body,
3
+ Button,
4
+ Container,
5
+ Head,
6
+ Heading,
7
+ Hr,
8
+ Html,
9
+ Img,
10
+ Link,
11
+ Preview,
12
+ pixelBasedPreset,
13
+ Section,
14
+ Tailwind,
15
+ Text
16
+ } from "@react-email/components"
17
+ import type { ReactNode } from "react"
18
+
19
+ import { cn } from "../../lib/utils"
20
+ import {
21
+ type EmailClassNames,
22
+ type EmailColors,
23
+ EmailStyles
24
+ } from "./email-styles"
25
+
26
+ const resetPasswordEmailLocalization = {
27
+ RESET_YOUR_PASSWORD: "Reset your password",
28
+ LOGO: "Logo",
29
+ WE_RECEIVED_REQUEST_TO_RESET_PASSWORD:
30
+ "We received a request to reset the password for your {appName} account {email}.",
31
+ RESET_PASSWORD: "Reset password",
32
+ OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
33
+ THIS_LINK_EXPIRES_IN_MINUTES:
34
+ "This link expires in {expirationMinutes} minutes.",
35
+ EMAIL_SENT_BY: "Email sent by {appName}.",
36
+ IF_YOU_DIDNT_REQUEST_PASSWORD_RESET:
37
+ "If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged.",
38
+ POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
39
+ }
40
+
41
+ /**
42
+ * Localization strings for the ResetPasswordEmail component.
43
+ *
44
+ * Contains all text content used in the password reset email template.
45
+ */
46
+ export type ResetPasswordEmailLocalization =
47
+ typeof resetPasswordEmailLocalization
48
+
49
+ /**
50
+ * Props for the ResetPasswordEmail component.
51
+ */
52
+ export interface ResetPasswordEmailProps {
53
+ /** Password reset URL that users must click to reset their password */
54
+ url: string
55
+ /** Email address of the user requesting password reset */
56
+ email?: string
57
+ /** Name of the application sending the email */
58
+ appName?: string
59
+ /** Number of minutes until the reset link expires */
60
+ expirationMinutes?: number
61
+ /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
62
+ logoURL?: string | { light: string; dark: string }
63
+ /** Custom CSS class names for styling specific parts of the email */
64
+ classNames?: EmailClassNames
65
+ /** Custom color scheme for light and dark modes */
66
+ colors?: EmailColors
67
+ /** Whether to show the "Powered by better-auth" footer */
68
+ poweredBy?: boolean
69
+ /** Whether to enable dark mode support */
70
+ darkMode?: boolean
71
+ /** Additional React nodes to inject into the email head */
72
+ head?: ReactNode
73
+ /**
74
+ * Localization overrides for customizing email text
75
+ * @remarks `ResetPasswordEmailLocalization`
76
+ */
77
+ localization?: Partial<ResetPasswordEmailLocalization>
78
+ }
79
+
80
+ /**
81
+ * Email template component that sends password reset links to users.
82
+ *
83
+ * This email includes:
84
+ * - Password reset button and fallback URL
85
+ * - Expiration time information
86
+ * - Security notice for unauthorized requests
87
+ * - Customizable branding and styling
88
+ * - Support for light/dark mode themes
89
+ *
90
+ * @example
91
+ * ```tsx
92
+ * <ResetPasswordEmail
93
+ * url="https://example.com/auth/reset-password?token=abc123"
94
+ * email="user@example.com"
95
+ * appName="My App"
96
+ * expirationMinutes={60}
97
+ * logoURL="https://example.com/logo.png"
98
+ * darkMode={true}
99
+ * />
100
+ * ```
101
+ */
102
+ export const ResetPasswordEmail = ({
103
+ url,
104
+ email,
105
+ appName,
106
+ expirationMinutes = 60,
107
+ logoURL,
108
+ colors,
109
+ classNames,
110
+ darkMode = true,
111
+ poweredBy,
112
+ head,
113
+ ...props
114
+ }: ResetPasswordEmailProps) => {
115
+ const localization = {
116
+ ...ResetPasswordEmail.localization,
117
+ ...props.localization
118
+ }
119
+
120
+ const previewText = localization.RESET_YOUR_PASSWORD
121
+
122
+ return (
123
+ <Html>
124
+ <Head>
125
+ <meta content="light dark" name="color-scheme" />
126
+ <meta content="light dark" name="supported-color-schemes" />
127
+
128
+ <EmailStyles colors={colors} darkMode={darkMode} />
129
+
130
+ {head}
131
+ </Head>
132
+
133
+ <Preview>{previewText}</Preview>
134
+
135
+ <Tailwind config={{ presets: [pixelBasedPreset] }}>
136
+ <Body className={cn("bg-background font-sans", classNames?.body)}>
137
+ <Container
138
+ className={cn(
139
+ "mx-auto my-auto max-w-xl px-2 py-10",
140
+ classNames?.container
141
+ )}
142
+ >
143
+ <Section
144
+ className={cn(
145
+ "bg-card text-card-foreground rounded-none border border-border p-8",
146
+ classNames?.card
147
+ )}
148
+ >
149
+ {logoURL &&
150
+ (typeof logoURL === "string" ? (
151
+ <Img
152
+ src={logoURL}
153
+ width={48}
154
+ height={48}
155
+ alt={appName || localization.LOGO}
156
+ className={cn("mx-auto mb-8", classNames?.logo)}
157
+ />
158
+ ) : (
159
+ <>
160
+ <Img
161
+ src={logoURL.light}
162
+ width={48}
163
+ height={48}
164
+ alt={appName || localization.LOGO}
165
+ className={cn(
166
+ "mx-auto mb-8 logo-light",
167
+ classNames?.logo
168
+ )}
169
+ />
170
+ <Img
171
+ src={logoURL.dark}
172
+ width={48}
173
+ height={48}
174
+ alt={appName || localization.LOGO}
175
+ className={cn(
176
+ "hidden mx-auto mb-8 logo-dark",
177
+ classNames?.logo
178
+ )}
179
+ />
180
+ </>
181
+ ))}
182
+
183
+ <Heading
184
+ className={cn(
185
+ "m-0 mb-5 text-2xl font-semibold",
186
+ classNames?.title
187
+ )}
188
+ >
189
+ {localization.RESET_YOUR_PASSWORD}
190
+ </Heading>
191
+
192
+ <Text className={cn("text-sm", classNames?.content)}>
193
+ {(() => {
194
+ const textWithAppName =
195
+ localization.WE_RECEIVED_REQUEST_TO_RESET_PASSWORD.replace(
196
+ "{appName}",
197
+ appName || ""
198
+ )
199
+ .replace(/\s{2,}/g, " ")
200
+ .replace(" .", ".")
201
+
202
+ const [beforeEmail, afterEmail] =
203
+ textWithAppName.split("{email}")
204
+
205
+ return email ? (
206
+ <>
207
+ {beforeEmail}
208
+
209
+ <Link
210
+ href={`mailto:${email}`}
211
+ className="text-primary font-medium"
212
+ >
213
+ {email}
214
+ </Link>
215
+
216
+ {afterEmail}
217
+ </>
218
+ ) : (
219
+ textWithAppName
220
+ .replace("{email}", "")
221
+ .replace(/\s{2,}/g, " ")
222
+ .replace(" .", ".")
223
+ )
224
+ })()}
225
+ </Text>
226
+
227
+ <Section className="my-6">
228
+ <Button
229
+ href={url}
230
+ className={cn(
231
+ "inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline",
232
+ classNames?.button
233
+ )}
234
+ >
235
+ {localization.RESET_PASSWORD}
236
+ </Button>
237
+ </Section>
238
+
239
+ <Text
240
+ className={cn(
241
+ "m-0 mb-3 text-xs text-muted-foreground",
242
+ classNames?.description
243
+ )}
244
+ >
245
+ {localization.OR_COPY_AND_PASTE_URL}
246
+ </Text>
247
+
248
+ <Link
249
+ className={cn(
250
+ "break-all text-xs text-primary",
251
+ classNames?.link
252
+ )}
253
+ href={url}
254
+ >
255
+ {url}
256
+ </Link>
257
+
258
+ <Hr
259
+ className={cn(
260
+ "my-6 w-full border border-solid border-border",
261
+ classNames?.separator
262
+ )}
263
+ />
264
+
265
+ {expirationMinutes || appName ? (
266
+ <Text
267
+ className={cn(
268
+ "m-0 mb-3 text-xs text-muted-foreground",
269
+ classNames?.description
270
+ )}
271
+ >
272
+ {expirationMinutes
273
+ ? localization.THIS_LINK_EXPIRES_IN_MINUTES.replace(
274
+ "{expirationMinutes}",
275
+ expirationMinutes.toString()
276
+ )
277
+ : null}
278
+
279
+ {appName && (
280
+ <>
281
+ {expirationMinutes ? " " : ""}
282
+ {localization.EMAIL_SENT_BY.replace("{appName}", appName)}
283
+ </>
284
+ )}
285
+ </Text>
286
+ ) : null}
287
+
288
+ <Text
289
+ className={cn(
290
+ "m-0 text-xs text-muted-foreground",
291
+ classNames?.description
292
+ )}
293
+ >
294
+ {localization.IF_YOU_DIDNT_REQUEST_PASSWORD_RESET}
295
+ </Text>
296
+
297
+ {poweredBy && (
298
+ <Text
299
+ className={cn(
300
+ "m-0 mt-4 text-center text-[11px] text-muted-foreground",
301
+ classNames?.poweredBy
302
+ )}
303
+ >
304
+ {(() => {
305
+ const [beforeBetterAuth, afterBetterAuth] =
306
+ localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}")
307
+
308
+ return (
309
+ <>
310
+ {beforeBetterAuth}
311
+ <Link
312
+ href="https://better-auth.com"
313
+ className={cn(
314
+ "text-primary underline",
315
+ classNames?.link
316
+ )}
317
+ >
318
+ better-auth
319
+ </Link>
320
+ {afterBetterAuth}
321
+ </>
322
+ )
323
+ })()}
324
+ </Text>
325
+ )}
326
+ </Section>
327
+ </Container>
328
+ </Body>
329
+ </Tailwind>
330
+ </Html>
331
+ )
332
+ }
333
+
334
+ ResetPasswordEmail.localization = resetPasswordEmailLocalization
335
+
336
+ ResetPasswordEmail.PreviewProps = {
337
+ url: "https://better-auth-ui.com/auth/reset-password?token=example-token",
338
+ email: "m@example.com",
339
+ appName: "Better Auth",
340
+ darkMode: true
341
+ } as ResetPasswordEmailProps
342
+
343
+ export default ResetPasswordEmail
package/src/components/icons/apple.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders an Apple SVG icon.
5
+ *
6
+ * @param props - Props forwarded to the root `<svg>` element; they are spread onto the element and can override attributes such as `width`, `height`, `className`, and `aria-label`.
7
+ * @returns The SVG element for the Apple icon.
8
+ */
9
+ export function Apple(props: ComponentPropsWithRef<"svg">) {
10
+ return (
11
+ <svg
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ viewBox="0 0 24 24"
14
+ role="img"
15
+ aria-label="Apple"
16
+ {...props}
17
+ >
18
+ <path
19
+ fill="currentColor"
20
+ d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04c-2.04.027-3.91 1.183-4.961 3.014c-2.117 3.675-.546 9.103 1.519 12.09c1.013 1.454 2.208 3.09 3.792 3.039c1.52-.065 2.09-.987 3.935-.987c1.831 0 2.35.987 3.96.948c1.637-.026 2.676-1.48 3.676-2.948c1.156-1.688 1.636-3.325 1.662-3.415c-.039-.013-3.182-1.221-3.22-4.857c-.026-3.04 2.48-4.494 2.597-4.559c-1.429-2.09-3.623-2.324-4.39-2.376c-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83c-1.207.052-2.662.805-3.532 1.818c-.78.896-1.454 2.338-1.273 3.714c1.338.104 2.715-.688 3.559-1.701"
21
+ ></path>
22
+ </svg>
23
+ )
24
+ }
package/src/components/icons/atlassian.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import { type ComponentPropsWithRef, useId } from "react"
2
+
3
+ /**
4
+ * Render the Atlassian logo as an inline SVG element.
5
+ *
6
+ * The SVG includes a linear gradient and two path shapes, and sets role="img" with aria-label="Atlassian".
7
+ *
8
+ * @param props - Props forwarded to the root SVG element.
9
+ * @returns An SVG element representing the Atlassian icon.
10
+ */
11
+ export function Atlassian(props: ComponentPropsWithRef<"svg">) {
12
+ const gradientId = useId()
13
+ return (
14
+ <svg
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ viewBox="0 0 256 256"
17
+ role="img"
18
+ aria-label="Atlassian"
19
+ {...props}
20
+ >
21
+ <defs>
22
+ <linearGradient
23
+ id={gradientId}
24
+ x1="99.687%"
25
+ x2="39.836%"
26
+ y1="15.801%"
27
+ y2="97.438%"
28
+ >
29
+ <stop offset="0%" stopColor="#0052cc"></stop>
30
+ <stop offset="92.3%" stopColor="#2684ff"></stop>
31
+ </linearGradient>
32
+ </defs>
33
+ <path
34
+ fill={`url(#${gradientId})`}
35
+ d="M75.793 117.95c-3.82-4.08-9.77-3.85-12.367 1.342L.791 244.565a7.488 7.488 0 0 0 6.697 10.838h87.228a7.22 7.22 0 0 0 6.699-4.14c18.808-38.89 7.413-98.018-25.622-133.314"
36
+ ></path>
37
+ <path
38
+ fill="#2681ff"
39
+ d="M121.756 4.011c-35.033 55.505-32.721 116.979-9.646 163.13l42.06 84.121a7.49 7.49 0 0 0 6.697 4.14h87.227a7.488 7.488 0 0 0 6.697-10.838S137.445 9.837 134.493 3.964c-2.64-5.258-9.344-5.33-12.737.047"
40
+ ></path>
41
+ </svg>
42
+ )
43
+ }
package/src/components/icons/cognito.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders the Cognito SVG icon as a React component.
5
+ *
6
+ * @param props - Props passed through to the underlying `svg` element (accepts standard SVG attributes and ref).
7
+ * @returns A React `svg` element displaying the Cognito icon
8
+ */
9
+ export function Cognito(props: ComponentPropsWithRef<"svg">) {
10
+ return (
11
+ <svg
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ viewBox="0 0 48 48"
14
+ role="img"
15
+ aria-label="Cognito"
16
+ {...props}
17
+ >
18
+ <path
19
+ fill="currentColor"
20
+ d="M24 4L6 14v20l18 10 18-10V14L24 4zm0 4.62l13.6 7.86v15.04L24 39.38 10.4 31.52V16.48L24 8.62z"
21
+ ></path>
22
+ <path fill="currentColor" d="M22 14h4v20h-4zM14 22h20v4H14z"></path>
23
+ </svg>
24
+ )
25
+ }
package/src/components/icons/discord.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders the Discord logo as an SVG element.
5
+ *
6
+ * @param props - Props forwarded to the root `<svg>` element (e.g., `className`, `style`, `aria-*`, event handlers)
7
+ * @returns The SVG element for the Discord icon
8
+ */
9
+ export function Discord(props: ComponentPropsWithRef<"svg">) {
10
+ return (
11
+ <svg
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ viewBox="0 0 256 199"
14
+ role="img"
15
+ aria-label="Discord"
16
+ {...props}
17
+ >
18
+ <path
19
+ fill="#5865f2"
20
+ d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"
21
+ />
22
+ </svg>
23
+ )
24
+ }
package/src/components/icons/dropbox.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders the Dropbox logo as an SVG element.
5
+ *
6
+ * @param props - Props to apply to the root `<svg>` element; all props are forwarded to the SVG.
7
+ * @returns An SVG element containing the Dropbox logo
8
+ */
9
+ export function Dropbox(props: ComponentPropsWithRef<"svg">) {
10
+ return (
11
+ <svg
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ viewBox="0 0 256 218"
14
+ role="img"
15
+ aria-label="Dropbox"
16
+ {...props}
17
+ >
18
+ <path
19
+ fill="#0061ff"
20
+ d="M63.995 0L0 40.771l63.995 40.772L128 40.771zM192 0l-64 40.775l64 40.775l64.001-40.775zM0 122.321l63.995 40.772L128 122.321L63.995 81.55zM192 81.55l-64 40.775l64 40.774l64-40.774zM64 176.771l64.005 40.772L192 176.771L128.005 136z"
21
+ />
22
+ </svg>
23
+ )
24
+ }
package/src/components/icons/facebook.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders an accessible Facebook SVG icon.
5
+ *
6
+ * The component forwards received props onto the root `<svg>` element to allow external customization (for example `className`, `style`, `ref`, and event handlers). The SVG includes an `aria-label` of "Facebook".
7
+ *
8
+ * @param props - Props to spread onto the root SVG element (e.g., `className`, `style`, `ref`, event handlers)
9
+ * @returns The SVG element representing the Facebook logo
10
+ */
11
+ export function Facebook(props: ComponentPropsWithRef<"svg">) {
12
+ return (
13
+ <svg
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ viewBox="0 0 256 256"
16
+ role="img"
17
+ aria-label="Facebook"
18
+ {...props}
19
+ >
20
+ <path
21
+ fill="#1877f2"
22
+ d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
23
+ />
24
+ <path
25
+ fill="#fff"
26
+ d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"
27
+ />
28
+ </svg>
29
+ )
30
+ }
package/src/components/icons/figma.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders the Figma logo as an inline SVG icon with built-in accessibility attributes.
5
+ *
6
+ * The icon uses role="img" and aria-label="Figma" for screen readers and contains
7
+ * five colored paths representing the Figma brand colors.
8
+ *
9
+ * @param props - Props forwarded to the root `<svg>` element
10
+ * @returns An accessible SVG element containing the multicolor Figma logo
11
+ */
12
+ export function Figma(props: ComponentPropsWithRef<"svg">) {
13
+ return (
14
+ <svg
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ viewBox="0 0 128 128"
17
+ role="img"
18
+ aria-label="Figma"
19
+ {...props}
20
+ >
21
+ <path
22
+ fill="#0acf83"
23
+ d="M45.5 129c11.9 0 21.5-9.6 21.5-21.5V86H45.5C33.6 86 24 95.6 24 107.5S33.6 129 45.5 129m0 0"
24
+ ></path>
25
+ <path
26
+ fill="#a259ff"
27
+ d="M24 64.5C24 52.6 33.6 43 45.5 43H67v43H45.5C33.6 86 24 76.4 24 64.5m0 0"
28
+ ></path>
29
+ <path
30
+ fill="#f24e1e"
31
+ d="M24 21.5C24 9.6 33.6 0 45.5 0H67v43H45.5C33.6 43 24 33.4 24 21.5m0 0"
32
+ ></path>
33
+ <path
34
+ fill="#ff7262"
35
+ d="M67 0h21.5C100.4 0 110 9.6 110 21.5S100.4 43 88.5 43H67zm0 0"
36
+ ></path>
37
+ <path
38
+ fill="#1abcfe"
39
+ d="M110 64.5c0 11.9-9.6 21.5-21.5 21.5S67 76.4 67 64.5S76.6 43 88.5 43S110 52.6 110 64.5m0 0"
40
+ ></path>
41
+ </svg>
42
+ )
43
+ }
package/src/components/icons/github.tsx ADDED
@@ -0,0 +1,26 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Renders the GitHub logo as an inline SVG.
5
+ *
6
+ * The SVG sets role="img" and aria-label="GitHub" and uses a path filled with `currentColor` so it inherits text color.
7
+ *
8
+ * @param props - Props spread onto the root `<svg>` element (standard SVG attributes and event handlers).
9
+ * @returns The SVG element for the GitHub mark.
10
+ */
11
+ export function GitHub(props: ComponentPropsWithRef<"svg">) {
12
+ return (
13
+ <svg
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ viewBox="0 0 24 24"
16
+ role="img"
17
+ aria-label="GitHub"
18
+ {...props}
19
+ >
20
+ <path
21
+ fill="currentColor"
22
+ d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
23
+ />
24
+ </svg>
25
+ )
26
+ }
package/src/components/icons/gitlab.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Render a scalable GitLab logo as an SVG element.
5
+ *
6
+ * @param props - Props forwarded to the root SVG element (e.g., `className`, `style`, `width`, `height`, `aria-*`)
7
+ * @returns An SVG element representing the GitLab logo
8
+ */
9
+ export function GitLab(props: ComponentPropsWithRef<"svg">) {
10
+ return (
11
+ <svg
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ viewBox="0 0 128 128"
14
+ role="img"
15
+ aria-label="GitLab"
16
+ {...props}
17
+ >
18
+ <path
19
+ fill="#e24329"
20
+ d="m124.755 51.382l-.177-.452L107.47 6.282a4.46 4.46 0 0 0-1.761-2.121a4.58 4.58 0 0 0-5.236.281a4.6 4.6 0 0 0-1.518 2.304L87.404 42.088H40.629L29.077 6.746a4.5 4.5 0 0 0-1.518-2.31a4.58 4.58 0 0 0-5.236-.281a4.5 4.5 0 0 0-1.761 2.121L3.422 50.904l-.17.452c-5.059 13.219-.763 28.192 10.537 36.716l.059.046l.157.111l26.061 19.516l12.893 9.758l7.854 5.93a5.28 5.28 0 0 0 6.388 0l7.854-5.93l12.893-9.758l26.218-19.634l.065-.052c11.273-8.526 15.562-23.472 10.524-36.677"
21
+ />
22
+ <path
23
+ fill="#fc6d26"
24
+ d="m124.755 51.382l-.177-.452a57.8 57.8 0 0 0-23.005 10.341L64 89.682c12.795 9.68 23.934 18.09 23.934 18.09l26.218-19.634l.065-.052c11.291-8.527 15.586-23.488 10.538-36.704"
25
+ />
26
+ <path
27
+ fill="#fca326"
28
+ d="m40.066 107.771l12.893 9.758l7.854 5.93a5.28 5.28 0 0 0 6.388 0l7.854-5.93l12.893-9.758s-11.152-8.436-23.947-18.09a18379 18379 0 0 0-23.935 18.09"
29
+ />
30
+ <path
31
+ fill="#fc6d26"
32
+ d="M26.42 61.271A57.7 57.7 0 0 0 3.422 50.904l-.17.452c-5.059 13.219-.763 28.192 10.537 36.716l.059.046l.157.111l26.061 19.516L64 89.655z"
33
+ />
34
+ </svg>
35
+ )
36
+ }
package/src/components/icons/google.tsx ADDED
@@ -0,0 +1,42 @@
1
+ import type { ComponentPropsWithRef } from "react"
2
+
3
+ /**
4
+ * Render the Google brand SVG icon.
5
+ *
6
+ * @param props - Props applied to the root `<svg>` element (e.g., `className`, `style`, `width`, `height`, event handlers).
7
+ * @returns The `<svg>` element representing the Google logo.
8
+ */
9
+ export function Google(props: ComponentPropsWithRef<"svg">) {
10
+ return (
11
+ <svg
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ viewBox="0 0 16 16"
14
+ role="img"
15
+ aria-label="Google"
16
+ {...props}
17
+ >
18
+ <g fill="none" fillRule="evenodd" clipRule="evenodd">
19
+ <path
20
+ fill="#f44336"
21
+ d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"
22
+ opacity={0.987}
23
+ />
24
+ <path
25
+ fill="#ffc107"
26
+ d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92"
27
+ opacity={0.997}
28
+ />
29
+ <path
30
+ fill="#448aff"
31
+ d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49"
32
+ opacity={0.999}
33
+ />
34
+ <path
35
+ fill="#43a047"
36
+ d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z"
37
+ opacity={0.993}
38
+ />
39
+ </g>
40
+ </svg>
41
+ )
42
+ }