Issues with 10.7.0 using client sdk auth with nodejs remix (requests hang and never return)

[chuckmah]

Operating System

ubuntu

Browser Version

node 20.10

Firebase SDK Version

10.7.0

Firebase SDK Product:

Auth

Describe your project's tooling

Remix application 2.5.1 using expressjs / nodejs

Describe the problem

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

Working fine with 10.6.0

Steps and code to reproduce issue

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>
          
             
        )
    }

[hsubox76]

Your repro files include a lot of references to imports that aren't there in a starter remix app, and I don't see where "action" is called. I removed those and minimized your login.tsx file to:

import { signIn } from '../../auth.server';

export const action = async () => {
    const email = "[email protected]"
    const password = "password";

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

}

export default function Login() {
  return (<div>
    <button onClick={action}>go</button>
  </div>);
}

After doing that, it works fine, I get Uncaught (in promise) FirebaseError: Firebase: Error (auth/user-not-found). which makes sense since that's a fake user. Are you calling action somewhere in your actual code? Is that something Remix automatically does?

[RobertGemmaJr]

I'm facing the same issue as OP. For me - the action is called correctly and the auxiliary code runs as it should. I have a call to const { user } = await signInWithEmailAndPassword(AUTH, email, password); which hangs indefinitely.

Since there's no logs in the Firebase Auth I'm unsure if the request is failing to make it to my Firebase app or if the return is failing to make it's way back (or, of course, if it's processing with an error). I can confirm that the user I'm testing with is in my production Firebase so it's not that problem

Are you calling action somewhere in your actual code? Is that something Remix automatically does?

Yes, the function is automatically called by Remix when a form is POSTed to the server.

[chuckmah]

for the record I was following that guy tutorial on using firebase auth with remix -> https://www.youtube.com/watch?v=y1vzJ9nQQBs , you can check his repo https://github.com/ianlenehan/my-remix-app

He effectively call the signInWithEmailAndPassword in the server (checkout out https://github.com/ianlenehan/my-remix-app/blob/master/app/utils/db.server.js) . After playing around a little bit I found that a better solution would be to call signInWithEmailAndPassword on the client., call /signin endpoint with the token and then on the server call verifyIdToken usign admin-sdk to create the proper session .. (all documented on https://firebase.google.com/docs/auth/admin/manage-sessions)

there cleary something in 10.7.0 because I when downgraded this worked.. but probably the client-sdk should not be used in a node server...

[NhienLam]

After playing around a little bit I found that a better solution would be to call signInWithEmailAndPassword on the client., call /signin endpoint with the token and then on the server call verifyIdToken usign admin-sdk to create the proper session .. (all documented on https://firebase.google.com/docs/auth/admin/manage-sessions)

1. This seems like the right way to do it. Could you try it and see if it works?

2. Does this only happen with signInWithEmailAndPassword? What about other Auth's methods?

3. Also, I found a similar issue on https://stackoverflow.com/questions/77843058/firebase-unresponsive-on-auth-signinwithemailandpassword. They said it worked when using a different Remix template or version. Could you try the same?

[google-oss-bot]

Hey @chuckmah. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[chuckmah]

yes you can close, like i said i moved my auth code in the client is its all fine

thanks very much for the support

[elmeerr]

@chuckmah what really bothers me is that the there is no answer to what actually changed and where the problem is (remix or firebase) ..As far as I remember if you use a client-side method on the server, firebase will complain...if those methods work before it would be nice to know why it is not working now. Gonna post the same on Remix topic that brought me here specially because there the issue is still open

(ps.: would you mind sharing the setup to call code from client)

[chrispowell23]

Does anyone have a basic auth setup example repo that works with the latest version of both Remix and Firebase? The code from Ian is so clean and simple (https://github.com/ianlenehan/my-remix-app). But he is calling the Firebase Client SDK (signInWithEmailAndPassword) in the Remix action function which is server-side, and that appears to no longer work or be correct.

Thanks in advance! I was able to get my code working, but the Firebase client says I'm logged out while the admin sdk fetches and validates the JWT, so there are still some issues with my setup.