Login and Signup with email/password not working

[ajaman190]

Login and signup with email/password not working due to outdated Firebase authentication methods

Prerequisites

• I am running the latest version
• I checked to make sure that this issue has not already been filed

Issue Description:
Currently, the login and signup functionality with email/password is not working in our application. I have identified the issue as an outdated firebase authentication method used in the app. With the release of Firebase v9, all the authentication methods have changed, which requires an update in our app.

Expected Behavior:
The login and signup functionality should work smoothly, allowing users to authenticate with their email and password credentials.

Actual Behavior:
The login and signup functionality is not working, the app is showing an error message TypeError: undefined is not a function whenever a user tries to sign in.

Steps to Reproduce

1. Launch the app
2. Enter the email and password
3. Click on the "Sign in" button
4. Observe the error message "Authentication failed"

Proposed Solution:
Update the app's firebase authentication method to the latest version (Firebase v9). This should fix the issue and allow users to sign in and sign up using their email and password.

@shehand Please assign me this issue as a pre-task for GSOC23.

[ajaman190]

Hi @shehand, I have a question about Facebook authentication. After authenticating the user, what is the purpose of calling the createUser() function? I noticed that in this function, is attempting to create a user in the database with a reference to "Users" (I'm not sure where this is initiated) and then updating the data with a custom object.

However, based on my understanding from reading the documentation, after calling the signInWithCredentials function, Firebase stores the user data both locally (as currentUser) and on the Firebase user database. Please let me know if there are any errors in my understanding.

Path: app/screens/SignupScreen/signupScreen.js

onPressLogin() {
    LoginManager.logInWithReadPermissions(["public_profile", "email"]).then(
      result => this._handleCallBack(result),
      function (error) {
        alert("Login fail with error: " + error);
      }
    );
  }

  _handleCallBack(result) {
    let _this = this;
    if (result.isCancelled) {
      alert("Login cancelled");
    } else {
      AccessToken.getCurrentAccessToken().then(data => {
        const token = data.accessToken;
        fetch(
          "https://graph.facebook.com/v2.8/me?fields=id,first_name,last_name,gender,birthday&access_token=" +
            token
        )
          .then(response => response.json())
          .then(json => {
            const imageSize = 120;
            const facebookID = json.id;
            const fbImage = `https://graph.facebook.com/${facebookID}/picture?height=${imageSize}`;
            this.authenticate(data.accessToken).then(function (result) {
              const { uid } = result;
              _this.createUser(uid, json, token, fbImage);
            });
          })
          .catch(function (err) {
            console.log(err);
          });
      });
    }
  }

  authenticate = token => {
    const provider = auth.FacebookAuthProvider;
    const credential = provider.credential(token);
    let ret = auth.signInWithCredential(credential);
    return ret;
  };

  createUser = (uid, userData, token, dp) => {
    const defaults = {
      uid,
      token,
      dp,
      ageRange: [20, 30],
    };
    f.database()
      .ref("users")
      .child(uid)
      .update({ ...userData, ...defaults });
  };

[shehand]

Ideally, there should be a user data inside the 'user' collection, once the user is successfully login(only on first time). This is because there is no registration process for fb login(as it is login and not registering) and we have independent component which need user profile data. Here independent means the component are decoupled from one to other such that there is not peer dependency within components. Hope you get the idea.

[varun1002]

Hi @ajaman190 and @shehand i think i got the solution of this problem the problem is occurring because of the outdated imports from firebase in config.js and using wrong function from react-native-fbsdk i have made pr regarding this problem

#173
@shehand can u plz review this