Implementing the Logout Functionality in React
ฝัง
- เผยแพร่เมื่อ 30 พ.ย. 2024
- This final guide in the Ruby on Rails + React JS authentication course walks through how to build a logout feature in React that will communicate with the Rails API and log the user out of the application by deleting the session cookie.
This is tutorial 10 out of 10 in the course, please check out the React + Rails API Authentication playlist for the full course, all for free!
Source code:
github.com/jor...
*This 2hr of full course playlist saved my 2 months*
That was the goal, I'm glad it helped!
This guy is so articulate on the subject matter that I felt I was learning 1.5 times more as he was coding than other tutorials. Nice.
Thanks for the kind words!
This is one of the best courses I have seen in my short development career. Thank you for taking the time to share your knowledge with us!
I can't thank you enough for the practical content and really easy to understand teaching style. This course helped me build my final project for my full-stack software engineering course! Great teacher and material. Thank you.
@edutechional I am really happy you made this video. So straight forward and concise.
I just want to say thank you Jordan. You help me through many Rails tasks in your Udemy course a couple of years ago and now that I'm onto another stage in my learning process you have helped me link React to a Rails backend. Now to clean everything up that I just learned and continue building out my React app final project nearly three years in the making. Cheers! If you have any other React Rails stuff like how to separate the login/registration stuff into their own page(I'm sure I'll figure this out the more I learn about React) please point me to it.
I'm glad that you've found the content helpful! And for separating the forms into separate pages, I'd just create separate page components for each of them, add them to the router, and then link between them.
@@edutechional So I added a name field to my registration component. I cannot for the life of me figure out how I can call it throughout the app. Any suggestions?
still a gem 2023
Thanks for this course. I found it incredibly useful!
This tutorial was fantastic! just what I needed, thanks! I took your Dissecting Rails course on Udemy and it was awesome too! I was able to follow what you where doing and did the front end using react hooks :)
I'm glad that you found it helpful!
@@edutechional Do you think you could extend this tutorial with devise and petergate? for this case, if you would use devise and not just bcrypt and we wanted to also develop different user authorizations, would you use petergate or petergate_api?
Just finished! So rad! I'm stoked to build out the app now! Thank you!!!
Fantastic!
Thanks man.
If you take suggestions,you can do a playlist where you build an app --> users can interact with other users, delete posts, create posts, upload picture... etc. That may help skyrocket views.
Btw... you teach very well.
Thanks so much! And I'm working on a Python + React course right now that does that. It's being built for the Bottega Code School and will be added to their curriculum, you can check them out here: bottega.tech
This made my life much easier - thanks a lot 🙏🏿
Hey Johnny. Im having trouble in a nonlocal /deployed setting. Any tips for deployment to maintain cookies?
@@andrewculhane5968 Yea I spent a few hours struggling with this. I don't know about you, but I only had problems with Chrome. It seem like they recently changed their rules about cross-domain cookies. Adding this gem solved it for me: github.com/pschinis/rails_same_site_cookie
Glad it helped!
Amazing how you explain everything so complete yet so easy to understand! I really appreciate the time you took for making this course, helped me a lot, thank you very much.
Thank you so much man, the rails API is very efficient like this. I've adapted the React App code with hooks and useEffect and it's all working perfectly ;)
Glad it helped!
Great course, spent time updating to hooks, cause.. i'm noobish but didn't change the quality of the tutorial, noice !
This was great. The only thing I didn't quite understand is why you were binding all the functions in the header.
Great Tutorial .. Covers the whole flow of authentication between the client-server.
I'm glad that you're enjoying it!
Thank you for all the Episodes regarding Reactjs. I am new to react. Great job !
Glad you like them!
You are an amazing teacher, thank you so much for all the dedication making these amazing tutorials.
Thank you for the kind words!
Thanks for the videos, really informative, I have one question tho, I implemented the logout functionality as detailed in this video, it does seem to delete session info on the server side, however if I check the cookies on the client the cookie is still there, is that expected?.
Awesome!! Thanks for the great tutorial.
This was one of the best tuts I've ever come across for Rails or React. Bravo. and Thank you.
Actually, unfortunately I have to take that back. This course desperately needs proof of concept in an 11th video: a "production" version on heroku. I have followed the tutorial _exactly_ (except Rails 6), and deployed both apps to heroku. My react client can register users and log in, but the user cannot stay logged in on reload. To be more precise, heroku logs and chrome network tab show 200 response to 'logged_in' and the server responds with json: {logged_in: false} ... which means the logged_in method is working, but the @current_user concern must be failing?
I do not know where to turn, what next steps for debugging would be, so fingers crossed you'll have the ability to respond here on youtube, otherwise, it looks like this has been hours wasted and I'll have to start another tutorial based on JWT, since this was the only sessions tutorial that seemed in-depth enough to be worth following.
Still, thank you for all the effort, I learned a lot whether or not I can get this working in production.
EDIT: I accidentally had a trailing slash in my domain in session_store.rb! removed it and I can confirm this is working 100% on Heroku!
That would do it, I'm glad that you found it helpful!
That was awesome. I'm now looking forward to implementing it in my app tomorrow, thank you!
Great tutorial! Thank you so much. From here I created templates for back and front end user auth for use later! I'm wondering though, it seems to have created a bootstrap.js and vendor.js file in the src directory, and I'm not sure what they do...Some redux things referenced in the bootstrap.js. When I run `npm start`, it throws an error saying that there's an unexpected token on the bootstrap.js page. Any insights here?
I'm not sure about the errors, but the redux items are because it's from a template generator I built with some built in libraries.
Thanks! This is a very useful guide for me and it’s also easy to understand if you don’t know English very well
I'm glad that you found it helpful!
This is a FANTASTIC tutorial!!!
great tutorial,
how do i logout after closing the tab like if the user accidentally close the tab i wanted to call my logout or api function, 'beforeunload' doesn't work because it triggers the logout even on page refresh, is there a way i call an api or logout for on close tab only?
Great tutorial and great explanation.
I am following your tutorial for the app I am doing, using react webpack and rails.
I run into a problem and hope you can help me.
My rails routes works and also does the react routes/components at first, but when I click reload in dashboard or any other react component, a rails error comes up saying that my route is not defined.
Should I define those routes/components in rails too?
Thanks
I haven't done much with embedded React apps in Rails apps, I prefer to keep them separate. But it's my understanding that you should only have the user routes managed by the React routing system and then have the config/routes.rb file manage the API calls.
Thank you, I always learn a lot from your Udemy courses and TH-cam tutorials.
Hi. if my app is responsive and I log in to the website from smartphone. will the auto log out functionality work?
"This is tutorial 10 out of 10 in the course, please check out the React + Rails API Authentication playlist for the full course, all for free!"
This is tutorial 9 out of 9
Good catch, it's 10 out of 10, I forgot to add this one, but I've added it now: th-cam.com/video/1JRdaemJNh4/w-d-xo.html - it's a quick one that describes how to work with multiple environments.
I'm developing an app in rails and react and your tutorial helped me a lot, I have a question, when I go to the Dashboard page, how do I access the data of the user who is logged in?
I'm glad that you found it helpful! And there are multiple approaches, the most common would be to make an api call for the data that you're wanting to show in the dashboard and if you include the withCredentials flag, the API will know who the user is and can send the data via json.
Very nice well explained tutorial, but how do i check if the user session is still valid on every route change?
You can place a call to the checkLogin function by any component's mount or useEffect hook. However, the session shouldn't change between route changes typically. A session is, by definition, the time that the browser has the application open
Any chance on a refactor to see how we would implement redux for this auth component? I'm working on figuring that out now. If it is not necessary can redux be implemented without any side effects?
I'm actually going to re-film it to show how to do it with hooks and JWT. However I'm going to use the Context/Provider system, that's what I do on all of my apps and I really prefer it.
@@edutechional that's a big change from the session method right? Why the change in direction?
This was very helpfull. Thanks for this great tutorial!
Could you add a video for the Reset password feature? Thanks!
how do you handle network error or response error, you were just logging your errors to the console
In a production application, I'd trigger some type of alert and show it to the user notifying them of the issue.
Thank you so much for this helpful tutorial. I have a request that why you don't create a tutorial about: "Create a ... website that use Rails with React" - Just only quick review about React (or not) and then deep to build and example app using Rails, React? By the way, your explain is so easy to understand even I'm not the one good at English. Thank you again and hope to see your new Tutorial soon.
Great suggestion!
I deployed the front and back end, but got error "Access to XMLHttpRequest at ... from origin ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." even though I specified the front-end URL in config/initializers/cors.rb. this doesn't happen in development when running on localhost
Details here: stackoverflow.com/questions/59648387/react-rails-access-to-xmlhttprequest-has-been-blocked-by-cors-policy-no-access
if you dont have a video showing your vim configuration, i'd love to see it
I actually have an entire course showing it, you can see an overview of it here: th-cam.com/video/O504jSok64A/w-d-xo.html
Great vid, thank you! I wonder what's the reason for putting the logout button on the Home page. I would expect it to be on the Dashboard page. Maybe I should watch the other 9 vids first :-))
Hi! Thank you so much for this video course, it's extremely helpful, and well-taught! I did everything exactly as you said, and it works perfectly locally, but for some reason when I deploy it to Heroku, I keep getting an error. It says that it's been "blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'." I've tried everything I could think of to get around this, but nothing's worked so far. Would you happen to know what the problem is, and how to solve it? Thanks!
I'm glad that you enjoyed it, and that error usually means that you need to whitelist the domain(s) that will be contacting the API and the syntax is pretty picky. What does your config/initializers/cors.rb file look like? As a reference, here is the cors file I used in the course, that includes both local and production urls: github.com/jordanhudgens/rails-api-authentication/blob/master/config/initializers/cors.rb
If that's not the issue, I've had times where the API returned the cors error, but it turned out the error was something not related to cors. I'd run the logs on production when you make the API call, (you can run: heroku logs --tail) to see the live logs and see if there's a different issue.
Great Tutorial but when i try to login again after logout its not display data on console as well not redirecting to dashboard,can you pls help me with that.
did everything and updated the urls with the API config on the front end, however, I keep getting this error when I deployed the front end and using the local backend. I added same_site: : none to the session_store.rb and still no luck, any ideas? error:
A cookie associated with a cross-site resource at localhost/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at www.chromestatus.com/feature/5088147346030592 and www.chromestatus.com/feature/5633521622188032.
Yes, with the cookie blocking flag turned on in Chrome, you'll need to have both applications on the same domain if they're going to share a session. In development mode I just turn that flag off. Alternatively, you can also use JWT instead of session cookies.
@@edutechional I'm incredibly grateful for your response and the whole tutorial, I learned so much.
So I deployed my front-end to surge. Are you saying that I should deploy both the front and back end to heroku to avoid this problem?
Thank you so much again!
Thanks man, it was really heplful
Great tutorial series!
I'm glad that you enjoyed it!
Any chance on adding a tutorial on how to deploy this lol :D
Both of the apps are completely ready to deploy to Heroku. The React template I showed simply needs to have the API url updated to the production URL and it's pre-configured to be deployed to Heroku.
@@edutechional So heroku ran into some building errors with that react template so I just used a create react app and transferred the component code over. I have successfully deployed both apps but theres an issue. For some reason locally when I log in and refresh the user stays logged in. But on heroku once I log in and then refresh it shows me as logged out. Not entirely sure why tho, any ideas? basefrontendframework.herokuapp.com, you can register and login to see what im talking about.
That behavior typically means that the cookie isn't being set. I'd start out by confirming that you are using the withCredentials: true flag on every API call.
@@edutechional I am using that flag on every api call (triple checked identical to tutorial code) and having the same problem.
EDIT: I accidentally had a trailing slash in my domain in session_store.rb! removed it and I can confirm this is working 100% on Heroku!
Thank you. You are very nice.
Complete this tutorial. Logout should only appear once logged in
Thanks a lot for these videos 👍👍
You're welcome!
Great tutorials thanks for saving me a lot of time :)
You're very welcome!
amazing tutorial!
Thanks!
Done its working perfectly
Nice!
is it working perfectly in production / on real web servers? This works for me on localhost but falls flat on heroku.
Thanks for sharing, this is awesome
You're welcome!
can someone help me in a graduation project with reactjs and nodejs..
are u graduated now?
Thanks a lot!
You're welcome!