<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lavish Goyal</title>
    <description>The latest articles on DEV Community by Lavish Goyal (@lavig10).</description>
    <link>https://dev.to/lavig10</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F682691%2F7f2cae13-60a3-4bb1-a735-5e13a0a61b1b.jpg</url>
      <title>DEV Community: Lavish Goyal</title>
      <link>https://dev.to/lavig10</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lavig10"/>
    <language>en</language>
    <item>
      <title>6 Reasons why student developers don't grow</title>
      <dc:creator>Lavish Goyal</dc:creator>
      <pubDate>Mon, 10 Oct 2022 12:27:57 +0000</pubDate>
      <link>https://dev.to/lavig10/6-reasons-why-student-developers-dont-grow-5d67</link>
      <guid>https://dev.to/lavig10/6-reasons-why-student-developers-dont-grow-5d67</guid>
      <description>&lt;p&gt;Everyone has experienced failure at some point in their lives. But what happens when this is the first experience you’ve had as a developer? Situations like these can often cause people to become fearful of taking risks, and it could lead to feelings of self-doubt especially when you are a high school/college/school student. Developing software involves making countless decisions every day. It’s important that these decisions are made thoughtfully and with the best intentions possible. With numerous things happening in your student life and you juggling around with decisions to make it becomes increasingly difficult to sometimes focus on efficiency and upskilling. If you don’t take the time to understand why things happen, or how other developers have dealt with similar situations, then you run a high risk of failing when things go wrong again and again. In this blog post, we will address some common pitfalls that new developers face, and how to avoid them if possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bad habits
&lt;/h2&gt;

&lt;p&gt;When you’re a beginner, you must be careful not to develop bad habits. Bad habits can be hard to spot when you’re just starting out, but they can cause a lot of problems later on as you progress. Here are some bad habits that new developers tend to fall into: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You don’t meet your deadlines - If you’ve never completed a project before, chances are you don’t know what it takes to finish a software project on time. This is especially true when you’re a beginner and you don’t have the experience or knowledge to help guide the way. When you don’t meet deadlines, it can cause unnecessary stress and anxiety. What usually happens with college projects is that the deadlines get extended and you work your a** off in the last couple of days to get it completed because you know it needs to be done, but, in the case of your side project, you don't have any kind of compulsion and your mind tends to leave it when you face some problem or you aren't able to meet a specific deadline. &lt;/li&gt;
&lt;li&gt;You don’t collaborate - Do you know anything about this? Competition is bad; cooperation is better. This is definitely the case. Upskilling is a tremendously difficult task. Because it implies that you must upskill a skill after you learn or acquire it. You must improve it and use your talents to accomplish many more things much more effectively, but as a student, you frequently have a tendency to keep things to yourself and dislike disclosing or making public what you are learning. I get it. Don't, however, try to handle everything on your own. If your brilliant project concept incorporates elements of machine learning, the front-end, and other components, market your idea to invite like-minded people with similar types of zeal. Five people at a beginner level with their respective skills can do much better and benefit individually than you alone working on five different technologies which you don't have any idea about. Also, it saves you time.&lt;/li&gt;
&lt;li&gt;You don’t work with a mentor - There are a few benefits to working with a mentor, both in the short and long term. Working with a mentor can help you develop good habits, resolve issues with your project, and learn how to work with other people on a team effectively. Working with a mentor is also beneficial when you want to start your own business because you can learn from their mistakes and apply what you’ve learned to your own business. Working with a mentor can greatly increase your chances of success. As a student you have a great opportunity to interact with your seniors and you know they are in front of you and you can legitimately check whether what they have achieved is real or not! But definitely connecting with mentors all over the world is made possible by following the practice of &lt;strong&gt;Learning In Public&lt;/strong&gt; and efficient use of social media.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Lack of code review
&lt;/h2&gt;

&lt;p&gt;Lack of code review is a common mistake that new developers make. It’s important to have a process for code review. &lt;strong&gt;What does code review really mean?&lt;/strong&gt; Now, you learn from some blog posts or some video tutorials and then you write some code. But how do you know if what you have written is the best way to write it, until and unless you have exactly copy pasted from the video or blog post? For example, You write a program for fetching data from MongoDB and process that data to sort it in increasing order and send it to the front-end. Have you ever wondered how some other developer would have written that same program? or How can you optimise the code to send the data much more quickly or sort the data much more effectively?&lt;/p&gt;

