redirect not working in server action

Answered

Seppala Siberian Sleddog posted this in #help-forum

Seppala Siberian SleddogOP

2024-06-30T01:09:35.938Z

I have this action function defined and I'm adding it through the form but it's not redirecting to the home page I have verified that the redirect function is being reached on a successful login but it does not redirect it still shows the same page

const login = async (prevState: any, data: FormData) => {
  try {
    const validation = await loginSchema.safeParseAsync({
      email: data.get('email'),
      password: data.get('password'),
    });

    if (!validation.success)
      return {
        success: false,
        errors: flattenError(validation.error),
      };

    const res = await pubRequest.post<{ accessToken: string; refreshToken: string }>(
      `/auth/login`,
      {
        email: validation.data.email,
        password: validation.data.password,
      }
    );

    cookies().set({
      name: 'access_token',
      value: res.data.accessToken,
      maxAge: 3600 * 24,
      ...cookieOptions,
    });

    cookies().set({
      name: 'refresh_token',
      value: res.data.refreshToken,
      maxAge: 3600 * 24 * 15,
      ...cookieOptions,
    });

    redirect('/');
  } catch (error: any) {
    if (error instanceof AxiosError)
      return {
        success: false,
        errors: error.response?.data.errors,
      };

    return {
      success: false,
    };
  }
};

Answered by Seppala Siberian Sleddog

Actually the problem is that I was calling it inside the try/catch block so I moved to the outside like so

const login = async (prevState: any, data: FormData) => {
  let shouldRedirect = false;

  try {
    const validation = await loginSchema.safeParseAsync(formDataIntoObject(data));

    if (!validation.success)
      return {
        success: false,
        errors: flattenError(validation.error),
      };

    const res = await pubRequest.post<{ accessToken: string; refreshToken: string }>(
      `/auth/login`,
      {
        email: validation.data.email,
        password: validation.data.password,
      }
    );

    cookies().set({
      name: 'access_token',
      value: res.data.accessToken,
      maxAge: 3600 * 24,
      ...cookieOptions,
    });

    cookies().set({
      name: 'refresh_token',
      value: res.data.refreshToken,
      maxAge: 3600 * 24 * 15,
      ...cookieOptions,
    });

    shouldRedirect = true;
  } catch (error: any) {
    console.error(error);
    if (error instanceof AxiosError)
      return {
        success: false,
        errors: error.response?.data.errors,
      };

    return {
      success: false,
    };
  }

  shouldRedirect && redirect('/');
};

View full answer

5 Replies

@Seppala Siberian Sleddog I have this action function defined and I'm adding it through the form but it's not redirecting to the home page I have verified that the redirect function is being reached on a successful login but it does not redirect it still shows the same page ts const login = async (prevState: any, data: FormData) => { try { const validation = await loginSchema.safeParseAsync({ email: data.get('email'), password: data.get('password'), }); if (!validation.success) return { success: false, errors: flattenError(validation.error), }; const res = await pubRequest.post<{ accessToken: string; refreshToken: string }>( `/auth/login`, { email: validation.data.email, password: validation.data.password, } ); cookies().set({ name: 'access_token', value: res.data.accessToken, maxAge: 3600 * 24, ...cookieOptions, }); cookies().set({ name: 'refresh_token', value: res.data.refreshToken, maxAge: 3600 * 24 * 15, ...cookieOptions, }); redirect('/'); } catch (error: any) { if (error instanceof AxiosError) return { success: false, errors: error.response?.data.errors, }; return { success: false, }; } };

joulev

2024-06-30T03:15:44.809Z

in the catch (error), also add

if (isRedirectError(error)) throw error;

with isRedirectError imported from

import { isRedirectError } from "next/dist/client/components/redirect";

in nextjs 15 they will have a rethrow() function which makes it easier to do this.

Giant Angora

2024-06-30T07:22:25.650Z

I tried this the page is redirect but the url is not change in my case.

joulev

2024-06-30T07:52:36.154Z

that's a separate issue, which i don't have an answer for, sorry

quite a few people have encountered this issue

Seppala Siberian SleddogOP

2024-06-30T12:23:49.204Z

Actually the problem is that I was calling it inside the try/catch block so I moved to the outside like so

const login = async (prevState: any, data: FormData) => {
  let shouldRedirect = false;

  try {
    const validation = await loginSchema.safeParseAsync(formDataIntoObject(data));

    if (!validation.success)
      return {
        success: false,
        errors: flattenError(validation.error),
      };

    const res = await pubRequest.post<{ accessToken: string; refreshToken: string }>(
      `/auth/login`,
      {
        email: validation.data.email,
        password: validation.data.password,
      }
    );

    cookies().set({
      name: 'access_token',
      value: res.data.accessToken,
      maxAge: 3600 * 24,
      ...cookieOptions,
    });

    cookies().set({
      name: 'refresh_token',
      value: res.data.refreshToken,
      maxAge: 3600 * 24 * 15,
      ...cookieOptions,
    });

    shouldRedirect = true;
  } catch (error: any) {
    console.error(error);
    if (error instanceof AxiosError)
      return {
        success: false,
        errors: error.response?.data.errors,
      };

    return {
      success: false,
    };
  }

  shouldRedirect && redirect('/');
};

Answer