Determine the existence of a Firebase Facebook user without the need to first create a user from an anonymous account

Question

Determine the existence of a Firebase Facebook user without the need to first create a user from an anonymous account

When working with Firebase, I am faced with the challenge of checking if a Facebook user exists without automatically creating a new user account. The situation arises when an anonymous user attempts to log in using their Facebook credentials, and I want this login attempt to fail if the Facebook account is not already linked to an existing user in my system.

My expectation was that using Auth.signInAndRetrieveDataWithCredential would result in an "auth/user-not-found" error if no matching user was found. However, instead of returning the expected error, a new user account is created. Is this behavior a bug or is it intentional?

let credential = firebase.auth.FacebookAuthProvider.credential(
        event.authResponse.accessToken)
    firebase.auth().signInAndRetrieveDataWithCredential(credential).then( (userCredential) => {
        let user = userCredential.user
        app.debug("DEBUG: Existing user signed in:"+user.uid)
        this.loginSuccess(user)
    }).catch( (err) => {
        app.error("ERROR re-signing in:"+err.code)
        $("#login_status_msg").text(err)
    })

On the other hand, using User.reauthenticateAndRetrieveDataWithCredential results in an "auth/user-mismatch" error when trying to use the Facebook credential with the anonymous user. While this error makes sense given the current user's status, I was hoping to receive an "auth/user-not-found" error if the credential does not exist - which unfortunately did not occur.

I am struggling to find a solution where I can allow an anonymous user to log in with Facebook and check if the provided credentials are linked to an existing user without creating a new account if one doesn't already exist.

The scenario driving this requirement is as follows: The system supports anonymous users;

A user initially logs in anonymously and later converts to a registered user by linking their account with Facebook.
If the app is uninstalled and then reinstalled,
The user starting up the app will be anonymous once again.
Upon attempting to log in using Facebook, the goal is to prevent the creation of a new user account if one is not already associated with the provided credentials. If a user ID already exists, the code should successfully transition from an anonymous account to the original user account.

javascript facebook firebase firebase-authentication

Answer 1

Answer №1

After some trial and error, I managed to come up with a solution that, although not too difficult to implement, does feel a bit like a hack.

When dealing with Facebook login using

signInAndRetrieveDataWithCredential(cred)

, there is an issue where the account gets created even if it doesn't already exist. To address this problem, we have to make sure we handle three key things:

Check if the account is new
Delete the current firebase-created account
Throw an error to break out of the current flow and return to the previous state

Having tested and implemented this solution, it appears to be functioning as intended:

// ...perform necessary steps for fb login and obtaining credentials:
const userInfo = await firebase.auth().signInAndRetrieveDataWithCredential(credential)

// Check if account is new from user info
const isNewUser = _.get(userInfo, 'additionalUserInfo.isNewUser', true)

// Delete newly created account and throw error if new user
if (isNewUser) {
  firebase.auth().currentUser.delete()
  throw new Error('Unable to locate existing account.')
}

// Proceed with normal login flow if user exists
return userInfo.user

I decided on this approach to ensure that users follow the "create account" process in my app. Adapting this to your scenario should be straightforward, something along these lines:

let credential = firebase.auth.FacebookAuthProvider.credential(event.authResponse.accessToken)

firebase.auth().signInAndRetrieveDataWithCredential(credential)
  .then(userCredential => {
    const isNewUser = userCredential.additionalUserInfo.isNewUser
    if (isNewUser) {
      firebase.auth().currentUser.delete()
      // Error will be caught in the catch block
      throw new Error("Unable to locate existing account.")
    }
    // Process login for existing user
    const user = userCredential.user
    app.debug("DEBUG: Existing user signed in:"+user.uid)
    this.loginSuccess(user)
  }).catch( (err) => {
    app.error("ERROR re-signing in:"+err.code)
    $("#login_status_msg").text(err)
  })

Answer 2

After some trial and error, I managed to come up with a solution that, although not too difficult to implement, does feel a bit like a hack.

When dealing with Facebook login using

signInAndRetrieveDataWithCredential(cred)

, there is an issue where the account gets created even if it doesn't already exist. To address this problem, we have to make sure we handle three key things:

Check if the account is new
Delete the current firebase-created account
Throw an error to break out of the current flow and return to the previous state

Having tested and implemented this solution, it appears to be functioning as intended:

// ...perform necessary steps for fb login and obtaining credentials:
const userInfo = await firebase.auth().signInAndRetrieveDataWithCredential(credential)

// Check if account is new from user info
const isNewUser = _.get(userInfo, 'additionalUserInfo.isNewUser', true)

// Delete newly created account and throw error if new user
if (isNewUser) {
  firebase.auth().currentUser.delete()
  throw new Error('Unable to locate existing account.')
}

// Proceed with normal login flow if user exists
return userInfo.user

I decided on this approach to ensure that users follow the "create account" process in my app. Adapting this to your scenario should be straightforward, something along these lines:

let credential = firebase.auth.FacebookAuthProvider.credential(event.authResponse.accessToken)

firebase.auth().signInAndRetrieveDataWithCredential(credential)
  .then(userCredential => {
    const isNewUser = userCredential.additionalUserInfo.isNewUser
    if (isNewUser) {
      firebase.auth().currentUser.delete()
      // Error will be caught in the catch block
      throw new Error("Unable to locate existing account.")
    }
    // Process login for existing user
    const user = userCredential.user
    app.debug("DEBUG: Existing user signed in:"+user.uid)
    this.loginSuccess(user)
  }).catch( (err) => {
    app.error("ERROR re-signing in:"+err.code)
    $("#login_status_msg").text(err)
  })