&lt;p&gt;That is a problem students often face and they don't even know that it is a problem. You keep writing code without knowing if it is the best way or not. It affects you in the long run when you have to work on bigger projects and you struggle with finding consistency in your codebase and optimising your program's performance.&lt;/p&gt;

&lt;p&gt;It has a simple solution, explore the web to do things you already &lt;strong&gt;did&lt;/strong&gt; in a different way. Definitely not the most basic things which are just easy or boilerplate but things which you actually think that you've done for the first time or have written completely by yourself. In your free time trying to explore articles and projects where you can find similar functionality so you can actually learn that "Oh! there's an even better way to fetch data from MongoDB!" or maybe your reaction can be like: "Damn! I didn't know Internationalization API functionality was built into JavaScript, I was wasting my time implementing it from scratch"&lt;br&gt;
I have faced it a lot and trust me exploring what you did on the internet improves you more than practising your skill. And also an added advantage with this process is if you don't find something like what you did which means it may be a unique work you can market yourself with a good blog/article and tell the community and get suggestions!&lt;/p&gt;

&lt;h2&gt;
  
  
  You think you know everything
&lt;/h2&gt;

&lt;p&gt;New developers often assume they know everything once they complete a BootCamp or a video tutorial. This is especially true in the beginning when you don’t have a lot of experience under your belt. As you continue to work as a developer, you’ll encounter situations that you haven’t dealt with before. This can cause you to panic, which will make it much harder to solve the problem at hand. If you find yourself thinking you know everything, try to remember that you don’t. Try to be open-minded, and accept that you might not know everything. You can also try to identify what areas of expertise you do have, and use those skills to problem-solve.&lt;/p&gt;

&lt;h2&gt;
  
  
  No reward system
&lt;/h2&gt;

&lt;p&gt;Many companies use a reward system to motivate their employees. You must have heard about things like team lunches, free pizza Fridays, and other activities that provide a sense of community and reward. Similarly, as a student being rewarded for your efforts will help to keep you motivated, especially when things get hard. Working day and night is tough. You have to make notes in class, study for examinations, spend time chilling with your friends make memories and you have to code. You get yourself hassled to manage all these things and tend to leave one or two things completely, which is not good! You definitely need to spend time coding if you want to upskill but the human mind works effectively only when you reward yourself for your hard work. Sometimes for a completed project or a problem, you were stuck for some time, or maybe a break or a refreshment when you are stuck on a project and not able to find the solution. &lt;/p&gt;

&lt;h2&gt;
  
  
  Unrealistic deadlines
&lt;/h2&gt;

&lt;p&gt;As a student, you often sometimes assume that, hey before the end of this semester I will learn these 4 different technologies and create a humongous life-changing product in the holidays! RELAX! You'll only end up learning 4 new technologies in a way that you can only write "Hello World" in them. Seriously, I've seen my friends setting completely unrealistic deadlines, completing or practising 3 different Udemy Courses at the same time aiming to achieve mastery in three different languages at the same time that too in one month. That is not how things work. If you want to really grasp something, really understand it and create something with it, &lt;strong&gt;you need to give it time!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You need to get stuck in it, spend time solving a problem, spend time thinking about why it is happening like this, explore various solutions etc. Until and unless you don't do this, you won't excel at your preferred skillset. Once you start putting time into one specific thing, you'll automatically learn next time how to optimise your time and how to divide your time into learning different things and you'll learn more efficiently at a much fast pace. So, take a chill pill! Be relaxed, set a realistic deadline, achieve it and get comfortable. Then &lt;strong&gt;gradually&lt;/strong&gt; keep on increasing your deadline difficulties!&lt;/p&gt;

&lt;h2&gt;
  
  
  Not asking for help or taking advantage of opportunities
&lt;/h2&gt;

&lt;p&gt;As you continue to work as a developer, you’ll encounter situations that you haven’t dealt with before. This can cause you to panic, which will make it much harder to solve the problem at hand. If you find yourself needing help, or want to take advantage of an opportunity, try to remember that everyone has a learning curve. New developers often assume that other people are more experienced than them, or that they know everything. This is especially true in the beginning when you don’t have a lot of experience under your belt. &lt;/p&gt;

&lt;p&gt;There is no shame in asking for help, in admitting that you don't know it but still you wanna do it!&lt;/p&gt;

