feat(auth): magic link with better-auth

Author: Ronaldo93

web/src/lib/auth-client.ts

@@ -1,3 +1,9 @@
 import { createAuthClient } from 'better-auth/react'
+import { magicLinkClient } from 'better-auth/client/plugins'
+
+export const authClient = createAuthClient({
+  plugins: [
+    magicLinkClient()
+  ]
+})
 
-export const authClient = createAuthClient()

web/src/lib/auth.ts

@@ -1,9 +1,22 @@
 import { betterAuth } from 'better-auth'
+import { magicLink } from 'better-auth/plugins'
 import { tanstackStartCookies } from 'better-auth/tanstack-start'
 
 export const auth = betterAuth({
+  secret: process.env.BETTER_AUTH_SECRET || "dev-secret-key-at-least-32-chars-long-exemplai",
   emailAndPassword: {
     enabled: true,
   },
-  plugins: [tanstackStartCookies()],
+  plugins: [
+    tanstackStartCookies(),
+    magicLink({
+      sendMagicLink: async ({ email, url }) => {
+        console.log(`\n==================================================`)
+        console.log(`[Dev Mailer] Magic Link for: ${email}`)
+        console.log(`URL: ${url}`)
+        console.log(`==================================================\n`)
+      },
+    }),
+  ],
 })
+

web/src/routes/auth.tsx

@@ -56,27 +56,15 @@ function AuthPage() {
           // Log magic link request to the terminal/console
           console.log(`[Auth] Magic Link Sign In initiated for email: "${value.email}"`);
 
-          if (
-            authClient.signIn &&
-            "magicLink" in authClient.signIn &&
-            typeof (authClient.signIn as any).magicLink === "function"
-          ) {
-            const { error } = await (authClient.signIn as any).magicLink({
-              email: value.email,
-              callbackURL: "/",
-            });
-            if (error) {
-              setGlobalError(error.message || "Failed to send magic link");
-            } else {
-              setSuccessMessage("Magic link sent! Please check your email inbox.");
-            }
+          const { error } = await authClient.signIn.magicLink({
+            email: value.email,
+            callbackURL: "/",
+          });
+          if (error) {
+            setGlobalError(error.message || "Failed to send magic link");
           } else {
-            // Log warning & simulate success response to developer/terminal
-            console.warn(
-              "[Auth] better-auth magicLink plugin is not configured. Simulating success."
-            );
             setSuccessMessage(
-              `Magic link has been simulated & logged to terminal! (Email: ${value.email})`
+              "Magic link sent! Please check your email inbox."
             );
           }
         } else {
@@ -369,6 +357,7 @@ function AuthPage() {
           </form.Subscribe>
         </form>
       </AuthCard>
+
     </div>
   );
 }