Regarding the issue of using `signIn.magicLink` from better-auth in the start project. #3357

chaocwu · 2025-02-07T12:28:16Z

chaocwu
Feb 7, 2025

I can confirm that my basic configuration is correct, but I am not sure if there are other issues.

import * as React from "react";
import { type SubmitHandler, useForm } from "react-hook-form";

import { createFileRoute, redirect } from "@tanstack/react-router";

import { zodResolver } from "@hookform/resolvers/zod";
import { EnvelopeSimple } from "@phosphor-icons/react";
import { z } from "zod";

import { signIn } from "@/lib/auth-client";

const REDIRECT_URL = "/project";

export const Route = createFileRoute("/login")({
  component: LoginPage,
  beforeLoad: async ({ context }) => {
    if (context.user) {
      throw redirect({
        to: REDIRECT_URL,
      });
    }
  },
});

const emailFormSchema = z.object({
  email: z.string().email(),
});

type EmailForm = z.infer<typeof emailFormSchema>;

function LoginPage() {
  const [loading, setLoading] = React.useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<EmailForm>({
    resolver: zodResolver(emailFormSchema),
    defaultValues: {
      email: "",
    },
  });
  const onSubmit: SubmitHandler<EmailForm> = async (data) => {
    const validated = emailFormSchema.safeParse(data);
    if (validated.success) {
      const response = await signIn.magicLink(
        {
          email: data.email,
          callbackURL: REDIRECT_URL,
        },
        {
          onRequest: () => {
            setLoading(true);
          },
          onResponse: () => {
            setLoading(false);
          },
          onError: (ctx) => console.log(ctx.error.message),
        },
      );
      console.log(response);
    }
  };
  return (
    <div className="grid h-full w-full grid-cols-2">
      <div className="border-base-300 h-full border-r"></div>
      <form
        onSubmit={handleSubmit(onSubmit)}
        className="flex flex-col items-center gap-2 self-center"
      >
        <div className="flex flex-col gap-2">
          <div>
            <h1 className="text-xl font-bold">Welcome</h1>
          </div>
          <fieldset className="fieldset w-xs gap-2">
            <label className="fieldset-label">Email</label>
            <input type="email" className="input" {...register("email")} />
            {errors.email && (
              <p className="fieldset-label text-error">
                {errors.email.message}
              </p>
            )}
            <button
              type="submit"
              className="btn btn-primary"
              disabled={loading}
            >
              <EnvelopeSimple className="h-5 w-5" weight="duotone" />
              Login with magic link
            </button>
          </fieldset>
        </div>
      </form>
    </div>
  );
}

log: response

