CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jsnext-auth
seven
seven

Reputation: 1644

Next-auth redirects me back to dashboard after logout

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

Upvotes: 7

Views: 20384

Answers (3)

Bisrat
Bisrat

Reputation: 121

try this it might help you

onClick={() => {
    signOut({ redirect: false }).then(() => {
        router.push("/"); // Redirect to the dashboard page after signing out
    });
}}

Upvotes: 7

Lahiru Lanka Rathnayaka
Lahiru Lanka Rathnayaka

Reputation: 883

This is the correct way to Signout and redirect to a specific url

 signOut({ callbackUrl: 'http://localhost:3000/foo' })

If you need to redirect to a another website you can do it by modifying the callbacks object in [...nextauth.ts] file like this

  callbacks: {
   async redirect({ url, baseUrl }) {
    //this is the default behavior
    // Allows relative callback URLs
    if (url.startsWith("/")) return `${baseUrl}${url}`
    // Allows callback URLs on the same origin
    else if (new URL(url).origin === baseUrl) return url
    return baseUrl
   //Youcan add and modify it your usecase here
  }
}

Upvotes: 15

Konstantin Necahev
Konstantin Necahev

Reputation: 31

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

Upvotes: 3

Related Questions