Next.js Discord

Discord Forum

Redirect after sign out not working

Unanswered
Valentinh posted this in #help-forum
Open in Discord
Avatar
ValentinhOP
Hi everyone, I use Next.js 14.0.3 and I can't redirect an authenticated user to the Sign In page when he clicks on the "Sign Out" button.

Account page:
// Server components
import { cookies } from "next/headers";
import { COOKIE_SESSION_NAME } from "@/constants/index";
import SignOutButton from "@/components/molecules/SignOutButton";

const Account = async () => {
  const cookieStore = cookies();
  const cookieSession = cookieStore.get(COOKIE_SESSION_NAME);

  return (
    <SignOutButton jwt={cookieSession?.value}>Sign out</SignOutButton>
  );
};

export default Account;


SignOutButton:
"use client";

import React, { useState } from "react";
import { Button } from "@/components/atoms";
import { signOut } from "@/services/api/auth";
import { ButtonProps } from "@/components/atoms/Button";
import { AUTH_ROUTES } from "@/constants/index";
import { useRouter } from "next/navigation";

interface SignOutButtonProps extends ButtonProps {
  jwt?: string;
  redirectRoute?: string;
}

const SignOutButton: React.FC<SignOutButtonProps> = ({
  children,
  jwt,
  redirectRoute = AUTH_ROUTES.SIGN_IN,
  ...props
}) => {
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();

  const handleSignOut = async () => {
    setIsLoading(true);

    if (!jwt) {
      return;
    }

    await signOut(jwt);
    
    setIsLoading(false);
    router.push(redirectRoute);
  };

  return (
    <Button {...props} onClick={handleSignOut} isLoading={isLoading}>
      {children}
    </Button>
  );
};

export default SignOutButton;


signOut function:
export const signOut = async (jwt: string) => {
  try {
    await fetch(
      `${process.env.NEXT_PUBLIC_API_URL as string}/user/signout`,
      {
        credentials: "include",
        method: "POST",
        headers: {
          Authorization: `Bearer ${jwt}`,
        },
      }
    );
  } catch (error) {
    console.log(error);
  }
};

3 Replies

Avatar
ValentinhOP
The API call to /user/signout is ok, I get a 200 status but this code does not work (there are no errors):

router.push(redirectRoute);


I tried to do this: https://nextjs.org/docs/app/api-reference/functions/redirect#client-component
The URL changes to /signin but the page content does not refresh (but the Account page content remains displayed).

Do you know why I have this problem? Do you have a solution for me? Thank you
Avatar
Ray
try calling refresh 
router.push(redirectRoute);
router.refresh();
but I would use redirect() in signOut. you could use it with useTransition if you need pending ui