<!DOCTYPE html><html><head><script class='tsr-once'>const __TSR_SSR__={matches:[],streamedValues:{},initMatch:o=>(__TSR_SSR__.matches.push(o),o.extracted?.forEach(l=>{if(l.type==="stream"){let r;l.value=new ReadableStream({start(e){r={enqueue:t=>{try{e.enqueue(t)}catch{}},close:()=>{try{e.close()}catch{}}}}}),l.value.controller=r}else{let r,e;l.value=new Promise((t,a)=>{e=a,r=t}),l.value.reject=e,l.value.resolve=r}}),!0),resolvePromise:({matchId:o,id:l,promiseState:r})=>{const e=__TSR_SSR__.matches.find(t=>t.id===o);if(e){const t=e.extracted?.[l];if(t&&t.type==="promise"&&t.value&&r.status==="success")return t.value.resolve(r.data),!0}return!1},injectChunk:({matchId:o,id:l,chunk:r})=>{const e=__TSR_SSR__.matches.find(t=>t.id===o);if(e){const t=e.extracted?.[l];if(t&&t.type==="stream"&&t.value?.controller)return t.value.controller.enqueue(new TextEncoder().encode(r.toString())),!0}return!1},closeStream:({matchId:o,id:l})=>{const r=__TSR_SSR__.matches.find(e=>e.id===o);if(r){const e=r.extracted?.[l];if(e&&e.type==="stream"&&e.value?.controller)return e.value.controller.close(),!0}return!1},cleanScripts:()=>{document.querySelectorAll(".tsr-once").forEach(o=>{o.remove()})}};window.__TSR_SSR__=__TSR_SSR__;
; if (typeof __TSR_SSR__ !== 'undefined') __TSR_SSR__.cleanScripts()</script><script class='tsr-once'>__TSR_SSR__.initMatch({"id":"__root__","__beforeLoadContext":"{\"user\":null}","loaderData":"{\"$undefined\":0}","error":"{\"$undefined\":0}","extracted":null,"updatedAt":1738931056945,"status":"success"}); console.info(`Injected From Server:
__TSR_SSR__.initMatch({"id":"__root__","__beforeLoadContext":"{\\"user\\":null}","loaderData":"{\\"$undefined\\":0}","error":"{\\"$undefined\\":0}","extracted":null,"updatedAt":1738931056945,"status":"success"})`); if (typeof __TSR_SSR__ !== 'undefined') __TSR_SSR__.cleanScripts()</script><script class='tsr-once'>__TSR_SSR__.dehydrated = "{\"manifest\":{\"routes\":{\"__root__\":{\"preloads\":{\"$undefined\":0},\"assets\":[{\"tag\":\"script\",\"attrs\":{\"type\":\"module\"},\"children\":\"import RefreshRuntime from \\\"/_build/@react-refresh\\\";\\nRefreshRuntime.injectIntoGlobalHook(window)\\nwindow.$RefreshReg$ = () => {}\\nwindow.$RefreshSig$ = () => (type) => type\\nwindow.__vite_plugin_react_preamble_installed__ = true\"},{\"tag\":\"script\",\"attrs\":{\"src\":\"/_build/@fs/w/tanstack-start-example/app/client.tsx\",\"type\":\"module\",\"suppressHydrationWarning\":true,\"async\":true}}]}}},\"dehydratedData\":{\"$undefined\":0}}"; console.info(`Injected From Server:
__TSR_SSR__.dehydrated = "{\\"manifest\\":{\\"routes\\":{\\"__root__\\":{\\"preloads\\":{\\"$undefined\\":0},\\"assets\\":[{\\"tag\\":\\"script\\",\\"attrs\\":{\\"type\\":\\"module\\"},\\"children\\":\\"import RefreshRuntime from \\\\\\"/_build/@react-refresh\\\\\\";\\\\nRefreshRuntime.injectIntoGlobalHook(window)\\\\nwindow.$RefreshReg$ = () => {}\\\\nwindow.$RefreshSig$ = () => (type) => type\\\\nwindow.__vite_plugin_react_preamble_installed__ = true\\"},{\\"tag\\":\\"script\\",\\"attrs\\":{\\"src\\":\\"/_build/@fs/w/tanstack-start-example/app/client.tsx\\",\\"type\\":\\"module\\",\\"suppressHydrationWarning\\":true,\\"async\\":true}}]}}},\\"dehydratedData\\":{\\"$undefined\\":0}}"`); if (typeof __TSR_SSR__ !== 'undefined') __TSR_SSR__.cleanScripts()</script><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><script src="/_build/@fs/w/tanstack-start-example/app/client.tsx" type="module" async=""></script><title>Starter</title><link rel="stylesheet" href="/_build/app/index.css"/></head><body class="h-screen overflow-hidden antialiased"><div>Not Found</div><script type="module">import RefreshRuntime from "/_build/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true</script></body></html>

schiller-manuel · 2025-02-07T18:15:39Z

schiller-manuel
Feb 7, 2025
Maintainer

can you please provide more context?

1 reply

chaocwu Feb 8, 2025
Author

skill issue, thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Regarding the issue of using `signIn.magicLink` from better-auth in the start project. #3357

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Regarding the issue of using signIn.magicLink from better-auth in the start project. #3357

Uh oh!

Uh oh!

chaocwu Feb 7, 2025

Replies: 1 comment · 1 reply

Uh oh!

schiller-manuel Feb 7, 2025 Maintainer

Uh oh!

chaocwu Feb 8, 2025 Author

Regarding the issue of using `signIn.magicLink` from better-auth in the start project. #3357

chaocwu
Feb 7, 2025

Replies: 1 comment 1 reply

schiller-manuel
Feb 7, 2025
Maintainer

chaocwu Feb 8, 2025
Author