the-road-to-react-with-firebase / react-redux-firebase-authentication

🔥Boilerplate Project for Authentication with Firebase in React and Redux
https://www.robinwieruch.de
285 stars 85 forks source link

Registering new user Issue #11

Open kaigouthro opened 5 years ago

kaigouthro commented 5 years ago

When i register with a random username and password, it registers the user immediately, but i get an error..

i've begun refactoring the entire project, moving folders around, pulling pieces out of files and moving them to different places. i've also made a version of this projecct where i ejected and added .less support and put semantic-ui-react with it as a test.. i'm going to be using about half the methods you've layed out and mix them with some other stuff from the last boilerplate i played with and cleaned up.. i cleaned it up and made it a bit shinier, but it's gone as far as it can go without a full teardown and rebuild with newer babel and webpack and it was missing a good system for local persisting auth and storage of user profiles and roles.. so i'm stealing that from you.. so it's important i get it right...

where is this error coming from (this is in a brand spanking new clone of the redux version)

i literally cloned, ran npm install, ran npm start, opened the browser, hit sign up, entered that data, hit submiit, got that error.

capture

kaigouthro commented 5 years ago

this happens with google, and with facebook sign ins as well. i get signed in/registered just fine, however the error message comes regardless what path is taken..

the moment my session crosses the threshold from logged out to logged in, that's the error. and it isn't writing to my database.

withgoogle

rwieruch commented 5 years ago

1) What does it say in your developer's console log? 2) Did you activate all the necessary sign in methods on your Firebase project's dashboard?

kaigouthro commented 5 years ago

yes. I can log in just fine with google and facebook, and link the accounts.. Because this is "create react app" there is no console log. it just sits frozen at

Compiled successfully! You can now view react-redux-firebase-authentication in the browser. Local: http://localhost:3000/ ... etc....

and

` npm run build

react-redux-firebase-authentication@0.2.0 build C:\Code Repo\react-redux-firebase-authentication-fork react-scripts build

Creating an optimized production build... Compiled successfully.

File sizes after gzip:

153.62 KB build\static\js\1.737a0a41.chunk.js 5.52 KB build\static\js\main.dc14d417.chunk.js 763 B build\static\js\runtime~main.229c360f.js 259 B build\static\css\main.27a2d3ee.chunk.css

The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed. You may serve it with a static server:

npm install -g serve serve -s build `

i get no errors in console, no log file created. everything works just perfectly, except that error shows up whenever i am authed.

maybe something to do with ..env file variables that you have that i don't?

i just put in the variables that were needed, worked like a charm first time.

i looked at every kind of logging my computer has going on, no errors anywhere in any of the logs in vscode, or console.

everything works, except it doesn't write users to the database, and it returns a permission error to the browser. Also, if i log in with my google account, which on firebase is the owner of the project, shouldn't that automatically make me an admin since all profiles are being saved to the profiles database and not the firebase database? (i know, it sounds ridiculous to even have to put it that way...)... i don't see why google saves authed users to a place where you have no access to user profile data, and have to store it seperatly in firebase.. having to pull users from one place and their profiles from another is ridiculous.. they ought to add a way to CRUD the user login data the same way you can manage the firebase data.....

.... anyway, whinging aside, i have no console logs or errors or anything.. clean as a whistle. i'm going to reboot... who knows, it's been on for 2 months, maybe i ought to see if it's something here.. one time i found i had a dev server spun up that i forgot about for 3 months, when i couldn't open a port for a dev server and found there was already a folder being served there that just was going on in the background....

i'll muddle around,

kaigouthro commented 5 years ago

$ yarn import yarn import v1.12.3 info found npm package-lock.json, converting to yarn.lock warning react-scripts > eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor. warning react-scripts > jest > jest-cli > prompts > kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s). info fsevents@1.2.4: The platform "win32" is incompatible with this module. info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation. warning "firebase > @firebase/messaging@0.3.7" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/storage@0.2.4" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/database@0.3.7" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/functions@0.3.3" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/firestore@0.8.8" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/storage > @firebase/storage-types@0.2.3" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/messaging > @firebase/messaging-types@0.2.3" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/database > @firebase/database-types@0.3.2" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/auth > @firebase/auth-types@0.4.0" has unmet peer dependency "@firebase/app-types@0.x". warning "firebase > @firebase/firestore > @firebase/firestore-types@0.7.0" has unmet peer dependency "@firebase/app-types@0.x". success Saved lockfile. Done in 18.86s.

