Create logout component

githublogout.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.

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.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin
graphql-handbook