&lt;p&gt;I will tell you an honest story when I grabbed the first internship I had no idea how to write a NodeJS Server Side application by myself. Every time I had to write a Server Side code I had to open some tutorial and start copying it. But still, I cracked the internship because things I didn't lack were:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;My confidence that I have done this thing and this is how it works!&lt;/li&gt;
&lt;li&gt;My habit of always keep searching and asking for help (in my developer journey) if I am not able to do it myself, like asking for help from Google/Senior Developers&lt;/li&gt;
&lt;li&gt;My zeal to take the opportunity at hand and learn something from it!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I cracked the internship and worked hard to learn things and followed all the steps I told you above, read, research, asked for help, asked for guidance and most importantly never gave up on the opportunity I have received! I would have been completely fine if I would have lost that opportunity by not working efficiently but I would've at least learnt so many things.&lt;/p&gt;

&lt;p&gt;So, just don't panic if you aren't highly skilled. There are lots and lots of communities which are really welcoming where you can put up your queries and ask for guidance and there are a lot of opportunities on your way which may not seem achievable at first but once you determine that you have that zeal to accomplish them, you can do wonders!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Developing software is challenging and difficult, but it can also be extremely rewarding. Becoming a developer requires a unique set of skills and knowledge that can take some time to develop. However, with the right mindset, initiative, and willingness to learn, anyone can become a successful developer. As you can see, there are many reasons why developers fail. The best way to prevent failure is to be prepared for failure. This means that you need to identify the areas where you need improvement and work towards improving them.&lt;/p&gt;

&lt;p&gt;Be happy and be rewarding for yourself, that is the key :)&lt;/p&gt;

&lt;p&gt;You can definitely connect with me over LinkedIn or Twitter for any queries or guidance or support you would want. I would definitely love to help you &amp;lt;3&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My gadgets&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Laptop (Macbook Air 2020 M1)&lt;/p&gt;

&lt;p&gt;Keyboard and Mouse: &lt;a href="https://amzn.to/3eTvFTP"&gt;https://amzn.to/3eTvFTP&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;External Display Monitor: &lt;a href="https://amzn.to/3doZI5z"&gt;https://amzn.to/3doZI5z&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;External SSD: &lt;a href="https://amzn.to/3BrrSoD"&gt;https://amzn.to/3BrrSoD&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;USB Hub for Macbook Air: &lt;a href="https://amzn.to/3ScC3E1"&gt;https://amzn.to/3ScC3E1&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Headphones: &lt;a href="https://amzn.to/3qR5yzP"&gt;https://amzn.to/3qR5yzP&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Laptop Sleeve: &lt;a href="https://amzn.to/3R7MkAz"&gt;https://amzn.to/3R7MkAz&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(some of the above are affiliate links ie if you purchase any item using the links above I'll get a very small percentage of it and you'll get the product at the same price)&lt;/p&gt;

</description>
      <category>codenewbie</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>programming</category>
    </item>
    <item>
      <title>How to start Web Development?</title>
      <dc:creator>Lavish Goyal</dc:creator>
      <pubDate>Sun, 09 Oct 2022 10:25:31 +0000</pubDate>
      <link>https://dev.to/lavig10/how-to-start-web-development-4c6l</link>
      <guid>https://dev.to/lavig10/how-to-start-web-development-4c6l</guid>
      <description>&lt;p&gt;Hi, I am &lt;a href="https://lavishgoyal.live"&gt;Lavish Goyal&lt;/a&gt; and this is my first Hashnode Blog. Basically, I'm starting my blogging journey through this particular blog and what's better than helping you start your journey as a web developer.&lt;/p&gt;

&lt;p&gt;Web Development as we see it today is a very popular choice for both full-time jobs and freelancing. I have been doing freelancing for the past year and I have learned a few of the technologies from the large pool of existing technologies used for web development. So let's get you started on your journey to develop crazy web applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is web development?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You are viewing this article on a web page and the development of these web pages is called web development. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How do websites work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Websites are nothing but files stored on a computer located somewhere else, generally called a server. Every time you visit a website some files are requested and downloaded by the browser which loads up on your computer and you see that particular website.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Division of tasks in Web Development&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Front-end&lt;/li&gt;
&lt;li&gt;Back-end&lt;/li&gt;
&lt;li&gt;DevOps&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;DevOps&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It refers to development operations. Basically, when you are writing the code for a website you need to test it and deploy it so everyone around the globe can use it and you need to maintain versions of the website as you keep changing and upgrading it over time.&lt;/p&gt;

