Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unhandled Rejection (TypeError): Cannot read property 'roles' of null #24

Open
eldyvoon opened this issue Feb 4, 2019 · 32 comments
Open

Unhandled Rejection (TypeError): Cannot read property 'roles' of null #24

eldyvoon opened this issue Feb 4, 2019 · 32 comments
Labels
bug wontfix

Comments

@eldyvoon
Copy link

eldyvoon commented Feb 4, 2019

this block of code in firebase.js is throwing an error:

//if (!dbUser.roles) {...}

error
Unhandled Rejection (TypeError): Cannot read property 'roles' of null
@edguerrade
Copy link

As I can see, dbUser can't be null if there is authUser, so this error shouldn't happen if you don't remove the user data while it is authenticated

@eldyvoon
Copy link
Author

eldyvoon commented Feb 4, 2019

@edguerrade I didn't remove the user, the user exist in my db. But after I delete and reauth the user now it worked.

@joni43
Copy link

joni43 commented Feb 5, 2019

@edguerrade I didn't remove the user, the user exist in my db. But after I delete and reauth the user now it worked.

Hello, I'm a beginner in firebase, and have the same issue. DId you remove the user in firebase db to solve it?

@rwieruch
Copy link
Member

rwieruch commented Feb 6, 2019

I guess this bug happens when you are in between of the implementation of the authentication user and database user. My advice is to start from a clean slate by

  • deleting the user in the Authentication Database (see Authentication Tab on Firebase Dashboard)
  • deleting the user in the Realtime Database (see Database Tab on Firebase Dashboard)
  • busting the cache of the application, because of local-storage (see screenshot)

screen shot 2019-02-06 at 13 29 37

@eldyvoon
Copy link
Author

eldyvoon commented Feb 6, 2019 via email

@alfieqashwa
Copy link

I had an issue and have been fixed by the start from a clean slate's guide. Danke.

error-firebase-authentication

@oximer
Copy link

oximer commented Apr 2, 2019

I'm having the same issue

@rwieruch rwieruch added wontfix and removed question labels Apr 5, 2019
@rwieruch
Copy link
Member

rwieruch commented Apr 5, 2019

Did you try #24 (comment) @oximer ?

@Parv3sh
Copy link

Parv3sh commented Apr 18, 2019

Tried. But doesn’t work. Followed all 3 steps. Still getting the same error. Although I started with a clean slate.

@Parv3sh
Copy link

Parv3sh commented Apr 18, 2019 •
edited
Loading

Screen Shot 2019-04-18 at 10 39 41 am

Can't purge the entire cache for some reasons.

@Parv3sh
Copy link

Parv3sh commented Apr 18, 2019

Figured it out. Instead of defining the roles in Sign Up like roles[ROLES.ADMIN] = ROLES.ADMIN;
do roles.push(ROLES.ADMIN); And also initiate roles like const roles = []; instead of {};

@eltel
Copy link

eltel commented Apr 24, 2019 •
edited
Loading

Hi guys

None of these fixes are working for me, it all started with Facebook login - is anyone aware of any other fixes??

