Next.js Discord

Discord Forum

Redirect after sign out not working

Unanswered
Valentinh posted this in #help-forum
Open in Discord
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

@Valentinh 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**: js // 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**: js "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**: js 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); } };
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
but I would use redirect() in signOut. you could use it with useTransition if you need pending ui