&lt;h1&gt;
  
  
  Let's get started with learning paths
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Frontend
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9lpFWtpF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hexfc11tf0watukiksz8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9lpFWtpF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hexfc11tf0watukiksz8.png" alt="Frontend Developer Roadmap" width="880" height="2495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Take a good look at the roadmap and don't worry if it is overwhelming at first, because I am going to make a shorter and easier path for you.&lt;/p&gt;

&lt;p&gt;As the name suggests front-end refers to everything the user sees, basically the content, images, graphics etc on a web page is the frontend, and basically, you need to learn to create a frontend part of the website are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;Javascript&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;HTML: It is HyperText Markup Language, as the name tells it is not a programming language but a markup language which is used to present content on a webpage.&lt;/p&gt;

&lt;p&gt;CSS: It is an acronym for Cascading Style Sheets which is used to style a website.&lt;/p&gt;

&lt;p&gt;These two technologies together create a static (non-functional) website, but what about something dynamic, which can respond to user input, and user actions? That's where Javascript comes in.&lt;/p&gt;

&lt;p&gt;Javascript is a scripting language that provides an interactive element for the user on any website.&lt;/p&gt;

&lt;p&gt;Consider you want to build a coffee shop. You contact construction workers and have them build a building with bricks, rocks etc. The structure of your coffee shop. Then you contact painters, designers, and carpenters to make it look good, that is the styling of your coffee shop. Then you need coffee machines, computers, and managers to take orders and start operation in a coffee shop. This is the same with a website. HTML gives structure, CSS styles a website and Javascript makes it operatable.&lt;/p&gt;

&lt;p&gt;It is important that you shouldn't learn highly advanced concepts for all three of these technologies in the early stage of your journey. Learn the stuff with which you can build basic websites.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/"&gt;Udemy Course you can follow for learning HTML CSS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.udemy.com/course/the-complete-javascript-course/"&gt;Udemy Course you can follow for learning JS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This link will take you to the course I followed for learning web development as a beginner. It takes you from absolute beginner to a level you can start building web pages on your own.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;It is not an affiliate link&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Once you get hold of HTML, CSS &amp;amp; Javascript. You can start learning CSS frameworks. The most popular of them are: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bootstrap&lt;/li&gt;
&lt;li&gt;Tailwind CSS&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;CSS frameworks are already prepared CSS files, which you can directly use in your HTML files for easier front-end development.&lt;/p&gt;

&lt;p&gt;If you find yourself interested in front-end development, take the next step ahead and learn a Javascript Framework.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;Javascript Framework&lt;/strong&gt; is pre-written javascript code consisting some commonly used JS libraries, modules and add-ons to build web pages more efficiently and in lesser time. There are numerous Javascript frameworks out there and it seems like every month a new framework is released. But most popular of them are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Vue&lt;/li&gt;
&lt;li&gt;Angular (developed by Google)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The most popular choice is React as it is easier to get started with, but choosing a Javascript framework is totally up to you.&lt;/p&gt;

&lt;p&gt;So, once you are done with HTML, CSS, JS, React/Vue/Angular you can pretty much call yourself a Front-End Web Developer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Backend
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZgPgEwZQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59s3ztzsym2azubddbhs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZgPgEwZQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59s3ztzsym2azubddbhs.png" alt="Backend Developer Roadmap" width="880" height="2246"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It refers to everything happening behind the pretty web pages you see. The data collection, logging into a website, sending a friend request on Facebook, basically 80% of the tasks of any website are handled by the backend.&lt;/p&gt;

&lt;p&gt;If you look at the roadmap image you can see there are plenty of languages you can learn to start with server-side development. Since you have already learnt Javascript during your frontend development, you can opt for NodeJS as your choice for backend programming. Along with that you should learn Express and MongoDB.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is NodeJS?&lt;/strong&gt;&lt;br&gt;
NodeJS is actually not a language but it is an open-source cross-platform Javascript runtime environment. This basically means is, traditionally Javascript was made only to run and execute in the browsers, few developers got together and made a software via which Javascript can be executed outside of the browser as well.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Express?&lt;/strong&gt;&lt;br&gt;
As per the &lt;a href="https://expressjs.com"&gt;website&lt;/a&gt;, it is a fast, unopinionated, minimalist web framework for Node.js. Building backend applications in raw NodeJS can be tough. So, Express comes with some pre-built easy to understanding and implement features to write backend code for Web &amp;amp; Mobile applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is MongoDB?&lt;/strong&gt;&lt;br&gt;
You have created a website, and written backend code for your website as well, but you need a place to store the data. That is a database. MongoDB is a NoSQL database.&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/difference-between-sql-and-nosql/"&gt;NoSQL vs SQL Databases&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;MongoDB provides you with a MongoDB Atlas which is a database on the cloud and has a free tier to use for beginner developers.&lt;/p&gt;

