v2 2.5.1 having issues with firebase auth

[unexpand]

Reproduction

What version of Remix are you using? 2.5.1

Are all your remix dependencies & dev-dependencies using the same version? Yes

Steps to Reproduce

npx create-remix@latest npm install firebase

In the root create file auth.server.js import { initializeApp } from "firebase/app";

import {
  signInWithEmailAndPassword,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "xxxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxx"
};

const app = initializeApp(firebaseConfig);



async function signIn(email, password) {
  const auth = getAuth(app);
  const result = await signInWithEmailAndPassword(auth, email, password);
  return result;
}

in the routes create login.tsx

import { signIn } from '../../auth.server';
import { createUserSession, requireUserId } from "../../utils/auth/session.server";
import Layout from "~/components/layout";



export const action = async ({ request }) => {
    let formData = await request.formData();

    let email = formData.get("email");
    let password = formData.get("password")
    

    const result = await signIn(email, password);
    log(result)
    /// never get the result


}



export default function Login() {
    
        return (
          
                      
                        <div >
                            <Form method="post">
                                <div >
                                    <label >
                                        Email
                                    </label>
                                    <div >
                                        <input type="text" name="email"
                                             />
                                    </div>
                                </div>
                                <div >
                                    <label >
                                        Password
                                    </label>
                                    <div >
                                        <input type={inputType} name="password" autoComplete="off"
                                            />
                                        <button type="submit" >
                                            Submit
                                        </button>
                                    </div>
                                </div>
                                
                            </Form>
                        </div>
          
             
        )
    }

System Info

Operating System:
──────────────────────────────────────────────────────────────────────────────────────────
Platform         : darwin
Distro           : macOS
Release          : 14.2.1
Codename         : macOS Sonoma
Kernel           : 23.2.0
Arch             : arm64
Codepage         : UTF-8
Build            : 23C71

System:
──────────────────────────────────────────────────────────────────────────────────────────
Manufacturer     : Apple Inc.
Model            : Mac14,9
Version          : 
Virtual          : 

CPU:
──────────────────────────────────────────────────────────────────────────────────────────
Manufacturer     : Apple
Brand            : M2 Pro
Family           : -634136515
Model            : 
Stepping         : 4
Speed            : 2.4
Cores            : 10
PhysicalCores    : 10
PerformanceCores : 6
EfficiencyCores  : 4
Processors       : 1
Socket           : SOC

Used Package Manager

npm

Expected Behavior

Firebase should return or response with token or error

Actual Behavior

It is stuck at await signInWithEmailAndPassword(auth, email, password); Will not return or throw error - hangs for indefinite amount of time.

[pcattori]

Please provide the entire output of npx envinfo --system --npmPackages '{vite,@remix-run/*}' --binaries --browsers run from within your Remix project so that it includes the declared and resolved versions of the relevant NPM packages.

[brophdawg11]

This seems like potentially a bug with the firebase setup, not with Remix?

[chuckmah]

same bug did you manage to make it work?

edit : seem like a regression in firebase 10.7.0 posted an issue using you repro at https://github.com/firebase/firebase-js-sdk/issues/7991

[vincent1114]

I believe firebase/auth is meant to run on the client only, at least I can see that it uses indexeddb and I don't think that's a thing in Node. https://medium.com/@jwngr/demystifying-firebase-auth-tokens-e0c533ed330c Check out this article mentioning the difference between client and admin firebase sdk.

For remix you probably want to use client sdk to generate tokens for a cookie based session on the frontend, and verify it on the backend (action, loader) with admin sdk.

[elmeerr]

this issue https://github.com/firebase/firebase-js-sdk/issues/7991 was closed because OP has found a different approach but I am wondering where the problem is (Firebase or Remix). According to this SO post: https://stackoverflow.com/questions/77843058/firebase-unresponsive-on-auth-signinwithemailandpassword problem might be on Remix side (new version)

[RobertGemmaJr]

I was on the same Firebase ticket (https://github.com/firebase/firebase-js-sdk/issues/7991) and am still having the issue. I moved everything to the client and had it generally working but now that I've moved to the Vite compiler I seem to be having the issue again? Or rather, the opposite issue?