Redirect after sign out not working
Unanswered
Valentinh posted this in #help-forum
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:
SignOutButton:
signOut function:
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
The API call to
I tried to do this: https://nextjs.org/docs/app/api-reference/functions/redirect#client-component
The URL changes to
Do you know why I have this problem? Do you have a solution for me? Thank you
/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
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