&lt;p&gt;Now, MongoDB can be integrated directly with your NodeJS application with a library called Mongoose.&lt;br&gt;
Mongoose makes it easy to integrate MongoDB into your application. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/"&gt;Learn NodeJs, MongoDB&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, this is only one way to become a backend developer. As you can see from the roadmap image there are different languages available to become a backend developer. But the pattern remains the same, you need a programming language to run on the server-side and you need to learn a database language and how to integrate it with your choice of server-side language.&lt;/p&gt;
&lt;h3&gt;
  
  
  Other Essentials to learn
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Version Control Systems&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Version control is the practice of managing and tracking changes in the code of your software. It is an essential practice during the development of your website as due to any mishappening you can lose all your code thus you need some kind of technology to maintain and sustain different versions of your website. That is where &lt;em&gt;git&lt;/em&gt; comes in.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is &lt;em&gt;git&lt;/em&gt;?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Git is an open-source version control system to handle very small to large projects with speed and efficiency.&lt;/p&gt;

&lt;p&gt;Once you learn git you need a platform where you can store and save the versions of your website and collaborate on your project with your team/organization thus we learn about the version control repository platform.&lt;/p&gt;

&lt;p&gt;There are different platforms for hosting Version Control Repositories:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;GitHub&lt;/li&gt;
&lt;li&gt;Bitbucket&lt;/li&gt;
&lt;li&gt;GitLab&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is GitHub?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;GitHub is the most popular and used Version Control Repositories platform. According to Google:  GitHub is a website for developers and programmers to collaboratively work on code. The primary benefit of GitHub is its version control system, which allows for seamless collaboration without compromising the integrity of the original project. The projects on GitHub are examples of open-source software.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtu.be/apGV9Kg7ics"&gt;Learn Git &amp;amp; Github in a single video&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is pretty much what you need to understand and learn to call yourself a Web Developer. Trust me, once you learn all the basic stuff and start coding your ideas into reality you'll automatically figure out advanced stuff. Do make sure that you do not go for learning advanced things in any of the technologies I mentioned as it can demotivate you as you will not be able to see results.  &lt;/p&gt;

&lt;p&gt;While learning it is very important you keep on building with whatever you learn after every few weeks otherwise you can feel that you do not remember anything done previously and you can go into a deep tutorial hell. Watch a tutorial, build something, if you are stuck don't fear asking someone in some community, your seniors or Googling your doubts. It's common for developers to Google even small problems, thus you'll find solutions to even the smallest problems and errors in your code.&lt;/p&gt;
&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;p&gt;You can definitely follow the Udemy links I mentioned with every section to learn that particular technology, but there are numerous videos and articles present freely on the web that can give you tons and tons of knowledge. If you are the one with discipline and can do things on your own, you need not go for paid courses as of now, as a beginner. You can refer to the following free resources:&lt;/p&gt;

&lt;p&gt;YouTube is filled with free quality content and I am just mentioning a few of those&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ZxKM3DCV2kE"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/G3e-cpL7ofc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/PkZNo7MFNFg"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/SccSCuHhOw0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/5QEwqX5U_2M"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CHWrMl1W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnnp1yoz307t4jtdhcca.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CHWrMl1W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnnp1yoz307t4jtdhcca.png" alt="Freecodecamp logo" width="880" height="107"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;a href="https://www.youtube.com/c/Freecodecamp"&gt;https://www.youtube.com/c/Freecodecamp&lt;/a&gt;)&lt;br&gt;
Freecodecamp's YouTube channel &amp;amp; website is a hub of top-quality content for free.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bonus Tip&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Once you learn Javascript and React you can easily shift to the development of cross-platform applications, that is write code once and you can build an application for Android, iOS, PC, Mac etc. using React Native.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Final Words&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Being patient is the key to becoming a developer. It will take time and you cannot deny that fact. You only learn after making mistakes and don't fear making them. Do experiments, mix-match stuff and then only you'll learn how to achieve what you want to achieve.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My gadgets&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Laptop (Macbook Air 2020 M1)&lt;/p&gt;