this help???

ijmport with yarn and it says there's a shit-ton of dependencies ~not~ installed that firestore relies on.... i'm assuming you have those dependencies installed but didn't '--save' them in your package file. and NPM assumes everything is cool because it's got a lockfile saying so.... i think that's what the issue might be. so i'm going to install all the dependencies properly and give it another go.... bcause after more testing, the e-mail verification doesn't work either. so then i can't access most of the app because it blocks me with a "you need to verify your e-mail before i let you see anything" type message..

kaigouthro commented 5 years ago

Nope. Problem Seems to be an inability to communicate with the database though. for some reason, project will not connect to the database correctly, although it does connect to all the auth side of things perfectly. linked

kaigouthro commented 5 years ago

just replaced twitter with github, can log n with github too. logged in and linked facebook, google, local, and github. All's good in the auth hood. going to copy a static build of the project to a server with a domain and tell google that domain is safe... could be a problem that it doesn't like connecting to the database from my local address because i'm not HTTPS serving? that could be next on your tutorials! adding https to dev, or throwing in an https proxy on top of a CRA 2 project. OOH.. or how to prevent users from logging in until their e-mail has been verified, to prevent fake users.

kaigouthro commented 5 years ago

okay.. after trying, nearly everything, even refactored over 50% of the code.... it still exhibits the same behaviours..

this is a pure install direct download of your repository 10 miutes ago,

npm install npm run build

copied build folder to my server.

http://kaistestsite.com/

go check it out..

there is also another problem..

you can't enter the site from any other point than http://kaistestsite.com/.. same problem on dev and production build. localhost, etc...

if you try http://kaistestsite.com/home you get 404. if you try anything other than a naked url " / " you get a 404.

if i hit refresh on a page other than landing page.. 404... if i hit back in browser from 404, i get 404...

if i hit forward in browser from a page i was at prior to loanding, i get landing.

there's no persistence of authuser in store.

also, i was working with the project and refactoring and moving and sorting it into folders.. and i wondered how the code could not work.. you're an expert... i'm only a few months into learning react.

then i dropped in my own linting ruleset..... i got so many broken things, i threw my hands up in the air and said "Screw this, i am not fixing some 500+ errors"... a ton of them had to do with authuser and firebase not being properly introduced asa props..

the whole project is an absolute nightmare for ESLINT. i literally spent the past 16 hours straight in my chair with so few breaks that i have swollen ankles from sitting so long going over and over the code.

i don't know enough of your method to fix it.. i did manage to split a ton of it apart and shed a couple hundred lines of repetitive cod, everything still worked exactly how the broken original does. same results.

anyway.. i used enough of my time on this...

just thought you shoul,d have all this info so that you can be aware that you need to start over from scratch and not put entire multicomponent files together and doubling or in some cases going 5 times over something that you could just do in one step to get from a => b.

those 150 character long super-mega-nested lines are ridiculous...

you're an authority on this stuff. i'm new at this. you gotta do better, because people like me look up to people like you... so.. do better.

screenshot 2018-12-03 16 27 10 screenshot 2018-12-03 16 27 48

here's a zip file with my babel, eslint, and editor config. see if maybe you find all the erros i found.

react-redux-firebase-authentication.zip

haykerman commented 5 years ago

Guys, I've had this issue. Read the README.md There are security rules at the very bottom of the file.

  1. Copy them
  2. Go to Firebase Console here and select your project.
  3. Drawer (Left) Menu -> Develop -> Database
  4. At this point you will either see 2 cards for 2 different (Cloud Firestore, Realtime Database) databases or it will automatically choose Cloud Firestore, but at the header of the section, near the title, you will see a chooser with Cloud Firestore Selected. Select Realtime Database.
  5. Go to the rules tab.
  6. Paste what you've copied in 1
  7. Save
  8. Go back to your local development server (ex. localhost:3000) and delete site data from DevTools Application Tab if you're using Chrome.
  9. Reload the site
  10. Sign Up

After these steps the issue should disappear. Thank me later :)