NodeJS User Auth with PassportJS (P4D12) - Live Coding with Jesse

freeCodeCamp.org · Intermediate ·📅 Project Management ·8y ago

Key Takeaways

Implements user authentication with PassportJS in a NodeJS app using live coding

Full Transcript

hey everybody welcome to live coding with Jesse I'm so sorry about starting this late I can see you've all been busy in the live chat so hopefully there was some good conversation going on I have not had a chance to read any of this so I'm scrolling through it now all right so I was as supposed to have a very brief conversation and it turned into a almost two-hour meeting so that's why I started late I thought I would have plenty of time to get started or to get ready for the stream and stream but it didn't happen like that so I guess as a as asking how the meetings were actually the meetings they there are basically about all the projects that we're going to be doing for the next year I shouldn't say all of them I'm sure some other things will come up but I have a much better idea about what I'll be working on and how that that main website so mentioned a few days ago the main University website franciscan CD you will be completely redoing that front end and back end I have a much better a clearer picture of what's wanted for that and what's what the design is going to be like so I'll be sharing that with you in future streams but I know I have we sketched out some things on a whiteboard and I took a picture of it so I wouldn't forget so I'll be will be working on it but it was a long but it did we sorted quite a few things out one thing that we are going to be working on within the next two weeks or so and we'll see maybe I'll do it on a stream maybe I won't it depends on if you are interested we're going to try to take so the main website right now has an event system that's really hard to to work with in terms of adding the content for the events so we're going to take I may as well give you something to look at what we're talking about this to you all right so what we're gonna do not in this stream but in the next week or so we're gonna redo the events so that we'll use some third-party systems so here's here's right now how the events show up and there are other places throughout the website that these events show up for now I think we'll just worry about this spot but we're going to remove all of this and replace it and instead we're going to pool events from some other systems so it may be a Google Calendar it might be Eventbrite it may be a custom post type from WordPress installation however so someone else in my department is in charge of entering in the data for these events whatever they decide is going to be the best system for them that's going to you save them as much time as possible we're going to work with that system so I don't know what it'll be right up you know right away but it's going to be something that definitely it has to have an API so we're going to replace all of this with whatever that system is that's going to hopefully free up some time for this other person and they're gonna learn react they're actually going to do a clone of our project one the the cata catechol Institute website they're going to do a clone of that and they're going to use that for another University website and in the process hopefully they're going to learn react so if somebody else in department that can can do react sites so that's right so my job in the next week or two is to free up their time by making this event system a lot easier to work with so that's coming if you're interested in that then let me know I'll try to stream when we do that so let me know we'll see I'm still undecided as to whether it's it'll be worth it to stream okay so today I don't know what did I say we're gonna do today Passport yeah passport j/s okay I'm just briefly checking the live chat see if there's anything I should address right away before we get started okay I'll probably be probably missing a lot of things since I'm skimming through so quickly but it looks okay it doesn't look like there's is anything here okay so here's what I'm going to do I'm gonna start my 25-minute Pomodoro timer if you've asked the question I will get to it after we do our first coding session of 25 minutes so I'll take a five-minute break and then I'll start going through questions no matter what at the end of the stream I'll go through all the questions so please don't feel like you're being ignored if I haven't answered your question yet I'm just gonna break it up a little bit and get to the questions a little bit later so hang in there and I will try to answer your question at first here's what I think we're going to do Harshit has added a pull request that did a lot of work to the server so before we try to implement anything with passport j/s on the server we're better off merging that in I think that'll be much easier to handle to do it that way instead of trying to handle all the merge conflicts that will happen so I've already pulled down I'm gonna double-check and make sure that nothing's been added to his pull request but otherwise earlier I've already pulled it down as a separate branch so it shouldn't be that hard to just merge it in right from the command line so on my other screen I have this pull request open I'm just verifying that the last commit let's see the last commit was okay so there has not it looks like there has not been another commit since the last time I pulled everything down so that's great okay so let me bring this over then see all can see it so I was about to do it anyway okay so briefly give this a look and let's see so you can see we have some extra things here we're doing you know webbing emailed ojs file that's handling sending the emails from our form also attachments the app touch as file in the end the server has a lot of extra stuff in there too using a motor to handle form data we have fetch working in here so we have some stuff set up I can't remember how much of this was from a previous pull request and how much was this this last one so maybe going over some stuff that we've already seen but I had a little bit of trouble getting things to work I don't think it had anything to do with with any of the code I think it had something to do with me setting up an account to handle the mail so I'm gonna go ahead and pull this in but if if you happen to clone this repository and it doesn't work for you when you try to submit the form I'm aware that something's wrong with the way I'm doing it so as soon as I figure that out then I'll let you know I wasn't harsh it had given me some suggestions for how to troubleshoot that but I've been in meetings for three hours straight so I have not been able to even attempt to to troubleshoot so tell you I had an issue but I just really didn't have time to try to fix it so I'm not that worried about it let's see all right let's merge this in so just I'm just going to double check and make sure I don't have anything in master that should have been merged okay great we're up to date I'm gonna go back to the master branch and I'm gonna run a git merge and I'm gonna merge in this branch which contains all the work that Harsha did and merge it into master there we go I'm just I think I already brought everything in in terms of the packages but I'm gonna run your own again just to be sure yep we're good so make sure that you do that if you bring in this this latest code locally to your machine be sure to run an NPM install or yarn because there's quite a few packages that that have been added okay great so now that we have that in there we can get to work on actually let me push that up there we go just want to make sure make sure that I push that so in case you all want to get the latest the latest code pulled down on your machines you have it now and see let me bring over let's see I'm John I have a lot of stuff open a lot of windows on my other screen so I'm just a little little clutter and I didn't have a chance to unclutter things before the stream okay here it is alright so let me bring this over this is the github repo for passport j/s which is what we're going to be using so you can check that out if you like um actually I'll paste in the live chat the link and that way you can you can go right there if you want to look at it and also here's the link to the main site and to the docs so we'll be going off looking at these docs I know this is really small I'll zoom in a bit but this is the passport Jay s dot work site so here's what we need to do though the way at least from what I've read so far the way passport UAS works is that there are a lot of these extra modules that you can use depending on what kind of authentication you want so we need to we need to come to a decision about what do we want what we want to do with authentication and I'm not I have an idea what I want to do but I'm not a hundred percent sure so I'm gonna run some things by you all and and see what what you think and if anyone has any input so currently let's see currently we at the university use for all the accounts I believe it's it's Active Directory and right now the single sign-on system that all the other university stuff is tied into but not the bulletin that we're working on I think is using I'm gonna say sam'l it's saml I'm not really sure how people say that normally I've only ever read it but I don't currently have all the information I need to implement that system I think the best case scenario would be to get on that same system and then all user accounts will be handled by the IT department which which would be really nice so it would all be one system and I I think that would be what's best for the users and then that would be what's best for me as well and not having to continually perform you know maintenance tasks to make sure everybody can log in and handle support calls about login issues which is fine but that's not really what my position is supposed to do I'd much rather spend time building new things so I'm not sure how on board IT is with sharing the information I need to bring that into the system I'll need to do some more work in terms of talking to people before I can get to that point so I'm wondering if I should just go ahead and implement all the code and assume that I'm going to get the information that I need it sometime in the next few days I mean meaning like next week or should we try to use some other type of basic system assuming that maybe we be able to tie in the university system and so we'll have to do something else on our own I'm not sure so basically the choices as I see it is start building it out to use sam'l hoping that we get the other information we need from the IT department to finish that at some point next week or do we just pick a different system for users to be able to log in and implement that and then if we eventually get information for an IT we can switch over to something else but for now we we could do something different so if anybody has any opinions on that let me know I'm gonna give it maybe like 30 seconds a minute just to get some feedback otherwise I'm just gonna have to flip a coin or something I'm have to figure it out I guess if you need some more info on what I need to do is basically what I need is only people who work for the university should be able to login I don't have access to a list of all the people that work for the University the best I have is that somebody who has a university email and if I could verify that they actually have access to that email by sending an email link that's the only way that I can do this at this point so whatever I do I need it so that the bulletin is only accessible by people with a Franciscan ddu email address so something like a password this login with an email link is what we're using right now through a different system I want to switch I haven't the system I'm using currently hasn't been a hundred percent reliable so I don't want to do it the exact same way but if we could figure out some way to you an email link password this login that'll work for now and then I guess we get hope that we we can tie it in in a better way later on let's see all right I'm gonna check out the live chat now and see what you all you all think okay okay so we do have password let's log in some of your saying we should do password this at least Sebastian says if it were me I wouldn't even try to do any type of login until you are sure of what you need and what you can use yeah I mean that's not really a bad idea I just I feel like we're getting to the point where I need to start doing something with this because in terms of the project itself we have all the main pieces there we just have a couple more UI things to work out but I think we're getting close to this being you know usable I mean it's certainly you it's currently is usable it's not perfect but it fulfills all the requirements that we need right now at this point and the last requirement left is to make sure that its users have to be authenticated to access this this site so that's why I just want to kind of move on with it one way or another okay okay was umberto says that's how I implemented our HR web portal in register screen active directory pool email address there were no user entry allowed interesting okay cool harsh it actually has a link to a passport password list great you know what I thought there was a password list module I was looking for it yesterday but I couldn't find it in their list of modules on their on their website there's like 300 models on their website though and I was just scanning through so I I probably just missed it let's see but I was pretty sure that I had seen the password list login system used with passport before in a tutorial that I saw probably months ago let's see okay so I see this NPM passport password list do they have a github usually there's a link to the github right there but I don't see it here we go all right so I found it great so found the github repo for this let me pull this over let's check this out and see see if this will work actually I see a lot activity in the live chat too so let's see okay let's see all right let me see I'm Bertos explaining how he set this up so let me go through some of this stuff as well they're just there's just been a lot in the last chat with in the last 30 seconds or so okay so embarrassin saying send a verification email and then add user to identity server or the identity store then the next time they access the system if they are registered it uses a D violin doz login to authenticate and authorize cool I mean that's that's what I really want to do I just don't have I don't really have information or access to what we're currently doing with with a D with Active Directory okay so it looks like Harshit saying there are two different ones here so there's a just password list and then there's a password password this he's recommending to use the one that's just password lists okay as we could check that one out as well hmm hmm okay so I'm looking at this password this as well okay interesting here's now here's another thing to keep in mind I don't know the answer this I'm just I'm asking so right now we're comparing these two different modules one is works with Passport the other one it looks like just works on its own it's it's not tied in with Passport what I hope will happen is at some point we'll switch away from this and will actually be tied in more closely with the single sign-on system that the university is using if that's the case would it be better now even let's let's assume for a second that this password list is better than passport password this even if that is the case would it be better to just implement this passport password list knowing that we're going to switch to some other passport solution maybe password passport sam'l or something like that I don't know I'm wondering what what opinion you all have on that hmm I actually already have an email Jas account set up so it wouldn't be that hard to put that in hmm okay let's check this one out briefly and let's see okay so it looks like a few you're saying in the live chat here that if I do plan on switching to use sam'l with Passport then maybe I should set it up just to use Passport right now okay that's kind of what I was thinking I wanted I just looked through the passport password lists I just want to take a brief glance at this password list repository just to see if anything stands out that could be a deal-breaker okay hmm okay interesting I I didn't really see anything in either one that makes me really want to choose one or the other I mean I just looking at the documentation this one seems a bit more simple it could be that just it doesn't explain as much in the documentation though - so all right let's see all right okay harsh it says we should check out password list dotnet hmm okay just to keep in mind as well I'm gonna throw this up here this is what I was thinking of using passport saml so if anybody's interested in checking that out I'm hoping at some point that we implement this or something like it so I came through the link in as well into the live chat Harshit says you can also send SMS with it it the SMS thing is cool but I can't I can't use the SMS right now because the it has to be the email so I wouldn't I wouldn't be able to use it because the email is the only way I can really make sure that it's somebody that works at the University because they have an active University email account okay let me take a break now and answer some questions we didn't didn't actually get any code worked out but as soon as we as soon as I make a decision we will get some code let's see okay all right Blake Blake says could you link their email to their phone number actually that's interesting that might be possible hmm I'll consider that let's see all right I'm gonna scroll up and try to go through and answer some questions it looks like yeah I don't I don't have everything that was in the live chat so it cut off so if you ask something closer to the very beginning of when the stream was supposed to start I can't see it anymore so I'm sorry about that but if there was if you ask the question early on you may want to put it in there again because I I can't see it haha okay Savior at some point says his face in the thumbnail looks like mine when I'm coding so yeah I have a confused thumbnail for the video I thought it just it looked funny I thought I'd put it in here all right and I said I like your stream Thanks it's good to see you in the light yet I haven't seen in the chat for a few days so welcome back okay Harsha says I found a site named vulture the ultr it's it's like digital ocean about offers double resources for the same amount of money oh that's cool I have to check that out thank you all right Kat des how long since you've learned coding I've been I guess seriously doing JavaScript for about three years now in terms of just building websites it's been about five years I first learned about building websites and when I was in high school so somewhere around the year 2003 I think and then I did some stuff in college just like some C++ just really basic like I built a calculator in C++ so nothing nothing too crazy and then I didn't really work that much with coding you know until till about five years ago so if you want to know more I have a video on my channel it's linked in the description to this video and I think the video is called my was a how I became a front-end developer so you can check that out if you want a little bit more in-depth explanation Albert asks what application I'm doing basically we're doing a react app and it's a it's it's a university bulletin so it's gonna have a login system and then once you log in you'll be able to see a lot of different announcements download attachments submit your own announcements link what else yeah that's pretty much it that's that's what it's going to do cat DZ's three-hour meeting sounds too long yeah well it was actually two different meetings so the first meeting was about an hour long and then the second meeting which I thought was only going to be a few minutes ended up being almost two hours so yeah then he'll be being long long time okay and I'm the worst part of the whole thing about all the meetings I'm super hungry I thought I'd have time to eat before I stream but I didn't so what my stomach is killing me all right let's see I'm gonna go back and do some more coding let's um all right here's what I'm gonna do and I'll give you my reason as well I really like password this it looks good but I'm not gonna use it for this stream because I put in my tweet about the stream and in the title for this dream that I would be using Passport so since I can't decide between the two of them I'm just gonna use that as my deciding factor I mean there's also the benefit that I'm probably going to switch up and implement some of the other passport solutions as well so I think that does give me a little bit more freedom that I could potentially implement multiple solutions from passport if I wanted to at some point so that's what I'm gonna go with that I appreciate all the suggestions from everyone and I I may use them like you know I might end up using password lists in a future project or who knows maybe this project if this doesn't work out but at this point I need to make a decision so we can get something done all right so let's go ahead and let's see what we need to do so I assume we're going to have to use ha ha to load up passport first and it looks like we're using Redis okay I want to check this out and see if they're bringing in all right that's interesting okay I may have just changed my mind yes sorry sorry for being so indecisive but now that I took a closer look at this I'm not so sure that this will be the easier way of the two because it seems like and correct me if I'm wrong I've never worked with with Redis but it does not look like it's built into this package or the passport package which means I'll have to install that separately and figure out how to use it I'm not really I'm not really looking forward to trying to do that on the stream in the next 20 minutes where did I put this now let's see yeah okay maybe we will go with the other module I was just checking the live chat as well it looks like you are noticing some some additional things okay all right let's go with this one it it includes some setup for things that this one does not I would say this assumes some knowledge of other things that I don't have and this one is more explicit about talking through the steps so I think we have a better shot of getting this one up and running faster than the other one so apologies for the misleading title I can always go back and change that and I think I probably will after this stream but I think we're gonna end up going with this pasture list so let's bring the terminal up because we need to install some modules okay okay let's see let's go with yarn add password this and we need also need to add password Liz store and this example saying email to use email je s but I thought somewhere else that said that you could use SendGrid yeah I think on their their main hum they just said that you could do you send grade with it hmm I have accounts for both let's just do let's do email js4 now because that'll probably be it'll go along better with the diffusion my princess it'll go along better with their instructions right now on the repo and I don't think we've set up email j/s before on the stream so if we went with sangria it would just be a repeat of what we had done for the last project so we'll go with email j/s just to switch it up a bit okay and we're gonna need to all right we'll let that do its thing and then now in our if we should do this in our app Jess or if we should use another file I'm not sure yeah let's see how we have this maybe we could and this uh okay sorry for all the silence I'm reading through the documentation and and the documentation is very thorough but to get this set up right now I think would be better to take a look at their fully functional example and copy that just to get things going a little bit more quickly so let's work this in here we need to all right let me see what we have alright we have body parts or Express obviously I won't really need some more stuff that we it's not mentioned that's interesting all right so basically the example that they've given the example project has a lot more going on than what they show in the in the documentation so I was hoping the example would would let us get started quickly but now I'm not so sure alright well let's just get started and get as much done as we can I always intended this to be more than one part I figured it would be a two or three part with with multiple streams so let's do that so let's just require these things that that we need so let's bring in these let me change this to Const okay so we brought in we've already let's see yeah we did successfully pull in password this password this store an email je s and now we're gonna bring in let's bring this and change this to cost so if you want to follow along with where I'm at I'm on that password list github repository I'm gonna put the link there in the live chat and I want to step 3 well I just finished step 3 well I'm just going to get all the code in for now we'll fill in our details later on I got a I'll bring up on my other screen my email j/s account and get the info that I need so now we're on step 4 oops wrong screen okay here we go so I'm gonna make a mess of this app dot J's file right now we can always refactor this and separate it out later on but just to move a little bit faster for the stream I'm not gonna worry about that for right now so basically we've for this step we are initializing password lists with this store all right and now we're gonna set up our token delivery so all these semicolons are killing me all right so assuming that we're gonna go with email J s this is how it's recommended to set this up which at least for now to test it out we are going to use email J us I might switch it up to send grid at some point and then now we're on step six we're gonna set up the middleware okay I'm going through this pretty quickly but if you want to learn more about what's going on you can read all the details that are there for each of these steps let's make sure we've setup all right we need to I was just double-checking to see if we've said we've done this next step at some point I'm one that steps seven okay let's see oh yeah hard should sing always use node mailer I I'm using email je s in this case because it's that's what they're using for these docs so - let me get it set up more quickly we can always switch up to node mailer you know after we get this going okay okay so we don't have this one right now all right so place it we're on step 7 for the routers so let's just copy this in so at this point I'm copy and pasting a lot from the from the documentation once we get it all in there we can give it a you know give it a test then we can go in there and change things if we need to yeah all right and it says in the documentation that we want to make sure using bawdy parser which we are I believe we already have great we already have that fixed list of users okay we're skipping over that second part of step seven because we don't in fact have a fixed list of users so skip that over okay now it has some code for a login page I'm obviously not going to use that for our login page because we're using react so I'm not just going to copy in that that HTML but we can do this in react quickly let me check my time and see what's down there not that much time okay so we just need to make a very basic basic form and let's see so let's make that basic form we just need to send it to the sent oaken path and it looks like it just needs one field I think we just need to just need to send one one field which will be user which in this case we're going to use email okay Harshit saying there's something up with the code so it's not gonna work okay he said I Jesse I don't think I think you don't so much backend stuff yeah yeah that's true I'm a front-end developer that does back in when I have to we don't have a back-end developer here in in my department so I do what I can let's see so I'm trying to see where okay so let's a dragon owner says but you already have a transport that you require on top okay let me check that out so okay yeah I'm not sure where we're trying to figure out where the issue is but I'm not sure okay cat D says if you're using WordPress isn't there an auth module that you can use yes so that basically there's going to be at least in my mind there's gonna have to be two two parts so since the wordpress is is like a separate kind of issue like the first thing is we want to have users authenticated to be able to even access anything within the react portion of it and then our server is going to make calls to the WordPress installation at that point there needs to be something basically something that make sure that the WordPress data can only be accessed by someone who's authorized so essentially we don't need every user to be able to directly access WordPress we need but we do need every user to be able to authenticate to access that react part of it so maybe there's a better way to set it up but I I don't know that it would simplify things to have the authentication kind of pass all the way through to WordPress but that is gonna have to be a part of it at some point but as far as I think not necessarily for the user yeah okay so harsh it has it so I should saying you you're required to authenticate WordPress on the server only yeah so basically the server on the react side of things has to be able to make requests to WordPress but not necessarily the user right from the client side alright let's see I mean [Music] alright work says saying you mean it won't work because of the res render he can switch it to res send for testing no an email JS file okay alright that's why I'm not seeing it so it looks like car should saying that the problem was in the email Jas file okay yeah I'm not okay cool oh it looks like harsh it's making a PR right now so depending on how long that takes we may be able to just pull some stuff in so yeah definitely you all can see how much like difficulty I'm having because well number one I'm not a back-end guy number two this is really all harsh it's work I haven't done anything with the server dot or the app dot J's file for the server so I'm not I'm not familiar with how it's set up I certainly reviewed everything before I pulled it in but I mean you know how it is if you write it yourself you're way more familiar with it then if you're trying to add to someone else's code which is the position I'm in right now so thank you for all the help Harshit and everybody else that's that's adding in a little okay eric says would love to see a flow chart for your authentication on this project that's a great idea I should try to come up with something for that because I have a visual in my head of of the flow but it might be a lot better if I could try to put that in some sort of like visual format for you all okay cool john b spotted a typo let's um let me wait i'm not going to change it right now i'm gonna wait and see what's up with with harsh its next pool request and then i'll change it ours was also asking did the male male trap work i know i didn't have a chance to to get it working before i so i just had to come straight for the meetings and started the stream so i didn't get a chance to even test it out aside from like the very first test i did that did not work see I can give it a shot I currently have have the info let me make sure that I have a there we go I'm gonna I don't want to show everybody my my dot m-files so I'm moving it to my other screen and I'm gonna open it up there just to make sure that I have okay I do have the right stuff in there actually I did I changed my password and username so let me update that okay say that whoops let's make sure I lost my whoa oh I know why cuz I just messed it up with all this obviously I just added a bunch of stuff alright so I'm gonna remove the stuff that I just did because we have a pull request that is on its way I need to get this working at least see and I'm not that worried about getting rid of this because realistically I just copy and paste and some stuff I didn't even make any modifications so it'll take about three minutes to get all that stuff back in there again if I need to let's see that was everything right yeah let's just give it a little restart here see if that fixes things yep there we go I'm gonna try to submit an announcements whoa that's it no that's probably not gonna work because if it was going to work it would have worked already okay my timer did go up so let me do another five minutes on my news okay let me do another five minutes and let me go back up to where I left off three or four okay our arvind says is the initial setup done yeah the the setup for this project it's done if if you go back and watch some of the previous streams you'll be able to check out the initial setup so this is project force if you go back to project for day one then that'll be you know obviously the starting point Sebastian says don't you need a database to store data with Passport yes I would assume I think that's or that we were bringing in that store okay cool Gideon's watching so glad you could join us gideon says so late once hin don't worry about it I was late to my own stream zavier says just use the honor system for us yeah why don't I just make one password and then I'll just email that pass for it to everybody at the University and then it'll be easy right it will just it would just be really basic we'll just have like user name user 1 and password 1 2 3 4 right obvious that change it because I just told you that password so that could work I actually believe it or not I've seen systems like that where we have something that's password protected but literally the the password is shared with everyone that works at the University okay so a few you're talking about using JWT JSON web tokens so rang Shu says JSON web tokens could work with just email just validate the email for a valid one as they says is there a reason you don't want to use JSON web tokens since the university has an email address send the link to the email and that should do the job I guess so let me think don't you think okay so let me sink through and you all know I'm no expert on JSON web tokens and how to set that up so you all if you've used them help me out here so the flow for the user then would be they go to the site for the first time they put in their email address we send them an email then they would click the link in that email then that would take them that that would basically have the token that would validate them at that point we would then have to store we would have to store that data for that user and then if I want to keep them login we'd have to store in local storage or as a cookie or whatever some data for that user in their own browser and then when they try to come back we check for that is that correct is that how the flow should work and if so would it be easier to just implement something very simple like that on our own or should we use one of these other solutions arvind says i think you should consider using the mapping of the email with phone number if it ever be necessary to send SMS considering this we can proceed with password list i guess can we start now please yeah yeah with the SMS maybe we can have the option for users to link it to their phone number and then then I guess later on if they need to log back in they could choose to get a text instead of an email that it might actually be yeah that might actually be a nicer option for people who are trying to use their cell phone okay okay so it looks like in regard to the JSON web tokens that may end up being the simplest way to do it but we'll see because harsh it's working on this pool request so maybe I should see about that first okay let's see um so I guess I don't know that I want to I don't want to put pressure on Harsha to try to push something out this quickly so I don't know if we should wait for that probably not all right so you let me let me just go ahead three I know the timer went up but let me just finish up with all the questions in the live chat here and then we'll see if I finish up the questions and we have something from a pull request maybe we'll check it out otherwise maybe we'll just have to postpone and work on this so yeah so sorry I didn't really get that much accomplished but we did sift through a lot of options and got a lot of different ideas on what would be the best way to do this so it's it's not it was productive in that sense I did think I'd have more time beforehand to get some things ready so it just didn't happen oops oh cool Blake says hey Jesse has submitted a pull request on the free code camp guides can you check it out to see if it reads whoa and it's helpful link okay cool off to check that out not right now but maybe after the stream I could check it out I just saw this some hard he says the the passport module so the passport password list repo says it looks kind of it looks hacky he's they are using password lists internally that's crazy arvin says i think we have only harsh in the house who knows password this better than any we should listen to him he may got yeah yeah it does seem like harsh it has some experience with using password list okay cool dragon hunter unfortunately I didn't catch all this earlier when I was when I was actually doing some coding the dragon owner said we already said you already have note mailers set up you can use that transport yeah that makes a lot of sense we were already using it for the other emails so in our email Jas we're already bringing in node mailer so could've used that like I said my intention was to set everything up exactly like it was in the documentation for password list thinking that that would allow us to at least have something to test out as quickly as possible yeah buh buh Jen says boy that is a mess of code James says high school in 2003 I'm about to show my age high school for me was 94 computers we're not even a consideration when I was going to school and Brett says I'm Way older than James it's always interesting I wonder what age range we have in here I know we've had I'm pretty sure we've had people who are like less than 10 years old I can't remember the exact age but we had some people that are really young and I think we've had people in their 60s on the stream I think it's cool that we have such a big age range and a range of people from different locations around the world that's that's awesome that we all kind of work together you know on these projects Kaddi says TGIF thank goodness it's Friday yeah okay dragon hunter says why not an authentication micro service which will route East request a separate one I don't I don't know enough about it to know whether or not which one would be better which one wouldn't be better ok Umberto says when using Microsoft sequel we make a service account for the server machine to the database ok cool that's that's kind of what I was thinking we'd end up doing with the the WordPress is that we would have a user account on WordPress that would just basically just be for our server to connect to WordPress so I'm glad to hear that that's that's how it's done in other places as well because I mean it seemed like it would work to me but I wasn't sure that that would be you know the proper way to do it Ellen Umberto says and the application controls what date of the login an authenticated user sees yeah definitely that's that's how I was thinking that that it would work so so I'm not crazy that's the legit way Haven okay I'm getting towards the bottom of the live chat it's gonna check see if there's any more questions okay we got so Arvin says okay I might be a noob but don't worry about being a noob I knew that many things as well but says it might be a new but I just want to know how to make multiple single page applications and a website what I basically mean is I should be able to do single page application stuff in multiple pages in the website what I'm basically confused about is how do you segregate multiple modules and associated controllers and factories okay well I mean so you want to have a website to where different routes in the site so I guess different sub directories would be their own single page applications that's what that's what I'm getting from this if that's not what you're saying then please let me know I mean I guess as long as you have something that's sitting in front of your multiple single page applications that's routing it to the different ones I mean you could you could separate them out like that so I'm not I guess it's hard to it's hard for me to say without kind of seeing more like what do you what you're trying to do but whatever a routing system that you have just have the the various routes go to different different applications some thinking like usually I mean potentially depending on what you are using you could have so you can have it set up so that all right so usually how we set up our projects when we're using react and note is we have nginx as a reverse proxy potentially we could at that level of the of nginx route traffic to different node installations different react apps based on the URL so I mean you could do something like that or at the level of node and Express you could route things to different places you know at that point I'm just not exactly sure you know which you what you're kind of looking for in terms of how it's going to function I don't know maybe I'm misunderstanding things if anyone else has some some more information and I'll check down here it looks like alright it looks like you got some more info here okay so Arvind is saying I'm basically using angular 1 running it and it uses the controller and factory concept to send receive data into my view let's say I have five pages in my web app and all our single page applications meaning every page has say for routing so collectively there are 20 routes as a whole how do people manage to separate modules for each page oh okay I I have very very little experience with angular so I don't know that I'm the best person to to handle that question if we have any angular people let's see okay so dragon hunter seems to have some answers here so saying if it's the same app that routing is handled by the client app if it's for multiple apps you can use Doku which I've never used that and since in each app could be in a sub-domain yeah definitely let's see okay okay cool so thanks dragon owner for for those answers yeah I'm definitely not I'm not very knowledgeable about angular stuff so I'll definitely admit when I don't have enough in all this to answer question properly okay we have some some ages here so seventeen twenty four thirty five thirty twenty six twenty I'm 31 I actually be 32 next week what's today I'll be 32 that on the 29th of October so soon okay harsh it says the PR is almost done uh-huh Paco says you know the last commit from angular was in 1886 they are still debugging the code at Google I don't want to get into any JavaScript framework Wars here John B says I believe you mean 1861 Paco that's when the great angular Civil War started when angular 2 changed the routing macho this is in react sitting looking at at angular analyst version with a big smile eric says angularjs plus one still learning more about react but it looks really great MD says hi hey how's it going thanks for joining us oh cool Blake said I'll be 15 in a month awesome actually Blake you might be the youngest one in the stream so cool awesome okay let me I think rat the bottom all right I'm at the bottom of the live chat I've gotten through everything so I know our shits pretty close to finishing up this pull request but I'm not sure not streaming away around for it maybe if I had eaten something today I might wait around for it but huh I'm really hungry so I'm right in the stream let's see let's say there's still some conversation going on here in the live stream but no no questions so yeah so I think there's definitely going to be a part two to the authentication and maybe down the road even a part three if we end up switching to something else so alright so my my energy level is is low so I probably wouldn't be very productive if I even try to do anything at this point so dragon owners to start a little Express project let's try password list I can't I don't have I'm I don't have the energy right now so yeah alright so it's Friday right so I'll be back Monday have a great day yeah so sorry didn't didn't really accomplish anything but we'll give it another go on Monday probably harsh it'll have some code for us to review and you know if anyone else has any ideas for you know what to do for authentication you know I'm still open to that as well it's very much still you know up for for discussion so I'll be back next week have a great weekend everybody and thanks for watching