&lt;p&gt;Keyboard and Mouse: &lt;a href="https://amzn.to/3eTvFTP"&gt;https://amzn.to/3eTvFTP&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;External Display Monitor: &lt;a href="https://amzn.to/3doZI5z"&gt;https://amzn.to/3doZI5z&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;External SSD: &lt;a href="https://amzn.to/3BrrSoD"&gt;https://amzn.to/3BrrSoD&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;USB Hub for Macbook Air: &lt;a href="https://amzn.to/3ScC3E1"&gt;https://amzn.to/3ScC3E1&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Headphones: &lt;a href="https://amzn.to/3qR5yzP"&gt;https://amzn.to/3qR5yzP&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(some of the above are affiliate links ie if you purchase any item using the links above I'll get a very small percentage of it and you'll get the product at the same price)&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Different ways for User Authentication with NodeJS Part - 2 (JWT)</title>
      <dc:creator>Lavish Goyal</dc:creator>
      <pubDate>Sun, 21 Nov 2021 04:46:47 +0000</pubDate>
      <link>https://dev.to/lavig10/different-ways-for-user-authentication-with-nodejs-part-2-jwt-3h0p</link>
      <guid>https://dev.to/lavig10/different-ways-for-user-authentication-with-nodejs-part-2-jwt-3h0p</guid>
      <description>&lt;p&gt;So this is the part 2 of the User Authentication with NodeJS. You can check out the Part - 1 &lt;a href="https://dev.to/lavig10/different-ways-for-user-authentication-with-nodejs-1odj"&gt;here&lt;/a&gt;. In this Part we talk about the modern solution for User Authentication which is much more feasible and scalable. Token Based Authentication.&lt;/p&gt;

&lt;h1&gt;
  
  
  Token Based Authentication
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://postimg.cc/pp98vqvX" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.postimg.cc%2Fdt698xSd%2FClient.png" alt="Client.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In token based authentication, when a user logins with correct credentials a &lt;em&gt;token&lt;/em&gt; (a long string with random characters and numbers) is generated and sent back to the client's browser where it is stored (in localStorage, SessionStorage or cookie). Now every time a user will make a request to the server that token stored in browser will be sent back to the server and we will have some middleware function to verify the token and give back the required resources.&lt;br&gt;
Let's implement it in code.&lt;/p&gt;

