Firebase authentication expired token issue

[alexluong]

Hi, I'm playing around with authentication with Remix and ran into a bit of a problem with Firebase authentication.

My setup is that when a user signs in with Firebase, I'll create a new cookie session storage with the idToken from Firebase. This token expires after an hour, in which case I will need to fetch a new idToken from the FE and update the cookie again.

Everything works great except for the case when a user comes back to an authenticated route after their token has expired. Because the idToken is expired, the route will throw a 401 error. As the FE code rehydrates, Firebase will fetch a new idToken and update the cookie. However, the users will still need to refresh the page for everything to work correctly.

Currently, I have an effect in the CatchBoundary to reload the page every 1s to see if the new token has been refreshed. However, this seems like a bit of a hack. I wonder if there's a more elegant solution to the problem.

useEffect(() => {
  if (typeof window === "undefined") return;
  if (caught.status !== 401) return;
  if (caught.data?.type !== "expired_token") return;
  const timeout = setTimeout(() => window.location.reload(), 1000);
  return () => clearTimeout(timeout);
}, [caught]);

[ccssmnn]

Hey, I think the solution here is to use "the remix approach".

Firebase by default handles authentication, tokens and the like on the client. Usually you would handle sessions and cookies on the server. Which is why remix provides elegant tooling for this.

The approach is the following:

1. In a login form, send email and password to the server
2. In your action, call signInWithEmailAndPassword in your server. Yes, its the client-sdk we will use here.
3. Still in your action, use the client-sdk to generate a JWT
4. Still in your action, use the JWT to generate a firebase session cookie (a string) and store it as a value in the remix session cookie.
5. Respond to the login request with the remix session cookie

This cookie can live up to two weeks, which should be enough. Verify the token from the cookie using the firebase-admin methods. You are now handling the auth state in a way which is actually normal for web applications. For frequent visits, you could refresh the cookie serverside to keep the users authenticated for more than two weeks.

[ccssmnn]

To provide you some code:

// in your sessions.ts
import { createCookieSessionStorage } from "remix";

export const { getSession, commitSession, destroySession } =
  createCookieSessionStorage({
    cookie: {
      name: "session",
      secrets: ["my-secret"],
      maxAge: 60 * 60 * 24 * 7, // 1 week
      sameSite: "strict",
      httpOnly: true,
    },
  });

// in your login route ...
export const loader: LoaderFunction = async ({ request }) => {
  const session = await getSession(request.headers.get("cookie"));
  // check if the user is already logged in
  const { uid } = await getServerAuth()
    .verifySessionCookie(session.get("session") || "")
    .then((decodedToken) => decodedToken)
    .catch(() => ({ uid: undefined }));
  // redirect authorized users
  if (uid) {
    return redirect("/app");
  }
  return json(
    {},
    {
      headers: {
        "Set-Cookie": await commitSession(session),
      },
    }
  );
};

type ActionData = {
  error?: string;
};

export const action: ActionFunction = async ({ request, params }) => {
  // first we validate the form
  const form = await request.formData();
  const email = form.get("email");
  const password = form.get("password");
  const formError = json(
    { error: "Please fill all fields!" },
    { status: 400 }
  );
  if (typeof email !== "string") return formError;
  if (typeof password !== "string") return formError;
  // sign in the user with the client sdk
  const { user, error }: { user?: User; error?: string } =
    await signInWithEmailAndPassword(getClientAuth(), email, password)
      .then(({ user }) => ({ user }))
      .catch((error) => ({ error: getErrorMessage(error.code) }));
  // return appropriate response, if sign in fails
  if (!user || error) return json({ error }, { status: 401 });
  // this is still a client sdk method
  const idToken = await user.getIdToken();
  const expiresIn = 1000 * 60 * 60 * 24 * 7; // 1 week
  // this is a firebase-admin method
  const sessionCookie = await getServerAuth().createSessionCookie(idToken, {
    expiresIn,
  });
  // send the generated session cookie to the client with remix utilities
  const session = await getSession(request.headers.get("cookie"));
  session.set("session", sessionCookie);
  return redirect("/app", {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
};

[ccssmnn]

When using OAuth you could

1. sign in the user on the client
2. generate the token
3. send the token to the server and generate the sessioncookie
4. all other calls dont need client side firebase anymore, since auth is in your sessioncookie

[alexluong]

Thanks, this is what I've been doing and it works quite well but it just kinda feels wrong 😂 Thanks for your help tho

[ccssmnn]

You're welcome 👍 Sounds like a reasonable approach to me. Nothing to feel wrong about. Overall, if UX is good and the code complexity is low, you're in a good spot.

[Ehesp]

I've been simply setting the firebase auth client to in memory persistence, then when the user signs in pass the id token (via getIdToken) to the action, create a firebase session cookie via the admin sdk and store it in a cookie with remix.

That way the server doesn't need to mess around with using the client sdk.