注销后 Next-auth 将我重定向回仪表板

Question

I have a credential based auth flow in NextJS and a dashboard page I have also created custom AccessDenied component in case it not logged used would end up on the dashboard route, hence I did not set redirect in the getServerSideProps where I fetch the data. so my checkout handler looks like so

    onClick={() => {
            signOut();
            router.push("/");
          }}

but after I end up on the index page after a short while i am redirecte to the dashboard page, I don'tt understand why

This is my dashboard page

const DashboardPage = ({
  sessionData,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  const [renderedInfo, setRenderedInfo] = useState<RenderedInfo>();
  const matches = useMediaQuery("(max-width: 768px)");

  useEffect(() => {
    if (!matches) setRenderedInfo("UserDetails");
  }, [matches]);

  if (!sessionData) {
    return <AccessDenied />;
  }

  const { address, userEmail, avatar } = sessionData;
  const menuPanelVisible = !matches || (matches && !renderedInfo);
  const userDisplayName = address?.length ? address[0] : userEmail;
  return (
    <div className="flex-1 px-4 flex w-full justify-center">
      {menuPanelVisible && (
        <MenuPanel>
          <UserAvatar avatar={avatar} displayName={userDisplayName} />
          <DashboardNavigation setRenderedInfo={setRenderedInfo} />
        </MenuPanel>
      )}
      <InformationPanel
        renderedInfo={renderedInfo}
        setRenderedInfo={setRenderedInfo}
        address={address}
      />
    </div>
  );
};

export default DashboardPage;

interface GetServerSidePropsType {
  sessionData?: {
    address: string[] | undefined;
    avatar:
      | {
          url: string;
          width?: number | null | undefined;
          height?: number | null | undefined;
        }
      | null
      | undefined;
    userEmail: string;
  } | null;
}

export const getServerSideProps: GetServerSideProps<
  GetServerSidePropsType
> = async (context) => {
  const session = await unstable_getServerSession(
    context.req,
    context.res,
    authOptions
  );

  console.log({ email: session?.user.email });

  if (!session?.user.email) {
    return {
      props: {
        session: null,
      },
    };
  }

  const { data } = await personAuthApolloClient.query<
    GetPersonDetailsByEmailQuery,
    GetPersonDetailsByEmailQueryVariables
  >({
    query: GetPersonDetailsByEmailDocument,
    variables: {
      email: session.user.email,
    },
  });

  const address = data.person?.address;
  const avatar = data.person?.avatar;
  const sessionData = { address, avatar, userEmail: session.user.email };

  return {
    props: { sessionData },
  };
};

What do I need to do to stay on the index page after redirect on logout?

Thanks

Answer 1

This is because next auth didn't make signout correctly and it still thinks that your session is valid, if U want correctly make signOut from a session U would need to provide callback Url in your signOut function like signOut({ callbackUrl: your-provider-id }), where callbackUrl must be id of your current provider, U can take this provider from a session object