Redirect in production:

I have this simple action:

export const login = action(async (email: string, password: string) => {
  "use server";
  try {
    const session = await getSession();
    const userSession = await postLogin(email, password);
    await session.update(userSession);
    await trackActionEvent({
      event: "login_with_email",
      distinctId: userSession.session.id as string,
      properties: {
        email: email,
      },
    });
    console.log("SUCCESS:", userSession);
  } catch (err) {
    console.error("ERROR:", err);
    throw new Error("USER_LOGIN_ERROR");
  }
  throw redirect("/app/user");
}, 'user-login');

export const login = action(async (email: string, password: string) => {
  "use server";
  try {
    const session = await getSession();
    const userSession = await postLogin(email, password);
    await session.update(userSession);
    await trackActionEvent({
      event: "login_with_email",
      distinctId: userSession.session.id as string,
      properties: {
        email: email,
      },
    });
    console.log("SUCCESS:", userSession);
  } catch (err) {
    console.error("ERROR:", err);
    throw new Error("USER_LOGIN_ERROR");
  }
  throw redirect("/app/user");
}, 'user-login');

in development, this works fine, but in production, it doesn't work. any idea why this might be happening?

9 Replies

hannus•3w ago

What has showed in the console?

Rvespula•3w ago

Succes, its with plain node

hannus•3w ago

how about clear the cache and cookie before run the app?

Rvespula•3w ago

I already tried that, if I compile and test in node locally the same thing happens, it registers my event but the redirect does nothing, the server responds 200

hannus•3w ago

Can I have a look at the code of component that you want to redirect to?

Rvespula•3w ago

sure:

export function LoginForm() {
  const FormHook = useLoginForm();
  const loginAction = useAction(login);

  const handleSession: SubmitHandler<{
    email: string;
    password: string;
  }> = async ({ email, password }) => {
    try {
      await loginAction(email, password);
    } catch (error) {
      throw new FormError(m.server_error_login_failed());
    }
  };
  return <></>
}

export function LoginForm() {
  const FormHook = useLoginForm();
  const loginAction = useAction(login);

  const handleSession: SubmitHandler<{
    email: string;
    password: string;
  }> = async ({ email, password }) => {
    try {
      await loginAction(email, password);
    } catch (error) {
      throw new FormError(m.server_error_login_failed());
    }
  };
  return <></>
}

hannus•3w ago

I have similar issue last week. My solution is set up a cache which handles with the session in the router.load() at first, and create a resource by using createAsync to check whether the session works fine. In the Code as following:

export const route = {
  load() {
    void getPost();
  }
} satisfies RouteDefinition;
export default function Hello() {
  const post = createAsync(() => getPost(), {deferStream: true});
  return (
    <main>
      <Title>Hello, this page needs auth</Title>
      <h1>Hello</h1>
      <p>
        {post()}
      </p>
    </main>
  );

export const route = {
  load() {
    void getPost();
  }
} satisfies RouteDefinition;
export default function Hello() {
  const post = createAsync(() => getPost(), {deferStream: true});
  return (
    <main>
      <Title>Hello, this page needs auth</Title>
      <h1>Hello</h1>
      <p>
        {post()}
      </p>
    </main>
  );

getPost() is the function cached:

 typescript
export const getPost = cache(async () => {
  "use server";
  try {
    const token = await getToken();
    const post = await fetchPost(token);
    return post;
  } catch (error) {
    throw redirect("/login");
  }
}, "post");

 typescript
export const getPost = cache(async () => {
  "use server";
  try {
    const token = await getToken();
    const post = await fetchPost(token);
    return post;
  } catch (error) {
    throw redirect("/login");
  }
}, "post");

I hope it is useful.

Rvespula•3w ago

dam this working.... but its strange....... why in develop this work xD It's still not clear to me. maybe the documents should include something about it @ryansolid 🤔 thx @hannus

hannus•3w ago

I think the reason is single data flow, so make sure the data that used in the component is a signal. Cache is a plus for enhancing performance. in the LoginForm() component, throw redirect based on a normal async function(handleSession). I believe that would be call once and hard to execute at the time you want.

Gaming

Programming

Redirect in production: