T
TanStack•3w ago
like-gold

Issues with `throw redirect()`

I have a login form and server function: 
# src/components/forms/AdminLoginForm
export function AdminLoginForm() {
  // TanStack Form setup
  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    } as AdminLoginFormData,

    onSubmit: async ({ value }) => {
      try {
        // Handle admin login logic here
        console.log("Admin login data:", value);
        await createAdminSession({ data: value });
      } catch (error) {
        console.error("Admin login error:", error);
        toast.error("Fehler beim Anmelden", {
          description:
            "Bitte überprüfe deine Anmeldedaten und versuche es erneut.",
        });
      }
    },
  });

... other code

# src/lib/server/auth.ts
export const createAdminSession = createServerFn({ method: "POST" })
  .inputValidator(adminLoginFormSchema)
  .handler(async ({ data }) => {
    console.log("[INFO] - auth.ts - Creating admin session...");

    const { email, password } = data;
    const { account } = createAdminClient();
    const session = await account.createEmailPasswordSession({
      email,
      password,
    });
    setCookie("appwrite-session", session.secret, {
      httpOnly: true,
      secure: true,
      sameSite: "strict",
      maxAge: 60 * 60 * 24 * 30, // 30 days
      path: "/",
    });

    console.log("[INFO] - auth.ts - Admin session created!");
    throw redirect({
      to: "/admin/dashboard",
    });
  });
# src/components/forms/AdminLoginForm
export function AdminLoginForm() {
  // TanStack Form setup
  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    } as AdminLoginFormData,

    onSubmit: async ({ value }) => {
      try {
        // Handle admin login logic here
        console.log("Admin login data:", value);
        await createAdminSession({ data: value });
      } catch (error) {
        console.error("Admin login error:", error);
        toast.error("Fehler beim Anmelden", {
          description:
            "Bitte überprüfe deine Anmeldedaten und versuche es erneut.",
        });
      }
    },
  });

... other code

# src/lib/server/auth.ts
export const createAdminSession = createServerFn({ method: "POST" })
  .inputValidator(adminLoginFormSchema)
  .handler(async ({ data }) => {
    console.log("[INFO] - auth.ts - Creating admin session...");

    const { email, password } = data;
    const { account } = createAdminClient();
    const session = await account.createEmailPasswordSession({
      email,
      password,
    });
    setCookie("appwrite-session", session.secret, {
      httpOnly: true,
      secure: true,
      sameSite: "strict",
      maxAge: 60 * 60 * 24 * 30, // 30 days
      path: "/",
    });

    console.log("[INFO] - auth.ts - Admin session created!");
    throw redirect({
      to: "/admin/dashboard",
    });
  });
Why is it not redirecting? I think I lack of understanding Also I see this in the console `Admin login error: Response {options: {…}, type: 'default', url: '', redirected: false, status: 307, …}``
2 Replies
conscious-sapphire
conscious-sapphire•3w ago
You need to use the useServerFn hook in components to be able to handle redirects. https://tanstack.com/start/latest/docs/framework/react/guide/server-functions#where-to-call-server-functions
Server Functions | TanStack Start React Docs
What are Server Functions? Server functions let you define server-only logic that can be called from anywhere in your application loaders, components, hooks, or other server functions. They run on the...
like-gold
like-goldOP•3w ago
Thank you. This works 🙂 Did not see that in the docs. Can you please explain why it needs to be wrappen in that hook?

Did you find this page helpful?