Create logout component

logout.tsx

Following the Remix tutorial example we build a logout action in ./app/routes/logout.tsx. We POST to it using a Form in root.tsx and include the CSRF token.

Copy
import { ActionFunction, LoaderFunction, redirect } from "remix";
import { destroySession } from "~/utils/sessions.server";
import { admin } from "~/utils/firebase.server";
import { getSessionData } from "~/utils/auth.server";

export const loader: LoaderFunction = async ({ request }) => {
  return redirect("/");
};

export const action: ActionFunction = async ({ request }) => {
  const { session, idToken } = await getSessionData(request, true);
  const jwtToken = await admin.auth().verifySessionCookie(idToken!);
  await admin.auth().revokeRefreshTokens(jwtToken.sub);
  return redirect("/", {
    headers: {
      "Set-Cookie": await destroySession(session),
    },
  });
};

You now should be able to run the app npm run dev and test out the login/logout.