Man, this is the best and the most straightforward tutorial on Planet Earth! All that's needed in one simple package, delivered by an awesome man in a clear and concise manner. Max karma and lots of love!
Maksim, thanks for making the code available and a great walkthrough. I'm using this as a base for a university course I'm doing. This was the clearest explanation I found so far for a vanilla nodejs app with firebase without having to use a frontend framework. Keep it up!
Greetings from Armenia.. liked your style.. it's very first video I've seen from you.. Just explored your channel, there's a lot of good stuff.. so Thanks man!
Amazing video! Do you have any suggestions on how to proceed if-say-I'd like to integrate it with a database (mysql or postgres) and start to some basic REST/GraphQL resources?
Thanks for this video! I was just wondering, if you write all the firebaseConfig data to html, is it visible to all users and so on everyone are access to your data?
Super helpful! As a next step, I'd like to know how we can retrieve info about the logged in user (on the server-side) once they are logged in - both at the moment that they successfully log in and on subsequent page requests. My goal is to serve up content that is specific to the user that is logged in.
I eventually figured this out myself. In the then() block for verifySessionCookie(), you are passed a user object, which contains the user ID, user name, etc. It might be helpful to add that to your repo just to demonstrate that you can grab the user's info at this point, and then add it to the request object, for use later in the request processing chain.
when you send the csrf-token we have a middlewere from "csrf" package that will handle it automatically it will check if the csrf-token that was on post request was acctually created by server or not if its determines that csrf-token was not created by server it will not let the request to go to next middleware and throw error there or if it determinne that csrf-token was inded created by server it will pass it to next middleware .
This is awesome! Thank you. Since we are removing the client-side persistence, will the user have to re-login on every page refresh? Is there a way to use server-session AND keep the user logged in on refresh/future visits? Or are these two things mutually exclusive?
@@satansdeer1 I think maybe just the deep linking aspect. I've seen a couple of apps that I believe are built with RN use magic links (where you get a special token-ified link to your e-mail which then takes you to an app and authenticates) but I have not been able to find any good, detailed content on it.
Is there any way to decode sessionCookie or retrive user uid on the server side? I am making a protected route for one specific user and need user uid there. Great tutorial thanks!
Do you see any problem in keeping the Firebase persistence in the browser? This way you could use Firebase directly on the browser, and use the Node back-end just to verify the user's identity before hitting the backend's database. Also, you could renew the session without the user's interaction after the cookie expires. Obviously, upon logout, you'd have to logout from both firebase and the back-end. I personally find it kinda strange that we can't perform an Authorization Code flow with Firebase, so if we must get the tokens in the browser I'm thinking "well at least I can use the tokens directly in the browser", do you agree? :) Btw, I'm talking about SPAs with a back-end on the same domain.
Thanks for the video but i had the change the name of the cookie to __session, firebase hosting with cloud functions will strip all cookies except __session
Hey, I've ran into the same problem as you, but the rename to "__session" hasn't fixed it. Basically some browsers seem to block 3rd party cookies as default (Safari, and I think Chrome on mobile, but not desktop), so if your server and React front-end are hosted in different locations they won't permit cookies being stored in the browser. My suspicion is that it can be solved by changing csurf to session management instead of cookie management. I just wondered if you'd encountered this problem?
Do you keep your serviceAccountKey.json just like that? I am trying to instantiate firebase admin SDK in a Netlify function by passing the values of the account key which I store as environment variables. Locally it works when running Netlify dev, but when I deploy, it gives me an "Invalid grant: account not found" error when the function runs. Any clue how to best go about this?
What do you think the best way to add the auth in the routes to become middleware called from a separate middlewares file rather than from with server.js?
How do I run this brilliant project locally? And how do I 'deploy' the project to Firebase? My own answer: Copy the contents of step-2 into your local 'firebase folder' Make the required changes - get your own key, etc. To run the project locally type 'npm start' - it had been forgotten Finally: When I deploy to Firebase I don't know what URL to call, any help?
Hey Maksim, I've encountered a problem whereby I get errors from browsers (Safari and Chrome on mobile) that give warning messages saying they've blocked 3rd party cookies. My understanding is that the problem is the csurf requires a cookie to be sent from the server to the browser (3rd party since they're on different servers). I was wondering if 1. I've understood the issue correctly, and it's not just some human error in my code, and 2. if you have any suggestions to best navigate this issue?
Hey its a long shot, but I tried to implement this logic with firebase hosting and i get session verification ERROR reason: Decoding Firebase session cookie failed error, which is caused by req.cookies.session || "" being undifiened, do you have a guess what could be the problem (works locally)
it's not working in my code. I am using express js as the backend and Vue js as the front end. I want to set a custom claim in a user account. I need help. Please help me.
Firstly, thanks for this content. Secondly, If I'll implement an NodeJS API and this API will serve an Angular Project, This implementation also will be effective? Many thanks for this video.
Thanks Maksim! It helped me so much. How do I use the login page as a middleware for different routes ? Currently its getting redirected to profile page by default (window.location.assign("/profile"))
Hello Maksim, I have authenticated my backend using your video but even after getting everything right, I can't access my database from nodejs backend with rules read/write: auth !== null. Each time it gives me "Client doesn't have permission to access the desired data." error. It will be awesome if you could help :)
I got the following error: Could not find a required file. Name: index.html Searched in: /home/jrd656/Desktop/FireBaseMaksimExpress/firebase-server-auth/step-1/public I've changed the scripts in package.json to: "start": "node server.js" This seems to have fixed it. More details on the error below: I cloned the git, opened Step 1 in VS Code. Ran 'npm i'. Ran the 'start' script. Trying to figure this out now... In my error log: 11 silly lifecycle firebase-server-auth@0.1.0~start: Returned: code: 1 signal: null 12 info lifecycle firebase-server-auth@0.1.0~start: Failed to exec start script 13 verbose stack Error: firebase-server-auth@0.1.0 start: `react-scripts start` 13 verbose stack Exit status 1
@@satansdeer1 I tried it again without success. Basically I cloned the repo, opened Step 2 and ran 'npm i'. Then I ran the 'build' script. I get the following error: Could not find a required file. Name: index.html Searched in: /home/jrd656/Desktop/FireBaseMaksimExpress/maksim2/firebase-server-auth/step-2/public npm ERR! code ELIFECYCLE npm ERR! errno 1 ...
Hello i commented on your previous video about my express/react/firebase app. So far i have everything working but the only problem is that i have a collection of users in my firebase database that has all my users details for their profile which i save in redux. I have a function running on the top level component checking for onAuthStateChanged and if theres a user i get the user IdToken then i send that IdToken to my express server, verify it, and return my users details from the database to save it to my redux store. The problem is that this whole functionality takes around 100ms to complete and my auth route does not get my users details quick enough so it redirects my user out of the private route before i can show them their profile. What is the best way i can go about this to persist my user in redux. I need to be able to get user data from the collections on firebase or i cant show all my users details on their profile. Sorry for the long comment and advice would help thanks!!
Man, this is the best and the most straightforward tutorial on Planet Earth! All that's needed in one simple package, delivered by an awesome man in a clear and concise manner. Max karma and lots of love!
You're a life saver. Your videos to the rescue everytime I'm stuck somewhere. May the force be with you.
Loved that you explained everything in a easy way, and even applied security.
please help me i want to display user attribute such as user name,email, etc in profile page how can I
@@KundanKumar-uj2in firebase.auth().currentUser returns the user object who is authenticated. You can use this informations.
This is the project I have been looking for, thank you 🙏🙏🙏
Believe me man your content is GOLD!. Make more videos on NodeJS.
Maksim, thanks for making the code available and a great walkthrough. I'm using this as a base for a university course I'm doing. This was the clearest explanation I found so far for a vanilla nodejs app with firebase without having to use a frontend framework. Keep it up!
Funny enough, I was trying to get ahead in your class. Good to know I found a good reference.
@@Ethan-nv5pu 😆
@@Ethan-nv5pu hahahaha
Greetings from Armenia..
liked your style.. it's very first video I've seen from you.. Just explored your channel, there's a lot of good stuff.. so Thanks man!
You've been hoovering up my likes over the last few days Maksim. Thank you!
Thank you for your really helpful content !
Awesome tutorial! Just what I needed.
Very interesting and insightful. Trying to build something here in Canada
Thank you! Your video was very helpful.
Amazing video! Do you have any suggestions on how to proceed if-say-I'd like to integrate it with a database (mysql or postgres) and start to some basic REST/GraphQL resources?
This is a really good demonstration. I request to make a tutorial of creating an API and explain only about the backend. BTW, thanks a lot.
I like your style. Good luck
Thanks for this video! I was just wondering, if you write all the firebaseConfig data to html, is it visible to all users and so on everyone are access to your data?
This is where you need to write strong read and write rules on the database. i.e. only allow read/write when a user meets the login requirement
@@kayderl is there a way to implement firebase without having to put the firebaseConfig data in the html or even in the serviceAccountKey.json file?
Thanks! This helped a lot.
you just got a new subscriber.
Super helpful! As a next step, I'd like to know how we can retrieve info about the logged in user (on the server-side) once they are logged in - both at the moment that they successfully log in and on subsequent page requests. My goal is to serve up content that is specific to the user that is logged in.
I eventually figured this out myself. In the then() block for verifySessionCookie(), you are passed a user object, which contains the user ID, user name, etc. It might be helpful to add that to your repo just to demonstrate that you can grab the user's info at this point, and then add it to the request object, for use later in the request processing chain.
Very good explanation, thank you. I am confused though. What happens to the "CSRF-TOKEN" after it is sent to the server in the POST request?
when you send the csrf-token we have a middlewere from "csrf" package that will handle it automatically it will check if the csrf-token that was on post request was acctually created by server or not if its determines that csrf-token was not created by server it will not let the request to go to next middleware and throw error there or if it determinne that csrf-token was inded created by server it will pass it to next middleware .
This is awesome! Thank you. Since we are removing the client-side persistence, will the user have to re-login on every page refresh? Is there a way to use server-session AND keep the user logged in on refresh/future visits? Or are these two things mutually exclusive?
Buen video, me ayudaste con un problema que estuve por dias. Jaja, me falta aprender bastante aun sobre estos temas
Gracias, estoy feliz de ayudar
Would love to see some walk-through on implementing Firebase Magic Links (passwordless) auth, especially for something like react-native
is there anything special about firebase auth with react-native?
@@satansdeer1 I think maybe just the deep linking aspect. I've seen a couple of apps that I believe are built with RN use magic links (where you get a special token-ified link to your e-mail which then takes you to an app and authenticates) but I have not been able to find any good, detailed content on it.
This was great - thanks!
Is there any way to decode sessionCookie or retrive user uid on the server side? I am making a protected route for one specific user and need user uid there. Great tutorial thanks!
Cool! thank you very much!
drunk Dev Ed has a new channel
I keep getting invalid csrf token :( Anyone know how to fix?
Do you see any problem in keeping the Firebase persistence in the browser? This way you could use Firebase directly on the browser, and use the Node back-end just to verify the user's identity before hitting the backend's database. Also, you could renew the session without the user's interaction after the cookie expires. Obviously, upon logout, you'd have to logout from both firebase and the back-end. I personally find it kinda strange that we can't perform an Authorization Code flow with Firebase, so if we must get the tokens in the browser I'm thinking "well at least I can use the tokens directly in the browser", do you agree? :) Btw, I'm talking about SPAs with a back-end on the same domain.
Thank you. You saved me
why use csfr token if firebase auth is good it self??
Hello,
Shouldn't I be afraid of exposing all my Firebase config datas to the public in an html file?
@Sushanth Bobby when u say service account keys are referring to the data in the serviceAccountKey.json file? if so, how would hide it?
@Sushanth Bobby I mean when the server is live and the Json file is live on the server
Thanks for the video but i had the change the name of the cookie to __session, firebase hosting with cloud functions will strip all cookies except __session
Thanks, this is very important.
Hey, I've ran into the same problem as you, but the rename to "__session" hasn't fixed it. Basically some browsers seem to block 3rd party cookies as default (Safari, and I think Chrome on mobile, but not desktop), so if your server and React front-end are hosted in different locations they won't permit cookies being stored in the browser. My suspicion is that it can be solved by changing csurf to session management instead of cookie management. I just wondered if you'd encountered this problem?
@@jamesdaniels2255
I right now and I'm developing with nextjs and I wanted to implement this with nextjs but apparently it can't be done for 3rd
Hi, it can be implemented with firebase cloud functions too or only a custom express server?
Do you keep your serviceAccountKey.json just like that? I am trying to instantiate firebase admin SDK in a Netlify function by passing the values of the account key which I store as environment variables.
Locally it works when running Netlify dev, but when I deploy, it gives me an "Invalid grant: account not found" error when the function runs.
Any clue how to best go about this?
you saved my day
Thank you!
Am I missing something? The API key is visible on the page source of the login page.
What do you think the best way to add the auth in the routes to become middleware called from a separate middlewares file rather than from with server.js?
Great video!
How do I run this brilliant project locally? And how do I 'deploy' the project to Firebase?
My own answer: Copy the contents of step-2 into your local 'firebase folder'
Make the required changes - get your own key, etc.
To run the project locally type 'npm start' - it had been forgotten
Finally: When I deploy to Firebase I don't know what URL to call, any help?
Hey Maksim, I've encountered a problem whereby I get errors from browsers (Safari and Chrome on mobile) that give warning messages saying they've blocked 3rd party cookies. My understanding is that the problem is the csurf requires a cookie to be sent from the server to the browser (3rd party since they're on different servers). I was wondering if 1. I've understood the issue correctly, and it's not just some human error in my code, and 2. if you have any suggestions to best navigate this issue?
Im confused aren't you supposed to hide the api keys, why would you put them in the bottom of the page?
Hey its a long shot, but I tried to implement this logic with firebase hosting and i get session verification ERROR reason: Decoding Firebase session cookie failed error, which is caused by req.cookies.session || "" being undifiened, do you have a guess what could be the problem (works locally)
Hi I´m getting this error: Failed to execute 'fetch' on 'Window': Invalid value
Any idea ? :(
it's not working in my code. I am using express js as the backend and Vue js as the front end. I want to set a custom claim in a user account. I need help. Please help me.
This is working but when i deploy the whole thing it cannot read that session cookie
I had the same problem change the name of the session cookie to __session and it works
Firstly, thanks for this content.
Secondly, If I'll implement an NodeJS API and this API will serve an Angular Project, This implementation also will be effective?
Many thanks for this video.
I'm pretty sure it will
Thanks for the great content! Could you make a video teaching micro frontends? I'm struggling to build an MVP 🙄
Is there any method to refresh the cookie automatically after expires? to avoid ask the user to authenticate again to the app...
Thanks for the awesome video Maksim! Btw, how did you get the google ring around your avatar? Is that a bonus for your community
contribution?
wait what? Where did you see that?
@@satansdeer1 9:41 on the firebase page
@@a.c.vermillion isn't it how the avatar always looks there?
@@satansdeer1No, I don't think so. At least my doesn't. You can also check in gmail, if your avatar has the ring or not.
yeah it has it in gmail as well, hmm, i've never noticed that
hey bro, i got an issue. After logout, i go back to profile page on back pressed. Any solution for this?
How would you manage the Read and Write rules for firestore if you logout the user after signing him in?
It is great but how can I make the session synced with onAuthStateChange function?
Bro i didn't understand why you logout after you send a session cookie to the server ?
How does the /sessionLogout work? I keep getting an error struggling to GET it.
Thanks Maksim! It helped me so much.
How do I use the login page as a middleware for different routes ? Currently its getting redirected to profile page by default (window.location.assign("/profile"))
Hello Maksim, I have authenticated my backend using your video but even after getting everything right, I can't access my database from nodejs backend with rules read/write: auth !== null. Each time it gives me "Client doesn't have permission to access the desired data." error. It will be awesome if you could help :)
Is it possible to use React for the front-end instead?
По лицу на превьюшке сразу понял - русский! =)
Shouldn't we revoke the refresh token when we logout?
How can we hide logout button from users who are not logged In and same with the logged in users please send the code for that tooo
please can you make some new tutorials about firebase database, especially STORAGE: How to UPLOAD and how to Fetch images?
Do you have any video on firebase phone authentication using node js and express rest api ?
Is it possible to use firebase hosting and auth with nodejs to log in admin and different user?
can some please help me i want to display user attribute such as user name,email, etc in profile page how can i??
Awesome Video ++++++++++++++++++++ Thank you
I got the following error:
Could not find a required file.
Name: index.html
Searched in: /home/jrd656/Desktop/FireBaseMaksimExpress/firebase-server-auth/step-1/public
I've changed the scripts in package.json to:
"start": "node server.js"
This seems to have fixed it. More details on the error below:
I cloned the git, opened Step 1 in VS Code. Ran 'npm i'. Ran the 'start' script. Trying to figure this out now...
In my error log: 11 silly lifecycle firebase-server-auth@0.1.0~start: Returned: code: 1 signal: null
12 info lifecycle firebase-server-auth@0.1.0~start: Failed to exec start script
13 verbose stack Error: firebase-server-auth@0.1.0 start: `react-scripts start`
13 verbose stack Exit status 1
James Daniels i think that happened because you didnt build the client part
James Daniels ill take a closer look a bit later
@@satansdeer1 I tried it again without success. Basically I cloned the repo, opened Step 2 and ran 'npm i'. Then I ran the 'build' script.
I get the following error:
Could not find a required file.
Name: index.html
Searched in: /home/jrd656/Desktop/FireBaseMaksimExpress/maksim2/firebase-server-auth/step-2/public
npm ERR! code ELIFECYCLE
npm ERR! errno 1
...
James Daniels very strange, and is the file really not there?
@@satansdeer1 it is there, but it's in the "view" folder, not the "public" folder
Hello i commented on your previous video about my express/react/firebase app. So far i have everything working but the only problem is that i have a collection of users in my firebase database that has all my users details for their profile which i save in redux. I have a function running on the top level component checking for onAuthStateChanged and if theres a user i get the user IdToken then i send that IdToken to my express server, verify it, and return my users details from the database to save it to my redux store. The problem is that this whole functionality takes around 100ms to complete and my auth route does not get my users details quick enough so it redirects my user out of the private route before i can show them their profile. What is the best way i can go about this to persist my user in redux. I need to be able to get user data from the collections on firebase or i cant show all my users details on their profile. Sorry for the long comment and advice would help thanks!!
it seems like you get most of the data + authenticate directly on firebase. What does your express server do?
how to retrive user profile like uid or email of user from session cookie.....
How can i refresh the session cookie without logout the user?
Of course this does not work
throw new TypeError('app.use() requires a middleware function') ^ TypeError: app.use() requires a middleware function
Please can you make a video for Firebase Admin SDK User Management using Node.Js
How we can implement csrf protection in react and node js api?
There is a package called csurf, id use it
@@satansdeer1 i understand 🥰🥰🥰 thanks a lot
Can we add a progress bar after we hit the submit button??
Well have to fake it though, because we can't tell the actual completeness
@@satansdeer1 And How will we hide the logout button when the user is logged out. can you please share the code?
And how to get the user data?
thanks for the same nodejs server can you explain android client side example...thanks
Please make more video about firebase
Is this deprecated?
csrf is misconfigured
Я требую русский канал! :)
По правде у меня есть русский канал, только я там уроков по программированию не выкладываю ruclips.net/channel/UCmCRYkYWNOyCg2i_kCNjYAw
This is awesome! Thanks a ton.