Original Description

Project 4 Day 12: Today we will begin implementing user authentication with PassportJS. See a professional front-end developer at work. Unscripted. Mistakes included. GitHub Repo: https://github.com/fus-marcom/bulletin-react React: https://facebook.github.io/react/ Twitter: https://twitter.com/JesseRWeigel Youtube: https://www.youtube.com/c/JesseWeigel29 Instagram: https://www.instagram.com/jesse.weigel/ Code Editor: https://atom.io/ Atom Theme: Seti Terminal: https://www.iterm2.com/ Project Management: https://trello.com - Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →
1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

Related Reads

📰
How Dev Agencies Can Handle Client Revisions Without Burning Out (or Losing Money)
Learn how dev agencies can efficiently handle client revisions without burning out or losing money, by implementing effective communication and project management strategies
Dev.to · SarasG
📰
Give a Dead Side Project an Exit Report, Not an AI Eulogy
Learn to shut down side projects effectively with a compact exit report, preserving valuable assets and lessons
Dev.to · Sam Rivera
📰
How I’d Scope a Project Before Writing a Single Line of Code
Learn how to scope a project before writing code to ensure clarity and success
Medium · Startup
📰
Where to Start with my Project Idea
Learn how to break down your project idea into manageable parts and identify the necessary skills to get started
Reddit r/learnprogramming
Up next
How to Schedule a Message in Slack | Flowium
Flowium - eCommerce Email Marketing
Watch →