I'm even having the same problem using the author's code :(

edit: Currently backtracking to before adding FB login

Thanks

Terry

@eltel
Copy link

eltel commented Apr 24, 2019

Right, still the same bug - this is a big problem - I've followed the code to the letter and keep coming back to the same issue. I have users in my DB - the problem appears to be 'roles' crashing the app every time - does anybody have a workaround for this? I've basically lost 15+ hours trying to resolve this.

Any tips most welcomed.

@rwieruch
Copy link
Member

rwieruch commented Apr 24, 2019 •
edited
Loading

Can you share your code? Any link to a GitHub project? Otherwise we can just guess what's going on.

@eltel
Copy link

eltel commented Apr 24, 2019 via email

@eltel
Copy link

eltel commented Apr 25, 2019 via email

@eltel
Copy link

eltel commented Apr 27, 2019

So, after spending many more hours trying to work around this, I've still had no joy - the current GH repo has @Parv3sh solution:

Figured it out. Instead of defining the roles in Sign Up like roles[ROLES.ADMIN] = ROLES.ADMIN;
do roles.push(ROLES.ADMIN); And also initiate roles like const roles = []; instead of {};

but that didn't change anything, my original code followed the book:

const roles = {};
if (isAdmin) {
roles[ROLES.ADMIN] = ROLES.ADMIN;
}

Here is my current repo again:

https://github.com/eltel/reactFirebase

I even tried pasting in Robin's code and no change. I'm literally losing what little hair I've got left over this, I rebuilt from scratch just to reach the exact same error :(

If anyone has a working repo I can compare with I'd be eternally grateful if you could share.

Thanks

Terry

@eltel
Copy link

eltel commented Apr 30, 2019

Hi @rwieruch - is there any news on this yet? I posted my repo and have hit a brick wall with this course.

Many thanks

Terry

@eltel
Copy link

eltel commented May 1, 2019

So, I gave up on getting Facebook to work - once I removed FB auth from the equation I managed to get the app to work with Twitter and Google login - but this is happening with both mine and @rwieruch 's code with exactly the same error message, I followed all the instructions to the letter and have had no trouble getting FB auth to work in other projects - so it would appear that it's definitely an issue with the 'roles' code as that's the exact same error being thrown with both of our code - is anybody else having this problem?? How did you get around it?

@Parv3sh
Copy link

Parv3sh commented May 2, 2019

@eltel Did you try getting rid of roles prop where ever you're using it to sign in a user using facebook? Since you're not assigning an Admin role to that. I think this should work for you.

@Parv3sh
Copy link

Parv3sh commented May 2, 2019

@eltel I tried giving a hit on your code. Couldn't reproduce the error though. Try above-mentioned solution first, hence or otherwise, walk me through for reproducing the error.

@Parv3sh
Copy link

Parv3sh commented May 2, 2019 •
edited
Loading

@eltel my suggestion at #24 (comment) might still not work for you since you're getting the error in firebase.js.
Update: I used your code. It's working totally fine at my end. I'm able to log in, using Facebook.

Couple things, you might want to look into.

  1. Clear database
  2. Clear authenticated users.
  3. Check that the firebase API keys are correctly configured in the firebase.js
  4. Check if the database rules are set to false. Which should be set true for both read, write initially. (I have got a hunch you missed this part)
  5. Check if the facebook is also correctly configured as suggested by @rwieruch here https://www.robinwieruch.de/firebase-facebook-login/.

If above doesn't work. Try below, which I did.

I used your code. changed nothing but firebase config since I created a new project for it.

  1. Set authentication for email, google and facebook as per your project requirements.
  2. Set Realtime database and not Firestore
  3. Set the rules for the above database to test mode.
  4. Login. And boom. I'm in.

If nothing works, then the way

if (!dbUser.roles) {
     dbUser.roles = [];
}

is defined, needs to be changed. Nonetheless, it's working totally fine at my end using your code.

Closes: #24

@eltel
Copy link

eltel commented May 2, 2019

Thanks, man, I'd done all of these beforehand - but the fact that it's only Facebook login that was giving me grief made it clear that there is where the problem was. I had followed @rwieruch 's post (https://www.robinwieruch.de/firebase-facebook-login/) to the letter...However, after recreating the Facebook app and following your first set of instructions - to quote your good self - 'boom! I'm in!!

You just got a whole heap of karma points mate, many thanks once again!! :)

@Parv3sh
Copy link

Parv3sh commented May 2, 2019

Glad to help. 👍

@rwieruch
Copy link
Member

rwieruch commented May 6, 2019

