Issue with Context "unknown" in current release

[lisaross]

Amazing tutorial/code here! Just wanted to post that I'm seeing a discrepancy between what's showing on the demo at https://react-firebase-authentication.wieruch.com/home vs what happens when I fork and run your code with my Firebase credentials.

Here's the react dev tools on yours: https://d.pr/i/e5o10I (note the proper context and components showing in the side (authentication pushes to state in authUser properly etc)

Then, in a fresh install of what's in the repo here (with my working Firebase credentials) I see this: https://d.pr/Pm8VmY (note the Unknown tag in the context etc and upon logging in the state doesn't have authUser).

I'm still learning, so I'm not sure what is going on yet, but I'll do the usual googling and stack overflowing to see if I can figure out what's going on. If it's something in the code I'll try to do a PR with a fix, and if it's something I did / my config I'll come back and let everyone know in case they can use the info. Stay tuned! And thanks again for the work you're doing here. Great tutorials/books.

[rwieruch]

Is there any error showing up or does the project not work because of it? I am not often using React DevTools, so I am nut sure why this shows up as Unknown.

[lisaross]

Thanks for getting back to me! There isn't any error that I can find (nothing in console or linting), but it looks like I'm not able to pass the right "stuff" in through the higher order component. Anything I wrap in the higher orders creates that new bit. Super strange. Same thing happens on the 'signout' button (and signout fails altogether), for example. But the act of signin and signup do hit firebase (I can see the new users and the login updates the access logs, so I know my firebase creds are accurate) ... I wonder if something isn't compiling properly on my end. Maybe it's an ES6 compilation problem with the arrow function in this bit of code - this really does seem to be the thing that hates me 💥 💥

import React from 'react';

const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

export default FirebaseContext;

I'm going to post what I'm doing in a public repo, and also publish to a live server so you can see the behaviour, if you're interested. :) I'll keep at it. I'm learning a TONNE just trying to figure this out, even if it is driving me a bit mad 🤣

Now, one thing I did notice is this: https://d.pr/i/2Zrilj -- the signout button on yours is pointing to auth.js, which no longer exists in your master repo for the exercise. Is what is on the site at https://react-firebase-authentication.wieruch.com in sync with the master repo here? (I only ask because I was working on your tutorial last week and I had an auth.js file (before you put the higher order function in, I think), and I was able to get the authentication working no problem with that code. If you wouldn't mind having a quick look for me, I'd sure appreciate it. Thanks again!!

[rwieruch]

Hey @lisaross The unfortunate thing is that I overhauled the whole tutorial and you appeared to be in the middle of it :) A couple of hints:

This master repository is not in sync at the moment with the tutorial. You can find the branch which does the overhaul here called "walkthrough" but it is not merged yet. In this branch, every commit reflects one section of the tutorial. Every exercise of the tutorial links to one of these commits.

Don't care too much about the live version at this point too.

Sorry for causing you so much trouble! There are so many people going through this tutorial that I thought I need to revamp it. Maybe it helps you to step through the walkthrough commits one by one to see what I have changed along the way. For instance, everything related to Firebase has its own class now.

The next weeks I have ~8 more sections to release for this tutorial: role-based authorization, offline support, social logins such as Facebook and Google, and so on. Hope that's something that makes you happy again :D

[lisaross]

Hey that's all awesome, man, no worries. I'm totally happy and have learned a LOT already. Just picked up your road to react and taming the state courses. I'll have a look at the walkthrough branch and go through it to see if I can find my error. I'm sure it's me. I'm too new at the context stuff to catch little nuances. Thanks again for taking the time to do all this for us noobs :) Cheers!

[lisaross]

EUREKA! Ok it was actually a combination of three issues and likely ones others won't have when they go through this:

1. I was comparing my run of the repo with what you had on the site at https://react-firebase-authentication.wieruch.com/ which is not the same (so I assumed my tags were a problem -- they are not, and it appears to be the expected behavior.) WHEW! ✅
2. I created the db in Cloud Firestore, not Realtime Database... duh. ✅
3. When I was testing the login, I was testing with an account that was created in Firebase authentication BEFORE the database link was created. So, I had created a user that showed up under Authentication in the console, but it hadn't been given a db record to coincide with the checks on login etc. DUMB. Once I created a new user on BOTH the master and the walkthrough branches both WORKED PERFECTLY. ✅

So I was right: it was all me not understanding enough about the code, and your direction above pointed me in the entirely correct direction. Knowing I was on a goose chase with the comparison with the site that's in the "live" link in the repo https://d.pr/i/pACa9A made all the difference. Sorry to have wasted your time, and thanks again for your help!