&lt;p&gt;Create an empty NodeJS project and in terminal run the command&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install express jsonwebtoken mongoose&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;express - For creating our server&lt;br&gt;
mongoose - To Connect to our MongoDB Database&lt;br&gt;
jsonwebtoken - Known as JWT, it is an open source npm package for generating access tokens securely&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;mongoose&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;jsonwebtoken&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your_mongo_url&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;MongoDB Connected....&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;h1&amp;gt;Hello World!&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Server 🔥🔥🔥 up on 5000`&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This block of code will make our server up and running on Port 5000. So if you now visit &lt;a href="http://localhost:5000/" rel="noopener noreferrer"&gt;http://localhost:5000/&lt;/a&gt; you will see the desired result.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/login&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Please enter a valid username&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;accessToken&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;jwt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;_id&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="nx"&gt;JWT_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;expiresIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NODE_ENV&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;production&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;6h&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2 days&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;User logged in!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;accessToken&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;503&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Server error!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So above block of code is posting the login credentials and logging in the user. Let us understand the &lt;code&gt;jwt.sign()&lt;/code&gt; functionality which is creating our access token.&lt;br&gt;
JWT - Json Web Token has a method called &lt;code&gt;sign()&lt;/code&gt; which is used to create a new web token which will contain user information in a hidden way. There are three parameters in &lt;code&gt;jwt.sign()&lt;/code&gt; method. Let's talk about each of them.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;First is the data to be stored in the token. It can be a string or a javascript object. In this example we stored username and id (mongodb unique generated id) in the access token.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Second parameter is the &lt;code&gt;JWT_SECRET&lt;/code&gt;. It can be anything (a random string) and it is important not to display it in production. You should use environment variables for saving the JWT_SECRET. It'll be used later on to verify the JWT Token and authenticate the user.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Third parameter is optional properties that can be defined for the access token, like expiry date, httpOnly etc. You can check out more in detail about the optional parameters &lt;a href="https://www.npmjs.com/package/jsonwebtoken" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This function will return us a string of random characters which is called a jwt access token. Something like this:&lt;br&gt;
&lt;code&gt;&lt;br&gt;
eyJhbGciOiJIUzI1NiJ9.eyJpZCI6IjYwZndmNzA5N2ZmN2YwOTdmMDk5IiwidXNlcm5hbWUiOiJsYXZpc2hnb3lhbCJ9.kNPmoyim0KbrHw6Fl2NPdUWO3UdZ1cr3rFH4eZy9DIg&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
Now if you how this token contains information about user, open another tab in your browser and go to &lt;a href="https://jwt.io/" rel="noopener noreferrer"&gt;https://jwt.io/&lt;/a&gt; and in the encoded input box paste the above access token and you'll receive the id and username as shown below&lt;/p&gt;

&lt;p&gt;&lt;a href="https://postimg.cc/309HbgLs" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.postimg.cc%2FMXJKH51p%2FScreenshot-2021-11-21-095657.png" alt="Screenshot-2021-11-21-095657.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you look closely there are two dots in the JWT Access token which divides the token string into three parts.&lt;br&gt;
&lt;a href="https://postimg.cc/ppXhCvkS" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.postimg.cc%2F15DG95Fy%2FScreenshot-2021-11-21-100033.png" alt="Screenshot-2021-11-21-100033.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first part is the algorithm for encoding the token, second part consists the user details we entered and third part is the JWT Secret used to verify the user later (which we'll do just now)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;authenticateToken&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;authHeader&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;authorization&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;authHeader&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;authHeader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;401&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Not Authorized&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="nx"&gt;jwt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;verify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;token&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;JWT_SECRET&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;401&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This block of code will verify the incoming JWT token and authenticate the user and we can proceed with further data processing. &lt;code&gt;jwt.verify()&lt;/code&gt; takes in three parameters, first is the token which we'll receive from client. The token can be received either via cookie or in headers. Here the token is passed in the header &lt;code&gt;Authorization&lt;/code&gt; Header. *&lt;em&gt;Remember the JWT_SECRET should be the same among the whole project otherwise the jwt token will not be decoded and return an error of invalid token. *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Now the above authenticateToken middleware function can be used in all the protected routes to verify if the user is eligible for accessing data at that particular route for example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/dashboard&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;authenticateToken&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;h1&amp;gt;Welcome to dashboard&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So in the above code we used the authenticateToken as the middleware function and if the client's request contains a correct jwt token user will be shown Welcome to dashboard heading otherwise will be shown an error.&lt;/p&gt;

&lt;p&gt;That was all folks. That was all about the authentication and authorization with NodeJS. There are much more complex and secure ways to do authentication but it was a beginner's tutorial so I kept it that way. Will cover more about it in next blogs. Until then share the post and tag me on twitter. &lt;br&gt;
See Ya!&lt;br&gt;
&lt;a href="https://www.buymeacoffee.com/lavishgoyal" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkcccyqndw3dhisr8npqr.png" alt="Buy Me A Coffee"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Different ways for User Authentication &amp; Authorization with NodeJS Part - 1</title>
      <dc:creator>Lavish Goyal</dc:creator>
      <pubDate>Sat, 20 Nov 2021 20:15:09 +0000</pubDate>
      <link>https://dev.to/lavig10/different-ways-for-user-authentication-with-nodejs-1odj</link>
      <guid>https://dev.to/lavig10/different-ways-for-user-authentication-with-nodejs-1odj</guid>
      <description>&lt;p&gt;First let us get over with the debate of &lt;strong&gt;Authentication&lt;/strong&gt; vs &lt;strong&gt;Authorization&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Authentication
&lt;/h2&gt;

&lt;p&gt;It is the process to verify if the user is telling the truth. For example: when we log into our account with some username and password, the process of verifying those credentials with the stored information in database and knowing that the user is really whom he/she claims to be is called Authentication.&lt;/p&gt;

&lt;h2&gt;
  
  
  Authorization
&lt;/h2&gt;

&lt;p&gt;It is a security process to know what information user has access to. Giving someone permission to download a particular file on a server or providing individual users with administrative access to an application are good examples of authorization.&lt;/p&gt;

&lt;p&gt;In this article we are going to look into two different methods of User Authentication with NodeJS&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sesssion Based Authentication&lt;/li&gt;
&lt;li&gt;Token Based Authentication&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Prerequisites&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nodejs.org/en/" rel="noopener noreferrer"&gt;NodeJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.mongodb.com/" rel="noopener noreferrer"&gt;MongoDB&lt;/a&gt; 
(You can use an Atlas account or local mongodb connection)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Setup a new NodeJS project using &lt;code&gt;npm&lt;/code&gt; or &lt;code&gt;yarn&lt;/code&gt; whatever you like.&lt;/p&gt;

&lt;h1&gt;
  
  
  Session Based Authentication
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://postimg.cc/WtQ8dtZp" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.postimg.cc%2FncLPwDcm%2Fsession-auth.png" alt="session-auth.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This image very simply summarizes the session based authentication. Let's implement it in code and understand better.&lt;/p&gt;

&lt;p&gt;Execute the following line of code on your terminal within your project directory.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install express express-session mongoose connect-mongo&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;express - For creating our server&lt;br&gt;
express-session - For creating our session based authentication&lt;br&gt;
mongoose - To Connect to our MongoDB Database&lt;br&gt;
connect-mongo - For storing our sessions in MongoDB Database&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;mongoose&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MongoStore&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;connect-mongo&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;session&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express-session&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your_mongo_url&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;MongoDB Connected....&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;h1&amp;gt;Hello World!&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Server 🔥🔥🔥 up on 5000`&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This block of code will make our server up and running on Port 5000. So if you now visit &lt;a href="http://localhost:5000/" rel="noopener noreferrer"&gt;http://localhost:5000/&lt;/a&gt; you will see the desired result.&lt;/p&gt;

