{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/136","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Companies are investing heavily in omnichannel customer experiences lately. But why are they doing so? Well, the answer is simple. Today…","fields":{"slug":"/growth/omnichannel-customer-experience/"},"html":"<p>Companies are investing heavily in omnichannel customer experiences lately. But why are they doing so?</p>\n<p>Well, the answer is simple.</p>\n<p>Today, customers expect a seamless and consistent interaction across major communication touchpoints.</p>\n<p>Creating separate web, mobile, and social media experiences are no longer effective. Today, businesses are integrating marketing, support, and sales channels as part of one big omnichannel experience instead.</p>\n<p>But then,  pulling this off can be quite expensive. </p>\n<p>Firstly, brands need to understand what omnichannel customer experience is, how it should function, and why companies are investing in them.</p>\n<h2 id=\"defining-the-omnichannel-customer-experience\" style=\"position:relative;\"><a href=\"#defining-the-omnichannel-customer-experience\" aria-label=\"defining the omnichannel customer experience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Defining the omnichannel customer experience</h2>\n<p>An omnichannel customer experience is a multifold approach to advertising, selling, and supporting customers across multiple marketing touchpoints. </p>\n<p>This means a customer could be shopping from his desktop, mobile phone, or offline store and still enjoy a <a href=\"https://www.loginradius.com/blog/2019/11/improve-customer-experience-ecommerce/\">seamless buying experience</a>. </p>\n<p>Let's explain this further.</p>\n<p>Here's what the journey of a customer will look like in the omnichannel world when he wishes to buy a smart TV.</p>\n<ul>\n<li>The customer will search for the best smart TV online, compare features with different brands, and read reviews.</li>\n<li>Once the TV is shortlisted, the customer will visit the brand's website to understand its specifications better.</li>\n<li>If need be, the customer may consider visiting its offline store to try out its features in-person. </li>\n<li>The customer will also ask for available in-store offers.</li>\n<li>If not satisfied, the customer will go back to the website and buy the smart TV.</li>\n<li>The customer may leave reviews and suggestions for other buyers online.</li>\n<li>Meanwhile, the customer may also consider buying other accessories from the same brand.</li>\n</ul>\n<p>This is how customers interact with brands today. They don't mind going all out. Customers are okay with venturing both online and offline, prior, during, and post their purchase journey. </p>\n<p>All-in-all, a brand that advocates the omnichannel customer experience module should ensure that <a href=\"https://www.loginradius.com/customer-experience-solutions/\">the customer's journey is seamless</a>, especially while switching between different physical and digital channels.</p>\n<p>That being said, the following are a few industry figures that will highlight the importance of omnichannel customer experiences in the new world.</p>\n<p><a href=\"https://www.loginradius.com/resource/omnichannel-retailer-customer-experience\"><img src=\"/a93a12fca2cee2406d7375d38c83fec9/omnichannel-customer-experience-whitepaper-1024x310.webp\"></a></p>\n<h2 id=\"omnichannel-customer-experience-statistics\" style=\"position:relative;\"><a href=\"#omnichannel-customer-experience-statistics\" aria-label=\"omnichannel customer experience statistics permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Omnichannel customer experience statistics</h2>\n<ul>\n<li>Highlighting the value of customer experience, a study by Esteban Kolsky reveals that <a href=\"http://www.slideshare.net/ekolsky/cx-for-executives\">72% of customers</a> are likely to share their positive experiences with six or more people. In comparison, 13% of customers may share their unhappy experiences with 15 or more customers.</li>\n<li>According to a survey by PwC on 15,000 consumers, <a href=\"https://www.pwc.com/us/en/retail-consumer/publications/assets/pwc-retailing-2020.pdf\">one in every three customers</a> tends to leave their favorite brand after a bad experience, while 92% completely abandons a brand after two or three negative interactions.</li>\n<li><a href=\"https://www.socpub.com/articles/the-5-mobile-marketing-mistakes-infographic-14849\">57% of customers</a> do not recommend a brand if they use a poorly designed website on the mobile view. <a href=\"https://www.business2community.com/marketing/38-mobile-marketing-statistics-you-need-to-know-02185085\">50% will stop accessing</a> a site if it is not mobile-friendly.</li>\n<li>70% of consumers expect an omnichannel customer experience across all channels, but only 29% of brands are successful in delivering it.</li>\n</ul>\n<h3 id=\"the-growing-popularity-of-omnichannel-customer-experience\" style=\"position:relative;\"><a href=\"#the-growing-popularity-of-omnichannel-customer-experience\" aria-label=\"the growing popularity of omnichannel customer experience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The Growing Popularity of Omnichannel Customer Experience</h3>\n<p>The omnichannel approach to the customer experience is here to stay. And with the growing popularity, it is all set to emerge as a game-changer. </p>\n<p>While the obvious benefit includes producing a consistent customer experience across all channels, omnichannel offers other benefits too.</p>\n<ul>\n<li>It gives customers the independence to manage their own experiences. </li>\n<li>It contributes to automated processes and happier customers.</li>\n<li>It helps reduce back-office complexities due to a simpler customer journey. </li>\n<li>It offers a continuous scope of relevance, reliability, and system refinement. </li>\n<li>It aligns processes and strategies to fulfill customer expectations and generate more leads.</li>\n<li>It allows brands to interact with customers in real-time.</li>\n<li>It enhances <a href=\"https://www.loginradius.com/blog/2018/11/improving-customer-experience-in-the-retail-e-commerce-industry/\">shopping experiences by redefining</a> personalized customer engagements as we know it.</li>\n</ul>\n<p><img src=\"/38d72303810a7e8b1bc5c01d86b01c2f/omnichallel-2.webp\" alt=\"Stats of businesses investing in customer experience\"></p>\n<h2 id=\"the-role-of-loginradius-in-building-an-omnichannel-customer-experience\" style=\"position:relative;\"><a href=\"#the-role-of-loginradius-in-building-an-omnichannel-customer-experience\" aria-label=\"the role of loginradius in building an omnichannel customer experience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The Role of LoginRadius in Building an Omnichannel Customer Experience</h2>\n<p>With LoginRadius' cloud-based <a href=\"https://www.loginradius.com/blog/2019/06/customer-identity-and-access-management/\">customer identity and access management</a> solution, businesses can meet the need of modern customers in a way that is highly scalable, fast, and flexible. </p>\n<p>Along with robust data security, it offers the following capabilities for delivering omnichannel customer experiences to its clients.</p>\n<ul>\n<li><strong>Data management:</strong> The identity platform helps you understand who your customers are. It will offer an overview of your customers' data landscape by breaking down silos and making data available across all channels of service delivery. </li>\n<li><strong>Single admin panel:</strong> After you are done with mapping your data landscape, it will offer a single dashboard view for your customer data. You can unite all your channels into one seamless admin panel.</li>\n<li><strong>More focus on the customer, less on the channel:</strong> The <a href=\"https://www.loginradius.com/blog/2019/10/digital-identity-management/\">identity platform makes it almost</a> irrelevant about how your customers choose to interact with you. You can view your customer activities from a single panel rather than witnessing it as a series of isolated remarks.</li>\n</ul>\n<p>To learn more about the omnichannel customer experience, here is an infographic created by LoginRadius that describes the customer experience journey in an omnichannel world.</p>\n<p><img src=\"/a1fa9d2bb20e3866abadb717bdf49bcc/Making-Customers-Feel-Seen-in-an-Omnichannel-World-1-scaled.webp\" alt=\"Omnichannel customer experience infographic\"></p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>Building an omnichannel customer experience does not necessarily mean having to invest in new-age digital technologies. It rather means channelizing your <a href=\"https://www.loginradius.com/blog/identity/identity-as-a-service-for-business/\">customers in a centralized environment</a>. The LoginRadius identity solution supports automated pathways, doubles customer experiences, and humanizes interactions with every customer</p>\n<p><a href=\"https://www.loginradius.com/contact-us?utm_source=blog&#x26;utm_medium=web&#x26;utm_campaign=omnichannel-customer-experience\"><img src=\"/8fce571f703a5970dbb1359a2fe0e51a/book-a-demo-loginradius.webp\" alt=\"book-free-demo-loginradius\"></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"April 01, 2020","updated_date":null,"description":"A multifold approach to advertising, selling, and helping consumers through various marketing touchpoints is an omnichannel consumer experience. To learn more, check out the infographic.","title":"Deliver Exceptional Omnichannel Customer Experience [Infographic]","tags":["omnichannel cx","ciam solution","convenience"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/5df03f5849554985ac08025f1138656f/7f8e9/omnichannel-experience.webp","srcSet":"/static/5df03f5849554985ac08025f1138656f/61e93/omnichannel-experience.webp 200w,\n/static/5df03f5849554985ac08025f1138656f/1f5c5/omnichannel-experience.webp 400w,\n/static/5df03f5849554985ac08025f1138656f/7f8e9/omnichannel-experience.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"LoginRadius is happy to announce that we have a new logo now.  Yes! We loved the old one, but we decided to upgrade it as part of our ever…","fields":{"slug":"/identity/announcing-new-look-of-loginradius/"},"html":"<p>LoginRadius is happy to announce that we have a new logo now. </p>\n<p>Yes! We loved the old one, but we decided to upgrade it as part of our ever-evolving branding metrics. After all, progress is impossible without change. </p>\n<p>So, here’s our new look.</p>\n<p><img src=\"/4d9e15e17d42c355ead62634f20c5608/loginradius-logo-horizontal-full-colour-on-white-1024x211.webp\" alt=\"LoginRadius Logo\"></p>\n<p>As a leader in cloud-based Customer Identity and Access Management (CIAM) solution that the following two core principles are reflected in the branding:</p>\n<p><strong>Putting users at the center</strong></p>\n<p>Our platform is all about consumer-brand relationships and to strengthen the relationship we believe we need to put the consumer at the center. So, everything we design and develop, we keep the very end-users i.e. your consumers at the centre. </p>\n<p>Our first priority is to benefit them -- giving them peace of mind by protecting their data, account and privacy; and offering them a delightful experience.</p>\n<p><strong>Security is the foundation of our business</strong></p>\n<p>Security is not a feature but the foundation of our business. Protecting consumers’ data, account and privacy is the most important function of our business and platform. We and our customers never compromise on security. Period.</p>\n<h2 id=\"intend-behind-the-change\" style=\"position:relative;\"><a href=\"#intend-behind-the-change\" aria-label=\"intend behind the change permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Intend Behind The Change</h2>\n<p>Over the years, LoginRadius has exponentially grown from a simple social login provider to an industry-leading customer identity and access management (CIAM) platform. </p>\n<p>Therefore, it is important that we align our designing goals to reflect how we serve our customers, what our milestones are and most importantly, symbolize our future on what more do we intend to achieve.</p>\n<p>Keeping designing and user experience at the core of innovation, our creative thinkers came up with a logo that is crisp, smart, minimalistic and feels connected.</p>\n<p>Needless to say, they got exactly what we intended to project out to the world – user-centric CIAM platform with a strong security foundation.</p>\n<h2 id=\"what-has-changed\" style=\"position:relative;\"><a href=\"#what-has-changed\" aria-label=\"what has changed permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What Has Changed?</h2>\n<p>First, we would like to take a moment to highlight the retirement of our current logo. After all, it had been serving the spirit of LoginRadius since our inception. </p>\n<p>Fast-forward to the present day, the new logo marks a crucial milestone towards representing our brand-building process.</p>\n<p><img src=\"/16753b4de5d78741baf37b75afe3b390/logo-1024x991.webp\" alt=\"LoginRadius Brandmark\"></p>\n<ul>\n<li><strong>Brandmark</strong>:  It comprises two concentric circles. Most obvious is the negative space showing a keyhole which is also a literal radius from the centre to the outer edge. The keyhole represents robust security foundation of our platform. It can also be seen as a user icon, protected by white arms implied by the negative space and by the light blue circle. This demonstrates our philosophy of putting the user at the centre of everything. Both of these ideas speak to the concept of protecting identity.</li>\n<li><strong>Typeface:</strong> Our creative team made a unanimous decision to create a modern typeface that embodies our vision and is strong enough to sustain on its own. Therefore, we thickened the font with solid letters to give more presence to the brand. </li>\n<li><strong>Color</strong>: Colors are an important aspect of our brand personality. Our core colour palette consists of two primary colours viz. tarren blue and cosmic blue. They help to reinforce feelings of safety and confidence towards customer identity.</li>\n</ul>\n<p>Letting go of our core designing heritage was never our objective. Our color palette is the testimony of what we have been for our customers and promotes authenticity in every form.</p>\n<h2 id=\"logo-color-combinations\" style=\"position:relative;\"><a href=\"#logo-color-combinations\" aria-label=\"logo color combinations permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Logo Color Combinations</h2>\n<p><img src=\"/45425ade83137235c58f51ddcfe288d9/logo-2-1024x589.webp\"></p>\n<h2 id=\"a-final-word\" style=\"position:relative;\"><a href=\"#a-final-word\" aria-label=\"a final word permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Final Word</h2>\n<p>The new logo is an attempt at modernizing our brand and helping it connect more with our customers. </p>\n<p>Amidst the huge chunk of workload that rebranding brings along, we are super thrilled to share this news and would like to take a moment to thank our loyal customer base. Do share your comments about the change.</p>\n<p><a href=\"https://www.loginradius.com/contact-us?utm_source=blog&#x26;utm_medium=web&#x26;utm_campaign=announcing-new-look-of-loginradius\"><img src=\"/d98399eb71bd29d9efc50cedf469c114/CTA-Graphics-for-Blogs-V03.01-05-2-1024x310.webp\"></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"March 25, 2020","updated_date":null,"description":"LoginRadius is delighted to announce that we now have a new logo.","title":"Announcing New Look of LoginRadius","tags":["LoginRadius","industry-news"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/b196244089e513074aca00b6736f8973/c0524/Announcing-New-Look-of-LoginRadius.webp","srcSet":"/static/b196244089e513074aca00b6736f8973/61e93/Announcing-New-Look-of-LoginRadius.webp 200w,\n/static/b196244089e513074aca00b6736f8973/1f5c5/Announcing-New-Look-of-LoginRadius.webp 400w,\n/static/b196244089e513074aca00b6736f8973/c0524/Announcing-New-Look-of-LoginRadius.webp 769w","sizes":"(max-width: 769px) 100vw, 769px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"In this blog, we’ll be implementing OAuth by Github in a Node.js Application Before You Get Started This tutorial assumes you have: Basic…","fields":{"slug":"/engineering/oauth-implemenation-using-node/"},"html":"<p>In this blog, we’ll be implementing OAuth by Github in a Node.js Application</p>\n<h2 id=\"before-you-get-started\" style=\"position:relative;\"><a href=\"#before-you-get-started\" aria-label=\"before you get started permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Before You Get Started</h2>\n<p>This tutorial assumes you have:</p>\n<ul>\n<li>Basic knowledge of HTML/CSS</li>\n<li>Basic understanding of OAuth</li>\n<li>A good understanding of JavaScript and Node.js</li>\n<li>Latest Node.js version installed on your system</li>\n</ul>\n<h3 id=\"step-1-register-a-github-oauth-app\" style=\"position:relative;\"><a href=\"#step-1-register-a-github-oauth-app\" aria-label=\"step 1 register a github oauth app permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 1: Register a Github OAuth App</h3>\n<p>To implement Github Auth we need to register a new application in <a href=\"https://github.com/settings/applications/new\">Github OAuth Apps</a>.</p>\n<p>Once you start the process you will get a form like this.</p>\n<p><img src=\"/70fc6824dc4df23803ee7172457b4ce8/git_new_app.webp\" alt=\"Github App\" title=\"Github App\"></p>\n<p>You need to fill all the required details and put the Authorization callback URL as <code>http://localhost:2400/github/callback</code> (This will be the URL on which Github will send the authorization code once authorization is finished)</p>\n<p>Once you register the application you will get the App's Client Id and Secret which we will use in our code.</p>\n<p><img src=\"/a3d3f92a563b5f7c94fed2e39892c54f/github_cred.webp\" alt=\"Github App\" title=\"Github App\"></p>\n<h3 id=\"step-2-initialize-a-nodejs-project-with-all-the-dependencies\" style=\"position:relative;\"><a href=\"#step-2-initialize-a-nodejs-project-with-all-the-dependencies\" aria-label=\"step 2 initialize a nodejs project with all the dependencies permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 2: Initialize a node.js project with all the dependencies</h3>\n<p>First in an empty folder run the below command</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm init</span></code></pre>\n<p>It essentially just creates the package.json file with all the basic information you will provide. after that, we will install all the dependencies needed in our project </p>\n<ul>\n<li><strong>express:</strong>  Node.js framework to create a server and accept requests</li>\n<li><strong>ejs:</strong>  To render HTML pages for login and profile</li>\n<li><strong>axios:</strong>  Use the Axios library, to make HTTP requests</li>\n</ul>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm install express ejs axios --save</span></code></pre>\n<h3 id=\"step-3-writing-express-server-code-to-accept-web-requests\" style=\"position:relative;\"><a href=\"#step-3-writing-express-server-code-to-accept-web-requests\" aria-label=\"step 3 writing express server code to accept web requests permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 3: Writing express server code to accept web requests</h3>\n<p>Create a file <strong>index.js</strong> in the root folder of your app and add the following code: </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// index.js</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">/*  EXPRESS */</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">express</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;express&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">app</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">express</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">set</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;view engine&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;ejs&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">access_token</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&quot;&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">get</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">render</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;pages/index&#39;</span><span class=\"mtk1\">,{</span><span class=\"mtk12\">client_id:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">clientID</span><span class=\"mtk1\">});</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">});</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">port</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">process</span><span class=\"mtk1\">.</span><span class=\"mtk12\">env</span><span class=\"mtk1\">.</span><span class=\"mtk12\">PORT</span><span class=\"mtk1\"> || </span><span class=\"mtk7\">2400</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">listen</span><span class=\"mtk1\">(</span><span class=\"mtk12\">port</span><span class=\"mtk1\"> , () </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;App listening on port &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">port</span><span class=\"mtk1\">));</span></span></code></pre>\n<p>Our web server has been set up, now we will add the code related to sending the OAuth request to GitHub using Axios package, at the bottom of the <strong>index.js</strong> file:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// index.js</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Import the axios library, to make HTTP requests</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">axios</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;axios&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// This is the client ID and client secret that you obtained</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// while registering on github app</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">clientID</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;xxxxxxxxxxxx&#39;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">clientSecret</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&#39;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Declare the callback route</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">get</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/github/callback&#39;</span><span class=\"mtk1\">, (</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// The req.query object has the query params that were sent to this route.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">requestToken</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">query</span><span class=\"mtk1\">.</span><span class=\"mtk12\">code</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">axios</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">method:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;post&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">url:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">`https://github.com/login/oauth/access_token?client_id=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">clientID</span><span class=\"mtk4\">}</span><span class=\"mtk8\">&client_secret=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">clientSecret</span><span class=\"mtk4\">}</span><span class=\"mtk8\">&code=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">requestToken</span><span class=\"mtk4\">}</span><span class=\"mtk8\">`</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// Set the content type header, so that we get the response in JSON</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">headers:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">         </span><span class=\"mtk12\">accept:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;application/json&#39;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }).</span><span class=\"mtk11\">then</span><span class=\"mtk1\">((</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">access_token</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">data</span><span class=\"mtk1\">.</span><span class=\"mtk12\">access_token</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">redirect</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/success&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">get</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/success&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">axios</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">method:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;get&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">url:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">`https://api.github.com/user`</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">headers:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">Authorization:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;token &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">access_token</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }).</span><span class=\"mtk11\">then</span><span class=\"mtk1\">((</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">render</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;pages/success&#39;</span><span class=\"mtk1\">,{ </span><span class=\"mtk12\">userData:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">data</span><span class=\"mtk1\"> });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">});</span></span></code></pre>\n<p><strong>Note:</strong> The callback URL should be the same as used in the GitHub app configuration.</p>\n<h3 id=\"step-4-creating-a-login-and-profile-page\" style=\"position:relative;\"><a href=\"#step-4-creating-a-login-and-profile-page\" aria-label=\"step 4 creating a login and profile page permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 4: Creating a Login and Profile page</h3>\n<p>Create an ejs file under path <strong>views/pages/index.js</strong>, it will render into a nice looking Github authorization page:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">views</span><span class=\"mtk1\">/</span><span class=\"mtk12\">index</span><span class=\"mtk1\">.</span><span class=\"mtk12\">ejs</span><span class=\"mtk1\"> --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!</span><span class=\"mtk12\">doctype</span><span class=\"mtk1\"> </span><span class=\"mtk12\">html</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Github OAuth</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">link</span><span class=\"mtk1\"> </span><span class=\"mtk12\">rel</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;stylesheet&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> &lt;!-- load bulma css --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">link</span><span class=\"mtk1\"> </span><span class=\"mtk12\">rel</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;stylesheet&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> &lt;!-- load fontawesome --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">style</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        body        </span><span class=\"mtk4\">{</span><span class=\"mtk1\"> </span><span class=\"mtk12\">padding</span><span class=\"mtk1\">-</span><span class=\"mtk12\">top</span><span class=\"mtk1\">:70</span><span class=\"mtk12\">px</span><span class=\"mtk1\">; </span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">style</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;container&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;jumbotron text-center text-primary&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;&lt;</span><span class=\"mtk4\">span</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;fa fa-github&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">span</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> Github OAuth</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Authorize your app with:</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">a</span><span class=\"mtk1\"> </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;https://github.com/login/oauth/authorize?client_id=&lt;%= client_id %&gt;&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;btn btn-danger&quot;</span><span class=\"mtk17\">&gt;&lt;</span><span class=\"mtk4\">span</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;fa fa-github&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">span</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> Github Login</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">a</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> </span></span></code></pre>\n<p>After it we will create an ejs file under path <strong>views/pages/success.js</strong>, it will be used to show the user's GitHub information we will get after authorized by Github</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">views</span><span class=\"mtk1\">/</span><span class=\"mtk12\">success</span><span class=\"mtk1\">.</span><span class=\"mtk12\">ejs</span><span class=\"mtk1\"> --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!</span><span class=\"mtk12\">doctype</span><span class=\"mtk1\"> </span><span class=\"mtk12\">html</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Github OAuth</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">link</span><span class=\"mtk1\"> </span><span class=\"mtk12\">rel</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;stylesheet&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> &lt;!-- load bulma css --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">link</span><span class=\"mtk1\"> </span><span class=\"mtk12\">rel</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;stylesheet&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> &lt;!-- load fontawesome --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">style</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          body        </span><span class=\"mtk4\">{</span><span class=\"mtk1\"> </span><span class=\"mtk12\">padding</span><span class=\"mtk1\">-</span><span class=\"mtk12\">top</span><span class=\"mtk1\">:70</span><span class=\"mtk12\">px</span><span class=\"mtk1\">; </span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">style</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;container&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;jumbotron&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">h1</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;text-primary  text-center&quot;</span><span class=\"mtk17\">&gt;&lt;</span><span class=\"mtk4\">span</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;fa fa-github&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">span</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> Github Information</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;row&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;col-sm-6&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">              </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;well&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Name</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">: &lt;%= userData.name %&gt;</span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">br</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Username</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">: &lt;%= userData.login %&gt;</span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">br</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Company</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">: &lt;%= userData.company %&gt;</span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">br</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Bio</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">strong</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">: &lt;%= userData.bio %&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">              </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p><strong>Note:</strong> Here we are also using bootstrap and font-awesome css to make our web pages look good. </p>\n<p>We have finished building our OAuth authorization page, let's run the application by below command</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">node index.js</span></code></pre>\n<p>Once our server is running, we can see our social login page on <code>http://localhost:2400/</code></p>\n<p><img src=\"/30a8f53340a88b24e123fbc8abf19fa9/github_login.webp\" alt=\"Social Authentication Page\" title=\"Social Authentication Page\"></p>\n<p>We need to click on the <strong>Github Login button</strong>, which will redirect us to google login page.</p>\n<p><img src=\"/c83c21014895d39200b6fdc8550b465e/github_auth.webp\" alt=\"GIthub Login\" title=\"GIthub Login\"></p>\n<p>After login with our GitHub credentials, it will redirect back to our application and on the success page, we can see the details of users' GitHub profile and can save this detail in a database for future use also.</p>\n<p><img src=\"/0760ff4728fcbbe849cd12b027a7ab49/github_profile.webp\" alt=\"GIthub Profile Info\" title=\"Github Profile Info\"></p>\n<p>You can implement the OAuth in Node.js by the above process, You can found the complete code used in this tutorial on out</p>\n<p><a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/NodeJs/\"> Github Repo </a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk17 { color: #808080; }\n</style>","frontmatter":{"date":"March 22, 2020","updated_date":null,"description":null,"title":"OAuth implementation with Node.js and Github","tags":["Oauth","NodeJs"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.9047619047619047,"src":"/static/bb5df84ab7808c0a554f33a2c8cb76c0/58556/oauth.webp","srcSet":"/static/bb5df84ab7808c0a554f33a2c8cb76c0/61e93/oauth.webp 200w,\n/static/bb5df84ab7808c0a554f33a2c8cb76c0/1f5c5/oauth.webp 400w,\n/static/bb5df84ab7808c0a554f33a2c8cb76c0/58556/oauth.webp 800w,\n/static/bb5df84ab7808c0a554f33a2c8cb76c0/99238/oauth.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Puneet Singh","github":"puneetsingh24","avatar":null}}}},{"node":{"excerpt":"In this blog, we’ll be implementing authentication with JWT  in a NodeJS web application. For this, we’ll be using jsonwebtoken package…","fields":{"slug":"/engineering/nodejs-and-mongodb-application-authentication-by-jwt/"},"html":"<p>In this blog, we’ll be implementing authentication with JWT  in a NodeJS web application. For this, we’ll be using <strong>jsonwebtoken</strong> package </p>\n<h2 id=\"what-is-jwt\" style=\"position:relative;\"><a href=\"#what-is-jwt\" aria-label=\"what is jwt permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>What is JWT?</strong></h2>\n<p>JWT(JSON Web Token) is a token format. It is digitally-signed, self-contained, and compact. It provides a convenient mechanism for transferring data. JWT is not inherently secure, but the use of JWT can ensure the authenticity of the message so long as the signature is verified and the integrity of the payload can be guaranteed. JWT is often used for stateless authentication in simple use cases involving non-complex systems.</p>\n<p>Here's an example of JWT:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9sYXR1bmRlZ2FydWJhQGdtYWlsLmNvbSIsIm</span></code></pre>\n<p>Now, let's authenticate/protect some routes.</p>\n<p>Pre-requisites: </p>\n<ul>\n<li>Basic knowledge of HTML/JavaScript</li>\n<li>NodeJS should be installed in your system.</li>\n<li>express module for creating the server.</li>\n<li>mongoose module for MongoDB connection and queries.</li>\n<li>bcrypt module for hashing.</li>\n</ul>\n<p>you can install all required packages by using following command:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm install express mongoose bcrypt  --save</span></code></pre>\n<p>Step 1. First, create a directory structure as below :</p>\n<p><code>JWTApp</code></strong></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">-api</span>\n<span class=\"grvsc-line\">--models</span>\n<span class=\"grvsc-line\">----userModel.js</span>\n<span class=\"grvsc-line\">--controllers</span>\n<span class=\"grvsc-line\">----userController.js</span>\n<span class=\"grvsc-line\">--route</span>\n<span class=\"grvsc-line\">----userRoute.js</span>\n<span class=\"grvsc-line\">--server.js</span></code></pre>\n<h4 id=\"step-2-install-jsonwebtoken-packageby-using-following-command\" style=\"position:relative;\"><a href=\"#step-2-install-jsonwebtoken-packageby-using-following-command\" aria-label=\"step 2 install jsonwebtoken packageby using following command permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 2. Install “<strong>jsonwebtoken</strong>” packageby using following command</h4>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"> npm install jsonwebtoken -- save</span></code></pre>\n<h4 id=\"step-3-create-the-user-model\" style=\"position:relative;\"><a href=\"#step-3-create-the-user-model\" aria-label=\"step 3 create the user model permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Step 3. Create the user model</strong></h4>\n<p>In the api/models folder, create a file called user userModel.js by running touch api/models/userModel.js.</p>\n<p>In this file, create a mongoose schema with the following properties:</p>\n<ul>\n<li>fullName</li>\n<li>email address</li>\n<li>password</li>\n<li>the created date</li>\n</ul>\n<p>Add the following code</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk8\">&#39;use strict&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">mongoose</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;mongoose&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">bcrypt</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;bcrypt&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">Schema</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">mongoose</span><span class=\"mtk1\">.</span><span class=\"mtk12\">Schema</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">/**</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\"> * User Schema</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\"> */</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">UserSchema</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Schema</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">fullName:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">type:</span><span class=\"mtk1\"> </span><span class=\"mtk10\">String</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">trim:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">required:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">email:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">type:</span><span class=\"mtk1\"> </span><span class=\"mtk10\">String</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">unique:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">lowercase:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">trim:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">required:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">hash_password:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">type:</span><span class=\"mtk1\"> </span><span class=\"mtk10\">String</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">created:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">type:</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Date</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">default:</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Date</span><span class=\"mtk1\">.</span><span class=\"mtk12\">now</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">});</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">UserSchema</span><span class=\"mtk1\">.</span><span class=\"mtk12\">methods</span><span class=\"mtk1\">.</span><span class=\"mtk11\">comparePassword</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">password</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">bcrypt</span><span class=\"mtk1\">.</span><span class=\"mtk11\">compareSync</span><span class=\"mtk1\">(</span><span class=\"mtk12\">password</span><span class=\"mtk1\">, </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">hash_password</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">mongoose</span><span class=\"mtk1\">.</span><span class=\"mtk11\">model</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;User&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">UserSchema</span><span class=\"mtk1\">);</span></span></code></pre>\n<h4 id=\"step-4-create-the-user-handlers\" style=\"position:relative;\"><a href=\"#step-4-create-the-user-handlers\" aria-label=\"step 4 create the user handlers permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Step 4. Create the user handlers</strong></h4>\n<p>In the <strong>api/controllers</strong> folder, create a file called user userController.js by running touch api/controllers/userController.js</p>\n<p>In the userController file, create three different handlers to handle by using the following code</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk8\">&#39;use strict&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">mongoose</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;mongoose&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">jwt</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;jsonwebtoken&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">bcrypt</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;bcrypt&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">User</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">mongoose</span><span class=\"mtk1\">.</span><span class=\"mtk11\">model</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;User&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">exports</span><span class=\"mtk1\">.</span><span class=\"mtk11\">register</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">newUser</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">User</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">body</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">newUser</span><span class=\"mtk1\">.</span><span class=\"mtk12\">hash_password</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">bcrypt</span><span class=\"mtk1\">.</span><span class=\"mtk11\">hashSync</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">body</span><span class=\"mtk1\">.</span><span class=\"mtk12\">password</span><span class=\"mtk1\">, </span><span class=\"mtk7\">10</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">newUser</span><span class=\"mtk1\">.</span><span class=\"mtk11\">save</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">err</span><span class=\"mtk1\">, </span><span class=\"mtk12\">user</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">err</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">status</span><span class=\"mtk1\">(</span><span class=\"mtk7\">400</span><span class=\"mtk1\">).</span><span class=\"mtk11\">send</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">message:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">err</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">user</span><span class=\"mtk1\">.</span><span class=\"mtk12\">hash_password</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">undefined</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">json</span><span class=\"mtk1\">(</span><span class=\"mtk12\">user</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">exports</span><span class=\"mtk1\">.</span><span class=\"mtk11\">sign_in</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">User</span><span class=\"mtk1\">.</span><span class=\"mtk11\">findOne</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">email:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">body</span><span class=\"mtk1\">.</span><span class=\"mtk12\">email</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">err</span><span class=\"mtk1\">, </span><span class=\"mtk12\">user</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">err</span><span class=\"mtk1\">) </span><span class=\"mtk15\">throw</span><span class=\"mtk1\"> </span><span class=\"mtk12\">err</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> || !</span><span class=\"mtk12\">user</span><span class=\"mtk1\">.</span><span class=\"mtk11\">comparePassword</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">body</span><span class=\"mtk1\">.</span><span class=\"mtk12\">password</span><span class=\"mtk1\">)) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">status</span><span class=\"mtk1\">(</span><span class=\"mtk7\">401</span><span class=\"mtk1\">).</span><span class=\"mtk11\">json</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">message:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;Authentication failed. Invalid user or password.&#39;</span><span class=\"mtk1\"> });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">json</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">token:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">jwt</span><span class=\"mtk1\">.</span><span class=\"mtk11\">sign</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">email:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">user</span><span class=\"mtk1\">.</span><span class=\"mtk12\">email</span><span class=\"mtk1\">, </span><span class=\"mtk12\">fullName:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">user</span><span class=\"mtk1\">.</span><span class=\"mtk12\">fullName</span><span class=\"mtk1\">, </span><span class=\"mtk12\">_id:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">user</span><span class=\"mtk1\">.</span><span class=\"mtk12\">_id</span><span class=\"mtk1\"> }, </span><span class=\"mtk8\">&#39;RESTFULAPIs&#39;</span><span class=\"mtk1\">) });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">exports</span><span class=\"mtk1\">.</span><span class=\"mtk11\">loginRequired</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">, </span><span class=\"mtk12\">next</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">next</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">status</span><span class=\"mtk1\">(</span><span class=\"mtk7\">401</span><span class=\"mtk1\">).</span><span class=\"mtk11\">json</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">message:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;Unauthorized user!!&#39;</span><span class=\"mtk1\"> });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">exports</span><span class=\"mtk1\">.</span><span class=\"mtk11\">profile</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">, </span><span class=\"mtk12\">next</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">send</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">next</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  } </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">   </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">status</span><span class=\"mtk1\">(</span><span class=\"mtk7\">401</span><span class=\"mtk1\">).</span><span class=\"mtk11\">json</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">message:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;Invalid token&#39;</span><span class=\"mtk1\"> });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span></code></pre>\n<p><strong><em>Note:</em> A hash password was saved in the database using bcrypt.</strong></p>\n<p>Step 6. In the <strong>api/route</strong> folder, create a file called user userRoute.js and add the following code:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk8\">&#39;use strict&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">module</span><span class=\"mtk1\">.</span><span class=\"mtk10\">exports</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">app</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">userHandlers</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;../controllers/userController.js&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// todoList Routes</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">route</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/tasks&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        .</span><span class=\"mtk11\">post</span><span class=\"mtk1\">(</span><span class=\"mtk12\">userHandlers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">loginRequired</span><span class=\"mtk1\">, </span><span class=\"mtk12\">userHandlers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">profile</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">route</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/auth/register&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        .</span><span class=\"mtk11\">post</span><span class=\"mtk1\">(</span><span class=\"mtk12\">userHandlers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">register</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">   </span><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">route</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/auth/sign_in&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        .</span><span class=\"mtk11\">post</span><span class=\"mtk1\">(</span><span class=\"mtk12\">userHandlers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">sign_in</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span></code></pre>\n<h4 id=\"step-7-add-the-following-code-in-serverjs\" style=\"position:relative;\"><a href=\"#step-7-add-the-following-code-in-serverjs\" aria-label=\"step 7 add the following code in serverjs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Step 7. Add the following code in server.js</strong></h4>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk8\">&#39;use strict&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">express</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;express&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">app</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">express</span><span class=\"mtk1\">(),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">port</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">process</span><span class=\"mtk1\">.</span><span class=\"mtk12\">env</span><span class=\"mtk1\">.</span><span class=\"mtk12\">PORT</span><span class=\"mtk1\"> || </span><span class=\"mtk7\">3000</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">User</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;./api/models/userModel&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">bodyParser</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;body-parser&#39;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">jsonwebtoken</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;jsonwebtoken&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">mongoose</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;mongoose&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">option</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">socketTimeoutMS:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">30000</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">keepAlive:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">reconnectTries:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">30000</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">mongoURI</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">process</span><span class=\"mtk1\">.</span><span class=\"mtk12\">env</span><span class=\"mtk1\">.</span><span class=\"mtk12\">MONGODB_URI</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">mongoose</span><span class=\"mtk1\">.</span><span class=\"mtk11\">connect</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">option</span><span class=\"mtk1\">).</span><span class=\"mtk11\">then</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(){</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">//connected successfully</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">err</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">//err handle</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">});</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">use</span><span class=\"mtk1\">(</span><span class=\"mtk12\">bodyParser</span><span class=\"mtk1\">.</span><span class=\"mtk11\">urlencoded</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">extended:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\"> }));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">use</span><span class=\"mtk1\">(</span><span class=\"mtk12\">bodyParser</span><span class=\"mtk1\">.</span><span class=\"mtk11\">json</span><span class=\"mtk1\">());</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">use</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">, </span><span class=\"mtk12\">next</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">headers</span><span class=\"mtk1\"> && </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">headers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">authorization</span><span class=\"mtk1\"> && </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">headers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">authorization</span><span class=\"mtk1\">.</span><span class=\"mtk11\">split</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39; &#39;</span><span class=\"mtk1\">)[</span><span class=\"mtk7\">0</span><span class=\"mtk1\">] === </span><span class=\"mtk8\">&#39;JWT&#39;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">jsonwebtoken</span><span class=\"mtk1\">.</span><span class=\"mtk11\">verify</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">headers</span><span class=\"mtk1\">.</span><span class=\"mtk12\">authorization</span><span class=\"mtk1\">.</span><span class=\"mtk11\">split</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39; &#39;</span><span class=\"mtk1\">)[</span><span class=\"mtk7\">1</span><span class=\"mtk1\">], </span><span class=\"mtk8\">&#39;RESTFULAPIs&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">err</span><span class=\"mtk1\">, </span><span class=\"mtk12\">decode</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">err</span><span class=\"mtk1\">) </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">undefined</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">decode</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk11\">next</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">undefined</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">next</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">});</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">routes</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;./api/routes/userRoutes&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">routes</span><span class=\"mtk1\">(</span><span class=\"mtk12\">app</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">use</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">status</span><span class=\"mtk1\">(</span><span class=\"mtk7\">404</span><span class=\"mtk1\">).</span><span class=\"mtk11\">send</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">url:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">originalUrl</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&#39; not found&#39;</span><span class=\"mtk1\"> })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">});</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk11\">listen</span><span class=\"mtk1\">(</span><span class=\"mtk12\">port</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39; RESTful API server started on: &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">port</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">module</span><span class=\"mtk1\">.</span><span class=\"mtk10\">exports</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">app</span><span class=\"mtk1\">;</span></span></code></pre>\n<p>Step 9. Now you just need to run the project by using the following command and try logging by using the JWT.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm start</span></code></pre>\n<p>Step 10. Open Postman and create a post request to <strong>localhost:3000/auth/register</strong> as below: </p>\n<p><img src=\"/a6eec58240d18cb17146ca11b5d49dcd/register.webp\" alt=\"Postman register\"></p>\n<p>Step 11. After this, let’s sign with this URL <strong>localhost:3000/auth/sign_in</strong> . Enter the keys and values for email and password </p>\n<p><img src=\"/5cb1b965f14b8f3b4d254d7d310c789d/signIn.webp\" alt=\"Postman signin\"></p>\n<p>Under the value, add JWT and the token with a space between, like so:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9sYXR1bmRlZ2FydWJhQGdtYWlsLmNvbSIsImZ1bGxOYW1lIjoiT2xhdHVuZGUgR2FydWJhIiwiX2lkIjoiNThmMjYzNDdiMTY1YzUxODM1NDMxYTNkIiwiaWF0IjoxNDkyMjgwMTk4fQ.VcMpybz08cB5PsrMSr25En4_EwCGWZVFgciO4M-3ENE</span></code></pre>\n<p>Step 11. Then, enter the parameters for the key and value for fetching the profile. You want to create as shown below and send:</p>\n<p><img src=\"/42b50f8f60ca459023e492ce1b802845/profile.webp\" alt=\"Postman signin\"></p>\n<p>As we have seen it is fairly easy to build a JWT authentication system with NodeJS, You can found the complete code used in this tutorial <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/NodeJs/JwtAuthentication\">here</a>. </p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n</style>","frontmatter":{"date":"March 20, 2020","updated_date":null,"description":null,"title":"NodeJS and MongoDB application authentication by JWT","tags":["NodeJs","JWT","MongoDB","Authentication","JSON Web Token"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6666666666666667,"src":"/static/2b39d6f99b1ca5d4bc89d3bfccb6e29d/e9589/jwt.webp","srcSet":"/static/2b39d6f99b1ca5d4bc89d3bfccb6e29d/61e93/jwt.webp 200w,\n/static/2b39d6f99b1ca5d4bc89d3bfccb6e29d/1f5c5/jwt.webp 400w,\n/static/2b39d6f99b1ca5d4bc89d3bfccb6e29d/e9589/jwt.webp 500w","sizes":"(max-width: 500px) 100vw, 500px"}}},"author":{"id":"Ashish Sharma","github":"ashish8947","avatar":null}}}},{"node":{"excerpt":"COVID-19 is a global epidemic that demands decisive and robust action. Following the announcement by the World Health Organization (WHO) to…","fields":{"slug":"/identity/loginradius-business-continuity-covid-19-outbreak/"},"html":"<p><em>COVID-19 is a global epidemic that demands decisive and robust action.</em></p>\n<p>Following the announcement by the World Health Organization (WHO) to address the <a href=\"https://www.who.int/emergencies/diseases/novel-coronavirus-2019/events-as-they-happen\">coronavirus (COVID-19) threat as a pandemic</a>, organizations across the globe are looking to their Business Continuity Management (BCM) plan to make sure they are covered.</p>\n<p>For LoginRadius, as a SaaS-based customer identity platform,  planning ahead to counter any disruption has always been an essential aspect of its resilience program. </p>\n<p>Consequently, we have put our contingency plan to action to fight the current and future risks to our business, and our customers' businesses, due to the COVID-19 outbreak.</p>\n<h2 id=\"mitigating-risk-by-loginradius\" style=\"position:relative;\"><a href=\"#mitigating-risk-by-loginradius\" aria-label=\"mitigating risk by loginradius permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Mitigating Risk by LoginRadius</h2>\n<p>As the developing situation changes with respect to world health outlook, we have outlined three key areas to ensure our readiness towards workplace mitigation. They include:</p>\n<ul>\n<li>Employee health and safety</li>\n<li>Service operations</li>\n<li>Business operations</li>\n</ul>\n<p>Thereafter, we are prepared to react accordingly to ensure business continuity. Here’s what our plan looks like:</p>\n<p><strong>Employee Health and Safety</strong></p>\n<p>We are mindful of our employees and are up to date on the officially mandated actions related to hygiene and safety at our workstations. Likewise, we have rolled out the following policies:</p>\n<ul>\n<li>Hand-washing policy and education:  We have trained our staff on proper, effective hygiene practices for reducing the risk of contracting or spreading the virus. </li>\n<li>Travel restrictions, guidelines, and recommendations - We have limited all non-essential business travel and travel to designated high-risk regions. </li>\n<li>Remote Workforce - Phase 1: We have allowed optional, voluntary work from home. This measure is already in place. All staff in all locations have the autonomy and flexibility to work remotely to help mitigate the risk of exposure from public transit and closed communal spaces.</li>\n<li>Remote Workforce - Phase 2: We will impose mandatory work from home. If mandated by the government or regulatory bodies, or implemented by LoginRadius management, we are prepared for mandatory full-time remote work. We have already tested this measure and are to enact it as needed.</li>\n<li>We have installed multiple hand sanitizers within the office premises. </li>\n<li>We ensure frequent cleaning and sanitization of our workplaces. </li>\n<li>We have increased space between employees' workstations.</li>\n</ul>\n<p><strong>Service Operations</strong></p>\n<p>As an automated, fully cloud-based software solution redundantly hosted on industry-leading infrastructure providers like Amazon Web Services and Microsoft Azure, the LoginRadius platform is inherently insulated from the business and commercial impacts of the virus. </p>\n<p>This includes impacts from regional staffing and manpower shortages or disruptions in global supply chains.</p>\n<p>We have been working for several weeks with impromptu and scheduled drills to help ensure that operations run without disruption in the eventuality of an outbreak or other critical event which may impact our organization.</p>\n<p><strong>Business Operations</strong></p>\n<p>Similarly, we have rolled out remote working policies for all LoginRadius team members. Employees can work offsite as they would on-premises, guaranteeing no disruption to business operations, including our customer-facing sales, customer success, support, and account management teams.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>We place the highest value on the partnerships that we've established with our customers and stakeholders. Rest assured, we are committed to ensuring uninterrupted success, even in times of hardship and challenges.</p>\n<p>In the end, we wish our customers health, security, and good fortune.</p>\n<p><a href=\"https://www.loginradius.com/contact-us?utm_source=blog&#x26;utm_medium=web&#x26;utm_campaign=loginradius-business-continuity-covid-19-outbreak\"><img src=\"/d98399eb71bd29d9efc50cedf469c114/CTA-Graphics-for-Blogs-V03.01-05-3-1024x310.webp\"></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"March 17, 2020","updated_date":null,"description":"COVID-19 is a global epidemic which demands action that is decisive and robust.","title":"LoginRadius Announces Its Business Continuity Plan to Fight COVID-19 Outbreak","tags":["LoginRadius","industry-news"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/cbe783d369681847892f38c91f3084cf/c0524/loginradius-business-continuity.webp","srcSet":"/static/cbe783d369681847892f38c91f3084cf/61e93/loginradius-business-continuity.webp 200w,\n/static/cbe783d369681847892f38c91f3084cf/1f5c5/loginradius-business-continuity.webp 400w,\n/static/cbe783d369681847892f38c91f3084cf/c0524/loginradius-business-continuity.webp 769w","sizes":"(max-width: 769px) 100vw, 769px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"The hospitality industry has always been about luxury, pleasure, and excellent customer services. Modern guests travel for both business and…","fields":{"slug":"/growth/improve-customer-experience-hospitality-industry/"},"html":"<p>The hospitality industry has always been about luxury, pleasure, and excellent customer services. Modern guests travel for both business and pleasure. Therefore, they expect business owners to interact better and understand them well. </p>\n<p>They love it when hotel owners engage and empower them. They want to be delighted by personalized experiences, and when that happens, they are likely to come back for more stays. </p>\n<p>If your company isn’t doing it yet, you are already behind. Your competitors may have reinvented their <a href=\"https://www.loginradius.com/blog/2018/11/enterprise-needs-digital-business-transformation-strategy/\">digital transformation plan</a> and offering customer-centric hospitality experience with comfort features and better customer service. </p>\n<p>So, how do you catch up with the latest trends? Here are a few of the latest customer-centric innovations in the hospitality industry. </p>\n<h2 id=\"2020s-top-5-trends-in-the-hospitality-industry\" style=\"position:relative;\"><a href=\"#2020s-top-5-trends-in-the-hospitality-industry\" aria-label=\"2020s top 5 trends in the hospitality industry permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2020’s Top 5 Trends in the Hospitality Industry</h2>\n<h3 id=\"1-artificial-intelligence-will-eliminate-human-error\" style=\"position:relative;\"><a href=\"#1-artificial-intelligence-will-eliminate-human-error\" aria-label=\"1 artificial intelligence will eliminate human error permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. Artificial intelligence will eliminate human error.</h3>\n<p>AI has been a game-changer for the hospitality industry. One of the most popular reasons behind its popularity is its ability to work like humans (minus the error). </p>\n<p>Compared to the traditional setup, AI treats businesses with a host of advantages including:</p>\n<ul>\n<li>Eliminating human errors.</li>\n<li>Providing personalized services.</li>\n<li>Offering tailored recommendations.</li>\n<li>Automating techniques for customer advocacies. </li>\n<li>Assisting data analysis and data collection.</li>\n<li>Adapting to customer interactions.</li>\n</ul>\n<p>Moving on, let’s find out how deep is the impact of AI in the hospitality industry. Here are a few:</p>\n<ul>\n<li><strong>Brand monitoring</strong> - Travelers love to post reviews after their vacation. And speaking of reviews, negative comments have the potential to influence more people.<br>\nWith AI, hotel owners can keep a check on what messaging people are exchanging about their property, amenities, services, and stays.  </li>\n<li>\n<p><strong>Competitive analysis</strong> - When it comes to reviewing customer feedback, competitive analysis plays an important role. The advantages are three-fold. It helps hotel owners understand their guests, figure out their expectations, and what they liked or disliked about their stay.   </p>\n<p>AI can capture such information with 100% accuracy – something human eyes aren’t capable of analyzing. </p>\n</li>\n</ul>\n<p><strong>Frictionless authentication</strong> - Facial recognition is one of the most delightful <a href=\"https://www.hotelmanagement.net/tech/facial-recognition-tech-creates-service-security-options\">self-servicing technology</a> that delights guests in the hospitality industry. Everybody would love the opportunity to skip queues at the front desk while checking-in. Well, AI-infused facial recognition is your solution.</p>\n<h3 id=\"2-iot-will-offer-smart-customized-solutions\" style=\"position:relative;\"><a href=\"#2-iot-will-offer-smart-customized-solutions\" aria-label=\"2 iot will offer smart customized solutions permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. IoT will offer “smart” customized solutions</h3>\n<p>IoT solutions for hotels will add extra oomph to customer experience in 2020. </p>\n<p>At the core of the hospitality industry lies the ultimate guest experience. People love to feel special – a reason why the concept of customization went mainstream. Blending hospitality with IoT will do <a href=\"https://www.ezeeabsolute.com/blog/iot-in-hospitality-industry/\">wonders for hotel operators</a>.</p>\n<p><img src=\"/2692f9c758cb2756e33900cdb7cf13bb/image2-1.webp\" alt=\"IOT devices in hospitality sector\"></p>\n<p>Wondering how? Let’s find out.</p>\n<ul>\n<li>Businesses can save a lot on operational costs (human resources management, housekeeping, front desk).</li>\n<li>With more customer engagement, businesses can enjoy increased revenue generation. </li>\n<li>With progressive profiling, businesses can better understand the likes, dislikes, and preferences of their guests.</li>\n<li>There will be no more standing in long queues for check-in and check-out. </li>\n<li>For hotels that offer in-house navigation, it will be easier for guests to find all the amenities inside the property.</li>\n<li>Thanks to <a href=\"https://www.loginradius.com/progressive-profiling/\">progressive profiling</a>, hotels can understand their guests and offer them customized choices to order from. For example, they can customize their room temperature based on their guests’ sleep preferences or give them a personalized breakfast menu.</li>\n</ul>\n<p>What more?</p>\n<p>The hospitality industry can also automate room services. Hotels can ask guests to fill out their preferences through a centralized app and customize their stays accordingly. </p>\n<p>For example, they can install motion sensors to switch on the lights when they wake up with the coffee machine brewing their favorite cup of coffee. </p>\n<p>They can install sensors to detect occupancy and switch off lights automatically as the guests leave. </p>\n<p>They can install sensors to detect faulty appliances (like leaky taps, broken AC, heater, geyser, etc.) inside the hotel room and notify the maintenance team before check-in.</p>\n<h3 id=\"3-virtual-reality-vr-will-be-a-key-differentiator\" style=\"position:relative;\"><a href=\"#3-virtual-reality-vr-will-be-a-key-differentiator\" aria-label=\"3 virtual reality vr will be a key differentiator permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. Virtual Reality (VR) will be a key differentiator.</h3>\n<p>Another example of creating personalized experiences in the hospitality industry is virtual reality. VR offers the ability to transport a person from one space to another within the digital ecosystem. </p>\n<p>In the hotel business, VR can allow guests to enjoy a 360-degree view of the hotel and find out what their rooms will look like booking the property. </p>\n<p>On a different note, VR’s virtually simulated environment can be used as a source of entertainment too, by offering their guests a tour of the local attractions right from the hotel premises.</p>\n<h3 id=\"4-augmented-reality-ar-will-rule-the-hospitality-industry\" style=\"position:relative;\"><a href=\"#4-augmented-reality-ar-will-rule-the-hospitality-industry\" aria-label=\"4 augmented reality ar will rule the hospitality industry permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. Augmented Reality (AR) will rule the hospitality industry.</h3>\n<p>Augmented Reality, on the other hand, simulates real-world surroundings with digitally enhanced overlays. The concept is almost similar to VR, where the entire surrounding is changed.</p>\n<p>The hospitality industry can use it to its <a href=\"https://www.revfine.com/augmented-reality-hospitality-industry/\">advantage in a number of ways</a>. Imagine the walls of your room are infused with AR-powered technology. At the tap of a button, it can transform into any surrounding (beach, forest, cloud, city heights) you like and let you enjoy the experience without actually being physically present.</p>\n<p><img src=\"/82d4869c9d112be4e71e7159be790641/image3-1.webp\" alt=\"augmented reality (AR) in hospitality industry\"></p>\n<h3 id=\"5-digital-registration-forms-will-replace-the-use-of-pen-and-paper\" style=\"position:relative;\"><a href=\"#5-digital-registration-forms-will-replace-the-use-of-pen-and-paper\" aria-label=\"5 digital registration forms will replace the use of pen and paper permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5. Digital registration forms will replace the use of pen and paper</h3>\n<p>The hospitality and tourism industry is largely responsible for the emission of CO2 in the atmosphere. 2020 will be the year of sustainability. Hotel owners will limit the use of traditional forms by introducing digital check-in and check-out processes. </p>\n<p>Guests can use a check-in terminal or conduct advanced check-in through an app to make the process as seamless as possible. </p>\n<p>Also, hospitality companies witness a huge influx of data every day. In the quest to offer personalized services with unique experiences, they need to understand customer behavior.</p>\n<p><a href=\"https://www.business2community.com/cybersecurity/5-data-security-errors-that-can-break-your-business-02290681\">Data can make or break a business</a>. Some of the popular data metrics include name, length of stay, number of guests, property type (urban, suburban), geographics (region, country, city), reservation source (travel agent, corporate online site, direct call, meeting), number of repeat stays, etc.</p>\n<p>No wonder the hospitality industry requires a reliable identity management platform that prioritizes data security from unauthorized access, being tampered or destroyed.</p>\n<h2 id=\"the-role-of-loginradius-identity-platform-in-the-hospitality-industry\" style=\"position:relative;\"><a href=\"#the-role-of-loginradius-identity-platform-in-the-hospitality-industry\" aria-label=\"the role of loginradius identity platform in the hospitality industry permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The Role of LoginRadius Identity Platform in the Hospitality Industry</h2>\n<p>Simply put, data security is a crucial metric for hotel owners. Guests should never feel insecure about their data, and that’s rule 1. </p>\n<p>Henceforth, advanced identity management policies, coupled with frictionless verification should make security seem effortless. </p>\n<p><a href=\"https://www.loginradius.com/resource/how-travel-and-leisure-companies-use-loginradius-identity-solution/\"><img src=\"/7b58b99d5a1aef29104a17998e11cda4/image4-1.webp\"></a></p>\n<p>When your business revolves around accommodating customer preferences, the need for identity verification becomes crucial. LoginRadius is a <a href=\"https://www.loginradius.com/blog/2019/06/customer-identity-and-access-management/\">customer identity and access management</a> (CIAM) platform that helps hotel owners to roll out strict security policies while offering excellent customer experiences. </p>\n<p>With LoginRadius, here’s what you can offer your customers:</p>\n<h3 id=\"seamless-verification-with-biometrics-authentication\" style=\"position:relative;\"><a href=\"#seamless-verification-with-biometrics-authentication\" aria-label=\"seamless verification with biometrics authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Seamless verification with biometrics authentication</h3>\n<p>The hospitality industry is a booming market at the moment. With intense competition happening at the backdrop, taking charge of internal processes and increasing security within the hotel staff has become more crucial than ever.</p>\n<p><img src=\"/4f2c69527539c9aaa8d129f40253841b/image5-1.webp\" alt=\"seamless biometrics authentication - Loginradius\"></p>\n<p>Looking ahead, LoginRadius’ biometric technology will help you: </p>\n<ul>\n<li>Monitor the attendance of your staff in real-time. </li>\n<li>Schedule shifts and manage them efficiently.</li>\n<li>Review staff holidays, late coming, etc. in real-time. </li>\n<li>Improve staff productivity. </li>\n<li>No tailgating with accurate identification.</li>\n<li>On-time salary and payroll.</li>\n</ul>\n<h3 id=\"strict-adherence-to-global-regulatory-compliances\" style=\"position:relative;\"><a href=\"#strict-adherence-to-global-regulatory-compliances\" aria-label=\"strict adherence to global regulatory compliances permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Strict adherence to global regulatory compliances</h3>\n<p>The hospitality industry runs a <a href=\"https://www.hospitalitynet.org/news/4094427.html\">high risk of data theft</a>, and when that happens, it leads to severe repercussions, extending far beyond reputations damage.</p>\n<p>Therefore, you need to understand the nature of the data you collect from your guests to protect it. Generally, it falls under three categories.</p>\n<ul>\n<li><strong>Personal data</strong> - includes name, date of birth, and contact information, i.e., basic information.</li>\n<li><strong>Preference data</strong> - includes room type, special check-in/ check-out requests, i.e., information tracked by hotels to understand the likes and dislikes of their guests.</li>\n<li><strong>Transaction data</strong> - include bank numbers, credit card information, i.e., information related to payment and reservation services.</li>\n</ul>\n<p><a href=\"https://www.zdnet.com/article/hotel-front-desks-are-now-a-hot-target-for-hackers/\">Cybercriminals are mostly fond</a> of personal and transaction data. A lot of such data is collected, stored, and processed daily. As hotel operators, it is your responsibility to ensure that all data remains protected. </p>\n<p>LoginRadius abides by industry-approved security compliances like EU’s <a href=\"https://www.loginradius.com/blog/identity/ccpa-vs-gdpr-the-compliance-war/\">GDPR and California’s CCPA</a> to keep guests’ data safe and protected at all times.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>Most businesses in the hospitality sector offer complex ownership structures. Hence, it is only feasible to shift your data protection responsibilities to an ideal customer identity and access management platform that commits to securely managing your guests’ data. </p>\n<p>After all, the hospitality industry is all about customer experiences and keeping up with their changing expectations.</p>\n<p><a href=\"https://www.loginradius.com/contact-us?utm_source=blog&#x26;utm_medium=web&#x26;utm_campaign=improve-customer-experience-hospitality-industry\"><img src=\"/8fce571f703a5970dbb1359a2fe0e51a/book-a-demo-loginradius.webp\" alt=\"book-free-demo-loginradius\"></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"March 13, 2020","updated_date":null,"description":"It has always been about luxury, pleasure, and excellent customer service in the hospitality industry. Modern guests travel for both company and fun. They also want business owners to better connect and understand them well.","title":"Improving Customer Experience in the Hospitality Industry","tags":["digital transformation","cx","ciam solution"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/428d82fb05d5e5e6ff4210e69f6b6161/7f8e9/hospitality.webp","srcSet":"/static/428d82fb05d5e5e6ff4210e69f6b6161/61e93/hospitality.webp 200w,\n/static/428d82fb05d5e5e6ff4210e69f6b6161/1f5c5/hospitality.webp 400w,\n/static/428d82fb05d5e5e6ff4210e69f6b6161/7f8e9/hospitality.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"<p>Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.</p>\n<p>We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the <a href=\"https://www.loginradius.com/\">LoginRadius website</a>—to be faster, more intuitive, and developer-first in every way.</p>\n<p>The goal? Having them spend less time searching and more time building.</p>\n<h2 id=\"whats-new-and-improved-on-the-loginradius-website\" style=\"position:relative;\"><a href=\"#whats-new-and-improved-on-the-loginradius-website\" aria-label=\"whats new and improved on the loginradius website permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s New and Improved on the LoginRadius Website?</h2>\n<p>LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.</p>\n<p>Here’s a closer look at what’s new and why it’s important:</p>\n<h3 id=\"a-developer-friendly-dark-theme\" style=\"position:relative;\"><a href=\"#a-developer-friendly-dark-theme\" aria-label=\"a developer friendly dark theme permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Developer-Friendly Dark Theme</h3>\n<p><img src=\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\" alt=\"This image shows how LoginRadius offers several authentication methods like traditional login, social login, passwordless login, passkeys and more in a dark mode.\">    </p>\n<p>Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.</p>\n<p>The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.</p>\n<p>So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.</p>\n<h3 id=\"clear-categorization-for-loginradius-capabilities\" style=\"position:relative;\"><a href=\"#clear-categorization-for-loginradius-capabilities\" aria-label=\"clear categorization for loginradius capabilities permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Clear Categorization for LoginRadius Capabilities</h3>\n<p><img src=\"/e5358b82be414940f3fb146013845933/capabilities.webp\" alt=\"This image shows a breakdown of all the LoginRadius CIAM capabilities, including authentication, security, UX, scalability and multi-brand management.\"></p>\n<p>We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:</p>\n<ul>\n<li>Authentication: Easily understand <a href=\"https://www.loginradius.com/blog/identity/authentication-option-for-your-product/\">how to choose the right login method</a>, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code.</li>\n<li>Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts.</li>\n<li>User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences.</li>\n<li>High Performance &#x26; Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions.</li>\n<li>Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs.</li>\n</ul>\n<p>This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.</p>\n<h3 id=\"developer-first-navigation\" style=\"position:relative;\"><a href=\"#developer-first-navigation\" aria-label=\"developer first navigation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Developer-First Navigation</h3>\n<p><img src=\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\" alt=\"This image shows the LoginRadius menu bar, highlighting the developer dropdown.\">   </p>\n<p>We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.</p>\n<p>The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.</p>\n<h3 id=\"quick-understanding-of-integration-benefits\" style=\"position:relative;\"><a href=\"#quick-understanding-of-integration-benefits\" aria-label=\"quick understanding of integration benefits permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Quick Understanding of Integration Benefits</h3>\n<p><img src=\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\" alt=\"This image shows a list of popular programming languages and frameworks offered by LoginRadius.\"></p>\n<p>Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.</p>\n<p>Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.</p>\n<h2 id=\"over-to-you-now\" style=\"position:relative;\"><a href=\"#over-to-you-now\" aria-label=\"over to you now permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Over to You Now!</h2>\n<p>Check out our <a href=\"https://www.loginradius.com/\">revamped LoginRadius website</a> and see how the improved experience makes it easier to build, scale, and secure your applications.</p>\n<p>Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":810,"currentPage":136,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}