Answer 3

Answer №2

If you want to link and retrieve data using a credential, you can utilize the

linkAndRetrieveDataWithCredential

method:

let credential = firebase.auth.FacebookAuthProvider.credential(
    event.authResponse.accessToken);
anonymousUser.linkAndRetrieveDataWithCredential(credential).then( (userCredential) => {
  // The anonymous account is now upgraded to a permanent Facebook account.
}).catch( (err) => {
  // Handle error code: auth/credential-already-in-use
})

Answer 4

If you want to link and retrieve data using a credential, you can utilize the

linkAndRetrieveDataWithCredential

method:

let credential = firebase.auth.FacebookAuthProvider.credential(
    event.authResponse.accessToken);
anonymousUser.linkAndRetrieveDataWithCredential(credential).then( (userCredential) => {
  // The anonymous account is now upgraded to a permanent Facebook account.
}).catch( (err) => {
  // Handle error code: auth/credential-already-in-use
})

Answer 5

Answer №3

To find out if an email is linked to a specific provider, you can utilize the fetchSignInMethodsForEmail method. By using this method, you can determine whether the SignInMethods associated with the email contain Facebook.com or not.

Below, I have provided an example of how I handle these scenarios in my application. Although I am using an RxJavaWrapper in my code, the main concept remains the same:

 RxFirebaseAuth.fetchSignInMethodsForEmail(authInstance, email)
                .flatMap { providerResult ->
                    if (!providerResult.signInMethods!!.contains(credential.provider)) {
                        return@flatMap Maybe.error<AuthResult>(ProviderNotLinkedException(credential.provider))
                    } else {
                        return@flatMap RxFirebaseAuth.signInWithCredential(authInstance, credential)
                    }
                }
                .subscribe({ authResult ->
                  //Handle success
                }, { error ->
                  //Handle error
                })

Initially, I examine the providers linked to the user's email (this information can be obtained from the provider).
If the list of SignInMethods includes my credential provider, I generate an error; otherwise, I proceed to call my signInWithCredential method to create the user.
Continue with your workflow accordingly.

Answer 6

To find out if an email is linked to a specific provider, you can utilize the fetchSignInMethodsForEmail method. By using this method, you can determine whether the SignInMethods associated with the email contain Facebook.com or not.

Below, I have provided an example of how I handle these scenarios in my application. Although I am using an RxJavaWrapper in my code, the main concept remains the same:

 RxFirebaseAuth.fetchSignInMethodsForEmail(authInstance, email)
                .flatMap { providerResult ->
                    if (!providerResult.signInMethods!!.contains(credential.provider)) {
                        return@flatMap Maybe.error<AuthResult>(ProviderNotLinkedException(credential.provider))
                    } else {
                        return@flatMap RxFirebaseAuth.signInWithCredential(authInstance, credential)
                    }
                }
                .subscribe({ authResult ->
                  //Handle success
                }, { error ->
                  //Handle error
                })

Initially, I examine the providers linked to the user's email (this information can be obtained from the provider).
If the list of SignInMethods includes my credential provider, I generate an error; otherwise, I proceed to call my signInWithCredential method to create the user.
Continue with your workflow accordingly.

Answer 7

Answer №4

To tackle this issue without depending on the call to

linkAndRetrieveDataWithCredential

failing and resorting to the catch block for signing in the existing user, I opted to store the userID value returned by getCurrentAccessToken.

const { userID } = data;
this.props.setFacebookId(userID); // preserving userID on the server

In future, I can verify if this userID already exists when the user registers with facebook again.

Answer 8

To tackle this issue without depending on the call to

linkAndRetrieveDataWithCredential

failing and resorting to the catch block for signing in the existing user, I opted to store the userID value returned by getCurrentAccessToken.

const { userID } = data;
this.props.setFacebookId(userID); // preserving userID on the server

In future, I can verify if this userID already exists when the user registers with facebook again.

Determine the existence of a Firebase Facebook user without the need to first create a user from an anonymous account

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using JavaScript to open a window in ASPX page

Ending a connection to MS SQL server in node.js with mssql library

Why is my react-hook-form sending an array with no data when making an axios request?

Can one initiate a server within Zapier Code?

jqGrid display/hide columns options dialogue box

Once upon a time in the land of Storybook, a mysterious error message appeared: "Invalid version. You must provide a string

Accessing external data in Angular outside of a subscription method for an observable

AngularJS controllers and global scope management

Tips for maintaining the data type of a typed array in typescript while clearing it?

NodeJS making seven successful Ajax requests

Incomplete data retrieval issue encountered during .ajax call

WooCommerce Checkout and My Account Edit Address now feature dynamic selectable fields for improved customization options

React-Native: Issue with state not being updated despite using useEffect and fetch

The reason why Array.indexOf struggles to identify identical-looking objects

Improving the adaptive design of a breadcrumb navigation trail

What is the relationship between Angular's $watch function and a slider component?

What is the solution to resolving the error "null property 'role' cannot be read"?

How to eliminate spacing between slides in a 3D Carousel Slider using Bootstrap 5

Display the elements of a div at a reduced size of 25% from its original dimensions

Is there a way to extract the values from a range slider individually and then display them as the minimum and maximum values on the screen?