Super thankful for your help @Parv3sh It's so difficult for me to go through all issues for my projects recently, because there is only so much time I can put in to help with individual bugs and the lists of my open source projects keeps growing... That's why I am so grateful when I see the community sticking together to work on such issues. Thank you again and sorry @eltel for not being able to help here. I do my best to keep up with everything, but sometimes I cannot reply in time for issues :(

@eltel
Copy link

eltel commented May 6, 2019 via email

@xai1983kbu
Copy link

xai1983kbu commented Jul 16, 2019 •
edited
Loading

I encountered the same issue
the version of the book - 08 July 2019

I've recorded a video and it helped me figured out the source of error

road_to_firebase_error

As we can see before we getting the error

Unhandled Rejection (TypeError): Cannot read property 'roles' of null

we getting an error from the firebase
226
we can also find that error in console with help of React Tab (React Developer Tools)
4

The temporary fix I've made - commented out a line of code which invokes that error

class SignInFacebookBase extends Component {
    ...
    onSubmit = event => {this.props.firebase
      .doSignInWithFacebook()
      .then(socialAuthUser => {
        // Create a user in your Firebase Realtime Database too
        return this.props.firebase.user(socialAuthUser.user.uid).set({
          username: socialAuthUser.additionalUserInfo.profile.name,
          //email: socialAuthUser.additionalUserInfo.profile.email,
          roles: {}
        })
      })
      ...

After that change, I am getting Facebook User in my Real Time Database but without email and roles.
By the way the same situation for Google User, I don't see email and roles in my Real Time Database.

@vr1e
Copy link

vr1e commented Aug 27, 2019

Basically all three (Google, Facebook and Twitter) do the same for socialAuthUser.additionalUserInfo.profile.email.

It seems that email is not even inside additionalUserInfo but instead in socialAuthUser.user.email and the value is null for all three.

@xai1983kbu
Copy link

xai1983kbu commented Aug 27, 2019 •
edited
Loading

@vr1e did you fill Auth consent screen?
github.com/flutter/flutter/issues/33393#issuecomment-510395178
It seems after I've added all needed info (including privacy policy link) I managed to use socialAuthUser.additionalUserInfo.profile.email without getting an error.

@vr1e
Copy link

vr1e commented Aug 28, 2019

It seems that google and facebook logins somehow sorted themselves. Maybe it needed some time...
Twitter has it's own case. You have to enter Terms of service URL and Privacy policy URL in your App details page on https://developer.twitter.com. Then you can check Request email address from users on Permissions page.

image

@kewarrie
Copy link

kewarrie commented Jun 16, 2020 •
edited
Loading

Hi. I know this is an old issue, but I am currently facing this problem.

I have only setup one method for authentication i.e. Email / Password.

Steps to reproduce

  1. Sign In with an existing user, then Sign Out immediately.
  2. Without refreshing your browser, head over to the Sign Up page and create a new user.

Expected behavior

User is successfully signed up & signed in, then authUser is updated successfully after being merged with dbUser which is read from the database in firebase.js, i.e.

...

// *** Merge authUser & dbUser API ***
  onAuthUserListener = (next, fallback) =>
    this.auth.onAuthStateChanged(authUser => {
      if(authUser) {
        this.user(authUser.uid)
          .get()
          .then(doc => {
            const dbUser = doc.data();

            // if no roles, default to empty roles
            if (!dbUser.roles) {
              dbUser.roles = {};
            }

            // merge authUser & dbUser
            authUser = {
              uid: authUser.uid,
              email: authUser.email,
              displayName: authUser.displayName,
              emailVerified: authUser.emailVerified,
              providerData: authUser.providerData,
              ...dbUser,
            };

            next(authUser);
          });
      } else {
        fallback();
      }
    });
...

Actual behavior

Error: Unhandled Rejection (TypeError): Cannot read property 'roles' of undefined

From my personal investigation, it seems as though dbUser is not being read from the database.

This causes the dbUser variable to be undefined which throws the above error.

I'm not able to figure out why.

Current workaround

It seems as though refreshing the browser after you Sign Out, BUT, before you Sign Up a new user prevents the above error from happening.

Repository

A repository with the code that gives me the above error is available here.

**** UPDATE ***

This seems to be a Firebase JS SDK issue as there are a few related issues raised on the official Github repository, e.g. here.

@phuhuutin
Copy link

phuhuutin commented Mar 5, 2021 •
edited
Loading

i just fixed it.
firebase
if (!dbUser.roles) {
dbUser.roles = [];
}
signup
const roles =[];
if (isAdmin) {
roles.push(ROLES.ADMIN);
};
and most importantly,
signing
.set({
username: socialAuthUser.user.displayName,
email: socialAuthUser.user.email,
roles: [], // this one.
});
after changing roles into array you have to correct all of components that use roles as object so it can work with array. like:
Nav
{authUser.roles.includes(ROLES.ADMIN) && (

        )}

Admin

     const condition = authUser => authUser && authUser.roles.includes(ROLES.ADMIN);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug wontfix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests