Rails Tutorial | Setting Up Authentication with Devise in Ruby on Rails 6

what's up everyone Steven from tech maker TV in this episode we're gonna be looking at how to do email authentication in Ruby on Rails with devise I've just created a new rails app and my rails version is 6.0 3.1 and my Ruby version is two point six point three setting up authentication with devise is pretty straightforward so if we go into our gem file and then down here just at the bottom underneath the boot snap or really wherever just in the main group we're gonna say Jim device and then over here in our terminal we'll just bundle install once that finish is we just need to run rails G devise : install and that's gonna go ahead and set up a bunch of device stuff for us and it's gonna actually print out some instructions that we need to do so in this case we can literally just follow the instructions so we can actually open up development dot RB and so number one says make sure that you have this in your development file so we'll just copy and paste this in here let's do a quick search for default URL ok so there's nothing in here already so I'll just stick this down at the bottom then we need to have a root defined in our routes so we can copy this route to home index from now but we don't actually have a home index so we'll need to set that up in a second this is a brand new app in our application layout we need to have these things so I will go ahead and open up my application dot HTML by yarby and just put those just within the body tag here and then finally this last one is optional but I will go ahead and run this so this will actually generate the view code so they can edit what the devised views looks like so we'll say rails G devised the use awesome so at this point we we basically just set up some configuration and followed their little instruction guides but we need to actually get some real code generated now so we have this route to home index now we can call this whatever we want and I'm actually going to be making a notes up here but I guess I could still have like just a home page probably so we can just leave this as home index so I'm gonna call let's call it the home controller I guess and they'll have an index action so we'll say rails G home controller will say controller right and at home and then index so this is going to generate a controller called home and then with an indexed path and then so you see here we have get home index which we actually don't need don't need this comment either so now if we look at our app controllers we have a home controller with an index action and then that also should have generated a view folder for us down here with a home folder and then index vu ok cool so now if I run my rails server over here and I go over to my browser and I'll refresh so when I first loaded this it was showing this yeah you're on rails when i refresh I should be going to my home index now okay so that's basically all of the main sort of set up so let's actually generate a user account now with the ability to sign in and so on so if we do rails G devised so normally here you would say something like rails G model user or something like that if you want to create something in the database but with devise we can say rails G devise user and this is actually going to go ahead and generate a user model for us and it's go ahead and set up some routes that are special for devised so it can take a look at exactly what that looks like let's go ahead and run our database migrations first though rails DB migrate and once that's done we'll need to restart our server back so we'll say rails s and kick our server off so actually before we go on to much more let's pull the code back up and let's look at our routes so we have this devise for users here so we really just have these two things so before we go and actually start running this in the browser I'm gonna stop my server again and I'm gonna run Grails routes and that's gonna show me all of the routes that this generates so that's kind of hard to read actually there's a lot of other stuff in here so let's do this will say rails routes and then we can filter to just stuff related to user by saying grep user and that's going to show us just the stuff related to user and what devise defines so here we can see all of the stuff that gets generated by that devise for so you can see we have all of these new user session user sessions on and so forth so this is for logging in and logging out there's a bunch of stuff here related to passwords and there's some stuff here related to registration so on and so forth so let's go ahead and run our server again and try this out so I'm gonna run that and squeeze this back over here and then switch back to my Chrome okay so to get to that and remember we saw sorry I gotta kind of find a better way to do this so you can see here that we have new user session path which is slash users slash sign-in so this users is automatically generated because we call our model user if you called your model like account or something like that that would be slash accounts but you can see here if we want to sign in we go here if we want to register we have this new user registration path we have slash user slash signup so I'm just gonna copy that because we don't have any accounts or anything yet so let's go to localhost 3000 slash users slash signup and you can see here that we have this pre-baked form that we did not create so I can do Stephen at techmakers TV I'll just put a password and password you know to be really secure and then click sign up and so this little message that shows up right here is what they asked us to add to our layout file so if we look back over here we have this notice and this alert and so if these things are present they show up it's basically how that works so we have it's welcoming you've signed up successfully and if we refresh the page that goes away because it's it's not persistent it's just a temporary thing so two quick points if any of this has been really confusing so far in the next episode I'm gonna go over crud that is create read update delete operations and rails so that will help you make some more sense of some of this probably and the other thing is we can't actually log out right now because we don't have a link that will do that for us so we're gonna build that in just a second but until we do that let's open up our developer tools and so I'm in chrome and I believe in I'm weird I have a Mac and I'm using a Windows wireless keyboard so for me it window alt I to pull that up there's probably a different way to do that for you but if we go over here to which one is it memory you know it's application so go to application you can see here we have cookies so let's click on this arrow down and click on localhost and so you can see here that we have a Notes app session so some of this is from I'm doing some development on local so I have some stuff hanging out but this is the one right here that is actually keeping us logged in so if I right-click and I delete before we do that actually before we do that let's go to slash users slash sign-in and I'm gonna get redirected back here and it's gonna say hey you're already signed in okay so if now I click on this and I right-click and I say delete so now that cookie goes away if i refresh now if I go to slash user slash sign-in it's gonna prompt me to sign in so now if I go Stephen in at Tech my here TV and password now I'm gonna get signed in successfully and if I go slash user slash sign-in I'm also gonna get this saying you are already signed in message so there's a lot going on here but that's kind of a quick look at using cookies and how we can use them when you log in and so on and so forth to actually add the log in log out functionality I'm gonna go ahead and setup bootstrap via a CDN so I'm not really interested in setting up the JavaScript right now so I'm just gonna copy this and put this in my application layout file directly so in here just before my stylesheet link tag I'm just gonna say link and then hit tab for me which adds this whole tag and just paste this and then let's refresh our page and see what it looks like over here shouldn't get a different font cool so this is kind of how I start a lot of projects just start kind of roughing things in I do use bootstrap I know I don't know if it's cool anymore to do that or not but it helps me a lot so whatever to each his own so I'm gonna go in here and I'm gonna look for I want to see the components I want to get a navbar and I don't need like some really crazy fully featured thing just want something with a couple of links so I'm just gonna copy this and what we're gonna do is we're gonna come in here inside the body and it's a very top I'm gonna say render shared navbar and what that's gonna do is it's gonna be looking in the views folder for a folder called shared which doesn't exist and then a partial called navbar so we'll say new folder shared and I didn't mean to close the views over here but inside of our shared folder we're gonna create a new file and to specify that it's a partial you just say underscore first and then navbar dot HTML IRB and then we'll paste in that code that we copied and we'll save all of this and let's go refresh the page on our Notes app over here and see what it looks like so basically we get the exact same thing that you see over here on the bootstrap page so that's cool um let's look at this navbar code a little bit so I can change this so first of all the navbar should just if you click on the logo it should go to the root path I think so we can change that and then I'm just gonna change this to say Notes app right now will actually give this a real name at some point so next what I want to do on this ul and this tag here I'm gonna add a class here in El Auto and what this basically does and this is a bootstrap theme but essentially it sets the margin left on this unordered list to Auto which essentially aligns this to the right so let's go look at that really fast just to make sure I'm not crazy so if you refresh this now this is gonna pop over here okay so let's get rid of all of these links except one I don't actually need a home link either so what we're going to do so device gives us a few sort of pre baked methods so we have a couple we have current user we have a user signed in so those are two methods that sort of come with devise that make us able to check you know things about the current user and then whether or not they're signed in so let's first of all here let's say if current user dot well actually no no it should be user signed in and again this would be different if you had something called accounts it would be a count signed in or person signed in or whatever you call it so we're gonna have a different situation depending on whether you're signed in or not and I've got to get my syntax highlighting fixed I don't know what's going on with that right now if I get it fixed I mean fix it I'm not gonna take it to like a shop or anything so what here Lulu we're right here what I wanted to do sorry for all the mumbling if the user is signed in I want to have a link to sign out and maybe that's lower case I don't know and then else we want to have to we want to have register and we want to have sign in so these two are easy right here in actual fact I'm going to switch to a more Ruby way of doing this which would be linked to and then we'll have register and if you recall from earlier when we were looking at the paths or the routes we have new register was it user registration path or register or new registration path I think let's do rails routes and grep user again can't remember if there's a user in there or not new user session so it's gonna be new user registration yeah new this we can just copy it actually new user registration path and then we just need to say class nav link okay OOP that's not what I want to do I want to get rid of that and I think that's just slightly bigger always bother you can either rap strangely okay so link to register new user registration path then we will replace this sign in and we'll say link to sign in and if you recall this should be new user session path okay so now we're over here I'm gonna bring this out again so to get them all on one line kind of so now we have this new user session path we have a new user registration path I don't know why but that's all really difficult for me to say so then we also have this destroy user session path now what you'll notice here is that you have the HTTP method listed so the other two are easier because they're just get requests so you can just link directly to them and that's fine that works normally this destroy user session is our logout and it requires that we have a delete HTTP method so I'm gonna copy this and I'm going to show you how to do that so all we got to do is basically I'm just gonna paste that there for now so we're gonna copy this we're going to link to sign out I'm gonna copy this or cut this and replace that again so this you know at first glance might look like this would work but it won't because in actual fact this is a get request by default all these link to generate get requests so what we need to do is actually just say method delete and that will map it to this destroy here so you can see here that we have this delete HTTP request that's required so now we're giving it that so let's save all this make sure our server is still running and let's go look at what we've managed to accomplish here so we've managed to accomplish an error message so that's cool let's go back I have to add the word path okay try again okay so now we have to sign out Sign In and we can do Stephen at techmakers TV feel free to email me by the way if you ever have any questions about anything password is my password on this localhost app and you can see that now we've successfully got an application running so the last thing we'll do here and this is something that isn't really gonna be any sort of functionality it should I make sure that I show you how to use this so all we can do is say instead of just home index here we can say welcome and then we can print out like current user email so now it's gonna print out my email right here we could get a little bit creative and say let's call it like name equals and then we'll say current user dot present and then if they are it'll be current user dot email otherwise it'll be stranger and then here we'll just say welcome name so I'm kind of just getting carried away here but let's check it out so now if we sign now we get welcome stranger okay cool so that basically covers setting up devise to handle email authentication for your users in a rails application so I'm gonna be doing a bunch of episodes going forward building out a full notes application I've kind of got an idea in my head for what I wanted to be and I'm gonna put together quite a few videos on this if you're interested in that definitely subscribe to the channel the next one I'm gonna go over a kind of Ruby on Rails and crud and how all of that works so if you're kind of a beginner definitely stay tuned for that one because it'll help you understand how to build out you know the entire MVC structure so you can write things to the day bass and so on and so forth but that's it for this episode thank you for watching and I'll talk to you in the next one

Channel: Techmaker Studio

Views: 11,258

Rating: 5 out of 5

Keywords: rails tutorial, rails devise, rails 6, ruby on rails, devise gem, ruby on rails 6, learn ruby on rails, rails 6 tutorial, rails devise example

Id: jd1gOhpETIA

Length: 20min 4sec (1204 seconds)

Published: Thu May 28 2020