&lt;p&gt;Now let us configure the MongoDB Store for session storage.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;session&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;secret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fiwafhiwfwhvuwvu9hvvvwv&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Never ever share this secret in production, keep this in separate file on environmental variable&lt;/span&gt;
    &lt;span class="na"&gt;resave&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;saveUninitialized&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;cookie&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;maxAge&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;oneDay&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;store&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;MongoStore&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;mongoUrl&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;your_mongo_url&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This block of code used the express-session package to create an empty Session object for a request. &lt;br&gt;
&lt;a href="https://stackoverflow.com/questions/40381401/when-to-use-saveuninitialized-and-resave-in-express-session" rel="noopener noreferrer"&gt;Refer&lt;/a&gt; to this link to understand about saveUninitialized and resave properties in the object.&lt;/p&gt;

&lt;p&gt;So this will create a new empty session inside our mongodb database with a collection name sessions.&lt;/p&gt;

&lt;p&gt;Let's create a login route for user&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/login&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;    
&lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
        &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;session&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;session&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;redirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Server Error! Please reload page&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now this block of code is important. Now when the user logs into its account with username and password we send that request to our server and store the request in the session. &lt;code&gt;req.session.userId&lt;/code&gt; is storing the unique _id of the user in the session and server creates a unique session id which is placed in the cookie which will be sent back to the client and stored in the client's browser as. Now whenever the client will make any request to the server the header will contain this cookie and we at server side are able to authenticate that particular user using that cookie in the header and obtaining the userId of the user.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;authentication&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;userId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;session&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;redirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/login?q=session-expired&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;redirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/login?q=session-expired&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Server error. Please reload page after sometime&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can create this type of middleware function where for every request on protected routes like dashboard, booking history, payment routes etc we can authenticate the user and display the correct data according to the user. &lt;/p&gt;

&lt;h3&gt;
  
  
  Advantages of Session Based Authentication
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Cookies are small-sized values, easy to use and implement and can revoke the validity of the cookies.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Disadvantages of Session Based Authentication
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Sessions are stored in server/database and not on client side thus it makes it really difficult to scale the project when there is a huge number of requests simultaneously.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is where token based authentication (a modern and scalable solution) comes in. It solves the biggest headache with the session authentication that tokens are stored in client's browser thus making it really simple to scale the application.&lt;br&gt;
Stay Tuned for part 2 where we talk all about the Token Based Authentication.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/lavishgoyal" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkcccyqndw3dhisr8npqr.png" alt="Buy Me A Coffee"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
