Next.js Discord

Discord Forum

router.push redirect but don't change url

Unanswered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
Hi,

I have a problem with router.push(...) function
I correctly be redirect to the page but the URL stay the same, so some middleware or code don't execute correctly.

'use client';
... // other imports
import { useRouter } from 'next/navigation';

export function LoginForm() {
  const { lng }: paramsT = useParams() as paramsT;
  const router = useRouter();
  const { t } = useTranslation(lng, 'login');

  const [result, dispatch] = useFormState(authenticate, undefined);
  useEffect(() => {
      if (result && result.status === 'SUCCESS') {
        router.push(`/${lng}/app`);
      }
    }
  , [result]);

  ... // return <form>


In this example when I clic on Login form button, I receive auth server action result and I correctly be move to the correct page. But the URL stay /login ...

And it's the same with my logout button, the login form is render but the URL is /{lng}/app/... instead of /lng/login

I have the impression that this problem appeared after the node update from 14.1 to 14.2 but nothing for sure.

Other information :
Node : v20.9.0
Next : 14.2.1

thanks in advance for your help

6 Replies

Thrianta
Have you considered {redirect} from "next/navigation" and calling it from within the server action?
Also, what client logic does useTranslation have thats crucial to this component? Because this nearly looks like it could be a server component when using redirect
SiameseOP
I just try redirect and the result is the same ...
export async function authenticate(
  prevState: FirebaseResultT | undefined,
  formData: FormData,
): Promise<FirebaseResultT> {
  try {
    await signIn('credentials', formData);
    redirect('/app');
  } catch (error) {


And for logout : 
export async function logout() {
  await setToken();
  await signOut();
  redirect('/login');
}

(of course it's a 'use server'; file)

And for the useTranslation I have this in my component (this is just an example):
      <div>
        <Label htmlFor="email">
          {t('emailLabel')}
        </Label>
        <Input
          type="email"
          placeholder=""
          id="email"
          name="email"
          required
        />
      </div>

and I have password field with this
const [isPasswordVisible, setIsPasswordVisible] = useState(false);

type={isPasswordVisible ? 'text' : 'password'}
SiameseOP
I found a fix for the logout : 
export async function logout() {
  await setToken();
  await signOut({
    redirectTo: '/login',
  });
}
SiameseOP
New information: when I validate login form, the correct page is display but nothing was append in browser history (I can't use back button) and in next log I have this : 
(AUTH) not on dashboard but login, redirect to app page
http://localhost:3000/fr/app
(AUTH) On dashboard and login, no redirect
 POST /fr/login 303 in 440ms
 POST /fr/login 303 in 422ms

(The (AUTH) logs cames from auth middlerware)
it's look like next correctly redirect in server side but not in client side
SiameseOP
thanks for the link, I move the redirect call outside the try/catch
but this does not fix the problem