Migrating Auth state from Firebase JS SDK to React Native Firebase

[rustygloves]

Our react-native app was previously using the JS SDK with reactfire

We are in the process of migrating to React Native Firebase. For the best user experience I am trying to persist the auth state across releases.

We are using custom tokens for authentication.

My current implementation is flawed, I realise now as the token stored in EncryptedStorage is the one that is returned from auth.createCustomToken(uid) on the backend, which I believe expires after an hour. The saving to EncryptedStorage is a legacy feature of the app which led me to believe this token is actually of use, but I do not think it is

This a simplification of the current implementation:

const authPersistenceKey = `firebase:authUser:${Firebase.apiKey[STAGE]}:[DEFAULT]`;

const signInWithToken = async (token: string) => {
  await auth().signInWithCustomToken(token);
};

export const checkForToken = async () => {
  let token = null;
  if (auth().currentUser) return; // already signed in

  try {
    // This is the custom token
    token = await EncryptedStorage.getItem(TOKEN);
    if (token) {
      await signInWithToken(token);
      return;
    }
  } catch (error) {
    await EncryptedStorage.removeItem(TOKEN);

    const legacyAuth = await AsyncStorage.getItem(authPersistenceKey);

    if (legacyAuth) {
      token = JSON.parse(legacyAuth)?.stsTokenManager?.accessToken;
      if (token) {
          await signInWithToken(token);
          return;
      }
    }
  }
};

My question is essentially, will it be possible to re-autenticate with the stsTokenManager.accessToken or stsTokenManager.refreshToken or do I need to create a backend function to generate a new custom token using information in the legacy persistence to verify the user?

Am I missing something entirely and there a simpler way to do this?

[gpawlik]

@rustygloves have you ever managed to implement that logic?

[rustygloves]

We ended up sending the old token to our server, checking it and then regenerating a new sign in token to send to the client to re-authenticate with the native sdk

[gpawlik]

Would you be able to point me to the direction on which functions to use for regenerating new sign in token and re-authenticate? Does it work for both regulat auth and social auth?

[rustygloves]

We did this a while ago so my memory is a little rusty but I have a few breadcrumbs for you. Hope they help.

We use auth().signInWithCustomToken(token) for our sign in. And we generate this token on our server. We also had it in EncryptedStorage so we could use that to re-auth into the native SDK.

We did also find that you could grep the token from AsyncStorage:

const legacyAuth = await AsyncStorage.getItem(`firebase:authUser:${conf.Firebase.apiKey[STAGE]}:[DEFAULT]`);
const token = JSON.parse(legacyAuth)?.stsTokenManager?.accessToken;

We also have this function on our backend which checks if a JWT token is mostly valid but expired.

import { type DecodedIdToken, getAuth } from "firebase-admin/auth";

import { jwtDecode } from "jwt-decode";
import { verify } from "jsonwebtoken";

import { getGooglePublicKey } from "./get-google-public-key";
import { isFirebaseError } from "../util";

const auth = getAuth();

/**
 * Verifies the ID token. If the token has expired, it checks that the id token was signed by firebase.
 * @param {string} accessToken
 * @return {Promise<DecodedIdToken | undefined>} the decoded token
 */
export const verifyIdToken = async (accessToken: string): Promise<DecodedIdToken | undefined> => {
  try {
    return await auth.verifyIdToken(accessToken);
  } catch (e) {
    // if the token is expired, we need to check the signature
    // we know that the token is for the correct project because if it wasn't, we'd get a different error
    if (isFirebaseError(e) && e.code == "auth/id-token-expired") {
      const decodedToken: DecodedIdToken = jwtDecode(accessToken);

      // check that the token is signed with RS256 and has a kid
      const { alg, kid: currentKeyId } = jwtDecode(accessToken, { header: true });
      if (alg !== "RS256" || !currentKeyId) return;

      const { publicKey } = await getGooglePublicKey(currentKeyId);

      try {
        // this will throw an error if the signature is invalid
        verify(accessToken, publicKey, {
          algorithms: ["RS256"],
          ignoreExpiration: true, // we are checking the signature, we already know the token is expired
        });

        return decodedToken;
      } catch (e) {
        return;
      }
    } else {
      return;
    }
  }
};