Setting a timer for a long period of time, i.e. multiple minutes

Question

I want to use firebase auth with react native for Login and Signup but I got a yellow error:

Setting a timer for a long p

Answer 1

For firebase/firestore users: Rather than trying to mask / hide the warning, I simply reverted to the REST API. Works like a charm :)

• I'm using the firebase node package for auth
• I'm using regular HTTP calls for firestore (which also gets rid of the otherwise necessary atob and bto hacks)

Snippet below just uses an HTTP client (https://github.com/hardcodet/httpclient-js), you can use whatever works for you (e.g. fetch or axios).

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";
import "firebase/auth";
import {LoginStatus} from "./LoginStatus";
import {auth, User} from "firebase";
import {ApiResponse, DelegateBearerAuthClient, HttpClient} from "@hardcodet/httpclient";
import {Env} from "../../Env";



export class FirebaseClient {

    /**
     * Creates a simple API client to use with Firestore.
     * We don't want to use the JS package's implementation since it has issues with
     * long-running timers - see https://github.com/firebase/firebase-js-sdk/issues/97
     * @param idToken The user's ID token as retrieved through firebase auth
     */
    private static getFirestoreClient(idToken: string) {
        const projectId = Env.firebaseProjectId;
        const baseUri = `https://firestore.googleapis.com/v1/projects/${projectId}/databases/(default)/documents/`

        const authClient = new DelegateBearerAuthClient(async () => idToken);
        return new HttpClient(baseUri, {authClient});
    }


    /**
     * Use firebase auth for login etc. because lazy.
     */
    public static async userLogin(email: string, password: string): Promise {
        try {
            const credentials: firebase.auth.UserCredential = await auth().signInWithEmailAndPassword(email, password);
            return credentials.user;
        } catch (error) {
            console.error(error);
            return undefined;
        }
    }


    private static resolveStatus(errorCode: string): { user: User, status: LoginStatus } {
        switch (errorCode) {
            case "auth/invalid-email":
                return {user: undefined, status: LoginStatus.InvalidEmailAddress};
            case "auth/user-not-found":
                return {user: undefined, status: LoginStatus.UnknownUserId};
            case "auth/wrong-password":
                return {user: undefined, status: LoginStatus.WrongPassword};
            case "auth/email-already-in-use":
                return {user: undefined, status: LoginStatus.EmailAddressAlreadyInUse};
            case "auth/weak-password":
                return {user: undefined, status: LoginStatus.WeakPassword};
            case "auth/user-disabled":
                return {user: undefined, status: LoginStatus.UserDisabled};
            case "auth/expired-action-code":
                return {user: undefined, status: LoginStatus.InvalidActionCode};
            default:
                return {user: undefined, status: LoginStatus.Undefined};
        }
    }


    /**
     * Resolve the user's keys from the backend.
     */
    public static async getSomeUserData(firebaseUserId: string, idToken: string): Promise<...> {

        const client: HttpClient = FirebaseClient.getFirestoreClient(idToken);

        // userData here is the name of my collection in firestore. i'm using the user ID as the document ID
        var result = await client.getAs(`userData/${firebaseUserId}?key=${Env.firebaseApiKey}`);
        if (result.success) {
            const json = result.value;
            const foo = json.fields.foo.stringValue;
            const bar = json.fields.bar.stringValue;
            return ...
        } else {
            if (result.notFound) {
                // that document with that key doesn't exist
                console.warn("no document with key " + firebaseUserId);
                return undefined;
            }
            throw result.createError();
        }
    }


    public static async writeSomeData(idToken: string, firebaseUserId: string, foo: string, bar: string): Promise<...> {

        const data = {
            "fields": {
                "foo": {
                    "stringValue": foo
                },
                "bar": {
                    "stringValue": bar
                }
            }
        };

        // again, just do an HTTP post, use the firebase user ID as the document key
        const client: HttpClient = FirebaseClient.getFirestoreClient(idToken);
        const result: ApiResponse = await client.post(`userData?documentId=${firebaseUserId}&key=${Env.firebaseApiKey}`, data);

        if (result.success) {
            return ...
        } else {
            throw result.createError();
        }
    }


    /**
     * Gets the currently logged in user, if any.
     */
    public static getCurrentUser(): User {
        return auth().currentUser;
    }



    public static async sendPasswordReset(email: string): Promise {

        try {
            await auth().sendPasswordResetEmail(email);
            return LoginStatus.Success;
        } catch (error) {
            return FirebaseClient.resolveStatus(error.code).status;
        }
    }


    /**
     * Clears the current user from the session.
     */
    public static async signOut() {
        await auth().signOut();
    }
}

Note the idToken parameter - this is simply the ID token you get off the firebase User class:

        const user: User = await FirebaseClient.userLogin("me@domain.com", "mypassword");

        const idToken= await user.getIdToken(false);
        const data = await FirebaseClient.getSomeUserData(user.uid, idToken);