{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/121","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"There are more than 1 million websites or apps are using \"SignIn with Facebook\" or \"Login with Facebook\". Do you know why they are using…","fields":{"slug":"/engineering/login-with-facebook/"},"html":"<p>There are more than 1 million websites or apps are using <strong>\"SignIn with Facebook\"</strong> or <strong>\"Login with Facebook\"</strong>. Do you know why they are using Facebook login and how it is beneficial in conversion?</p>\n<p>According to multiple surveys, there are more than 3 billion users worldwide are using social media and it is around 50% of the world's population. </p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 441px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.24263038548753%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABJ0AAASdAHeZh94AAAD7ElEQVQ4yyWU609TZxzHz0uzReQul0JcXcsoQq1QbqW0lPac01Naej+tpzcUKreBgC04ERRwEzVoXNQtu2TGLUvmm8VsS5Yly/wLtuzP8c1nD+wkvzzPeV58vt/fN8/vkYzLOslUnLyhkxP7bFZnLq9TzMQJBGWUkIwaVghOq8hTMpPqBP6Ql8CUDy0aIJFRSRsa04lJvPI4kpEvUMgbzBYNSqUCoy4nqwmFHx/sUr5qEIoHmUqqhBIyWlyAY37CSZ8AeQXITzqnEdVDaAlVnIeQcgJmpCP4fWP0Oe30WjvYy0V4tbvB47Uy2VSQRFolllEEPCBKJpqWien+E6FgLEgg4heCGhOaD+lyMcxh5RqL4uD9mlN0Np8h5x04qcNrBp/dmBdxqGRExTMyek5BF870XICIcDqVCBIRolpMRBPxIj07WOOP5w+ZE7lYhLuRC2bKyii7RoSD2Qzf7q6TM9xEE05S6SGCoT4GXR8y7LaIjHuIxAe5nPOQyg6T1AeR3nx+yFeVRXR1EP+oDcXRRXSwm5L3klhtlEMThFUH7skuhsesWC6YMHe3c87aisXWhs1uore/E5fHysi4Fen7/U0elg1iwX6ioX4CdjMeaxtanxmXpY3MxBCRwDBmWwsd55sxd7XR2tF4Uk1t9Sd11tTIBx+1cV4ISS+3r1NUXHR01GHpaUf1OJjsMjFiPovSe46y5mazmKS6kCMkj9Hdc46a+veoaz5Ni4A2nK2lWUCP902t9Uj3SnGuxAI4+qy4hy8xb8Tx9Z7Hbqqjt72WxJCNuLObR+vz/PnyBV/u32SlkMY1ZKehqYaW9noammupbThNo4BLldgkR6tXuS3aXk5pxMcHCAzYGDC34OhsJOywkJ1wMtpn4aiyxM9P7vHbi0f88uwBlRkdU2cTTS11/wOPHV4Pe/imusiWESU7OYIRcKGN2HFa2vGKLN2WVpLaBFnR7l0h+sWtVY7WyzytLvDd3SozuoLX14OsXERWLyLdTCkcFGNsJgLkZRcL4l7l1HG2K9e5f+cWG0tlDg/u8HB/h+dH93n64B6HO1vcKCTYWyzy9d4GdytJttYjVNciSHP+QVQRvks4ygvQanZaAN38/usbjr/Xr3/i33/+5tUPr3j37h1/vX3L/s4nrOfjzEVlnlSXeLQ1w+66zu5aFsluasDSXEPrmVN4+nuYEWO0pE+x+fE1Pr2zTSk9zf7tLVbmr3AoXFZX5tkoF9hbLjErHodtEcP+yjEwzc5aCmnK14tTXBNLSy1mEaqvv5vw2CUiLgcrYqRKmgdHVwcrIuNl8QgUxX9ZjFlBrMGhC8zGFJZzouWFGLfWpvkPdD9BmOWpBOcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"login-with-facebook\"\n        title=\"login-with-facebook\"\n        src=\"/static/a7663b66ba06daf295eda5e5e2ce441f/efc6e/facebook-login-wow.png\"\n        srcset=\"/static/a7663b66ba06daf295eda5e5e2ce441f/efc6e/facebook-login-wow.png 441w\"\n        sizes=\"(max-width: 441px) 100vw, 441px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>The biggest challenge and most important things are to make user registration and login quick and easy while developing our application. The registration forms required a lot of data that need to be filled by users manually and it causes lost, potential users. Additionally, users need to enter their usernames/emails and passwords in the login forms to authenticate themselves and also need to remember more individual IDs and passwords. </p>\n<p>Social Login allows customers to bring their existing social identities and use them to register and log in without creating a new profile explicitly. </p>\n<p>Facebook is the most favorite social media provider in comparison to other social media providers and the number of active Facebook users growing day by day.</p>\n<p>In this article, I will explain how you can implement <strong>“Log in with Facebook”</strong>  on your website or mobile app in a very easy manner. </p>\n<p>Facebook work on the OAuth 2.0 protocol and most of the social providers like Facebook, Google, Microsoft, Linkedin are supporting OAuth 2.0. Refer to this article <a href=\"/oauth2/\">Getting Started with OAuth 2.0</a> to know about OAuth flow. </p>\n<h3 id=\"create-your-facebook-login-app\" style=\"position:relative;\"><a href=\"#create-your-facebook-login-app\" aria-label=\"create your facebook login 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>Create Your Facebook Login App</h3>\n<p>Here you can find the complete step by step guide to create your Facebook Login App.</p>\n<h4 id=\"step-1\" style=\"position:relative;\"><a href=\"#step-1\" aria-label=\"step 1 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</h4>\n<p>Go to <a href=\"https://developers.facebook.com\">Facebook Developer</a> and log in using your Facebook credentials.</p>\n<p><strong>NOTE</strong>: Please do not log in using a business account as Facebook will not allow you to create an app if you do so.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 42.15384615384615%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB80lEQVQoz12SS08TURiGB7CJ9qYIpaWdXoeZtvQCQyltR7EX2kJES1poEcrFnfGy6MrEBQtjYmIIO+NGdyZqoq6MMe7c6cIfwH/wRzyemSoLFm/Ol5x8z3nf7zvSuNpgOr3OhNbkqtrEGali8y8jeQykKQN7uMblsEEgGBWKEIooqPFZoopGbCZuSdcUskJyWEGyhytclG+IxiouARv1LHHr4Ih3X0959vIbbqWOO2Qgh4ZAUx6vnylfwJJZe6dl/P/uJEeozLi6SqYxYDK1yai/Sv/BU379POXtBxPYwCkXycwtUG+uUas3yRdKzOmLZOdz5PJF0hndgpmPSg7h0BWr49FW0PsfUdZeYPPlsQXKjEzmsUdqAlhgqXiNnf4+7c0u2zt9ur07dETd3zug0+meJZDMmTmjK0iuJPHWKxY7x2SKLTSjTzjXwyGAjkCBQuk69x8+Yndvn9utNp2tHlvdbVobbQE9REvM4pfDQ6A9VGHw/BPff//hyfFn5NQqN3cf8/r9D8Z8Bm6xlFRmnmqtwXK5iqImrLlNB0KWTNBZZBNoxj4cnHDy5gsbd4+QJvJ4kuvojXtcClYsoKIlSWd1ZrSE2GbMaj6v4VIEzISOeApIVxYY85Zwx2rCdZkLvpIV2QRGYqrlLCi+xv/m8zDz/AvxdgD9qFyQaQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/24db342a3c6a9447251fd1606d058c55/e5715/loginadius-facebook-img1.png\"\n        srcset=\"/static/24db342a3c6a9447251fd1606d058c55/a6d36/loginadius-facebook-img1.png 650w,\n/static/24db342a3c6a9447251fd1606d058c55/e5715/loginadius-facebook-img1.png 768w,\n/static/24db342a3c6a9447251fd1606d058c55/6aacb/loginadius-facebook-img1.png 1347w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-2\" style=\"position:relative;\"><a href=\"#step-2\" aria-label=\"step 2 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</h4>\n<p>Select the <strong>My Apps</strong> as displayed on the below screen.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.84615384615385%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAADI0lEQVQozy2S3U+aBxSH2c3ulixpYtzWmhVS69CiRYpbq9OCH7EFUaiKgPLqtAURq2IL+AH1qzAL1VAR3KhlKkZt17RYu1aNXZYtWZt9dNmyZN3FdrGbZX/EszfLrs7V+f2ek/NIZAX5aGu0VNdoMDTqMBobuGBqwGZtxd5uRrBbEAQbNouJLqGVLnsrzSYDrfp6GsQduaKUyg/ew3xeRUdzNZJ38nIoOymjUiVFX1mI9fwpeq11DDtaCPRbmHE3EbCXE+yp4+MpPzeuB1iY9pGZ6OWj+nJycg/zZs5bHJbKOK4oQaJSK+iy6HB26PA5jQRdTUy4Grjpbyd1TWArZCfVV8ZtTw0PM0s8yd5lbXqQkE1D2mvDY65DV6Yg2KIh94gUiUZ7hjFPNzMjvcTCXtYWAqTDLlbDTnbiQ3y7MsLBgpOniWGeP93klxfPeLQ4zWxbOfsxL9+thtgLXSLZc45Dh3KQnP5QzdT4INHpYVJRL/eWrvFoeZKv7if4fm+Lg+wW23fX+ePXl/z120/8/ecrXj0/YMNtZDco8E3Sy5fxYTbGrMiP5oknn1biG+hkatjO0pSTrdgVsiJZ1NdJs9lGRa0BWX4hE75Bvv48wY9iye8v9tiJXCWoU7PtbyIbNLMz2UZjRTESaUEeDvEJIxd1RAYMfBa6yP7yCHZjNa+9/ga5uW/jMJs4p60i1FvPerCFlVETD1JhMqMu7lzSkHTWsumuQqd8F4ms8Ch9gp5gn5HFQAebMQ9fLF3l9qSThMPA4/Ag//xwwJ3ZAKnrV0hHPKzcGGBn+z7jY37UqhM06qppOatELj0iBhbJ6O/UM+7UEx9rZz3czW7KSzY5zrKvh8RQJ3OjQ/y8vcLup1Hmw6Iy6RixxCLlmiqKSk6g19f+52lJqaiNVHEM9/+BC/42MjMCj+Nu7s1eJiqqlPK6uNVnZ381zuYnN4lM9LORSTIXj1NQrBDFLkKpViJYm1CJU1L8fikOSy0+Qcstv5n12R4O1sLsp+e4bKxhptuG4cwpSuXH2RHJXj7Lsrf7hMj8PMVlZeQdy0deouCstkIkPMm/C1b1npiNuEcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/20b2c36d3b3e0924d6a391fb48b91c35/e5715/loginadius-facebook-img2.png\"\n        srcset=\"/static/20b2c36d3b3e0924d6a391fb48b91c35/a6d36/loginadius-facebook-img2.png 650w,\n/static/20b2c36d3b3e0924d6a391fb48b91c35/e5715/loginadius-facebook-img2.png 768w,\n/static/20b2c36d3b3e0924d6a391fb48b91c35/b4904/loginadius-facebook-img2.png 1768w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-3\" style=\"position:relative;\"><a href=\"#step-3\" aria-label=\"step 3 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</h4>\n<p>Click on <strong>Add a New App</strong> as displayed in the below screen.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 27.23076923076923%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABFUlEQVQY0zWQYU/CMBRF9///jgEl4DIQ1GCiiVEjbEI23NaNtVvbFR3Crq81fji5t016XltvMr3D9eweY8orf4GLUYDBeEZMMZjc0N4cQ1pfUh8S4+AWI9pbPr0g/IjxHm4RbpLepj9fnjypDCxKtZDlFoowPEFbxS5ZUUG3B3x3Rxx/TuBCoqxqKG0cdaNR7AX2vOklObycDuQFR57nKHZrpIzT1A2yQoAlK/jBgg5waN3ifD7j+S3Cw+MrjDHous4NI0fPSu7Ss4XRBMYYys+1E8W7DFlZo0ojtLpBa76IA0Sj0EjtusXesBINnIMoCG/PazgqAZ6uwLMQIo+oU2ZrEkjYp0ilncxKbXfQrUX99wX/nl9lvG87rawiEwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/f9826f57bf77405cc9f453197e1c74a8/e5715/loginadius-facebook-img3.png\"\n        srcset=\"/static/f9826f57bf77405cc9f453197e1c74a8/a6d36/loginadius-facebook-img3.png 650w,\n/static/f9826f57bf77405cc9f453197e1c74a8/e5715/loginadius-facebook-img3.png 768w,\n/static/f9826f57bf77405cc9f453197e1c74a8/46435/loginadius-facebook-img3.png 1885w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-4\" style=\"position:relative;\"><a href=\"#step-4\" aria-label=\"step 4 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</h4>\n<p>Input display name and contact email. Once you have done so, click on <strong>Create App ID</strong></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.46153846153846%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABQ0lEQVQoz5WSyU7DMBCG8yYgKhYJwY0LqlSEBDQFKbS0CcsrNF14K96BCzdunLhzRbRJKVmcOM6P7axqCIKRPnlG4xn/Y1vZ3dvHze0ddOO6wkA30Nf1hIFRgy4R+xuNTSiT6T2EfS6XICSA43pwPV/yX+v1+lCG5giMxfiYzWDbC8wtW2Jx33FceJ6HL76SIOD7WIUoiiTCNK0LxRyNZSCaEUIQx3FOUlAUl3Or+2TDy1LDTJErRuZkvlgpjfLCOpVFQz6ybDi34Pn+r4X1DcsKzUShy+/K94l8GDG6Two/DCnYXxUOU4VhGOYXnEEzaFTJyTzlBzF+Haz0KOPJVAY0PYULSWOAhDECmhD/8E3EVE8v73h4fMPz6wJa9wrK1vYOOucXOGurnI6krXLaKWopVldiTrN1goPDYzSPTrG2voFvAE6ilga5ZWMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/ee19125fdb7fcd13e0e1130e97f3f7a7/e5715/loginadius-facebook-img4.png\"\n        srcset=\"/static/ee19125fdb7fcd13e0e1130e97f3f7a7/a6d36/loginadius-facebook-img4.png 650w,\n/static/ee19125fdb7fcd13e0e1130e97f3f7a7/e5715/loginadius-facebook-img4.png 768w,\n/static/ee19125fdb7fcd13e0e1130e97f3f7a7/612f7/loginadius-facebook-img4.png 773w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-5\" style=\"position:relative;\"><a href=\"#step-5\" aria-label=\"step 5 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 5</h4>\n<p>In the security check, Complete the security steps and click on the <strong>submit</strong> button.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 584px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.56849315068494%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAByUlEQVQoz5VSTW/TQBTMr+VcAScOCKmBA0WiCErTpk6U1ikiIaFcQOLOoReExKGUqvkoqZOsYzux1+u1E3t4u65RhVRUnjR6M9J63rwnl55VP+Np5SM2dj7h0eYH3C23cP9JG/cet4i/vTXW1lsob1RQGk1DnA0YfvYYTvsMJ+cMP86nxG0MLB/9ywV6owUG1BUf/IX+FYbjAOZhCyVkK/iLOThB8AAiDBCFPmQU4n/r6Og9GVKFoUAkZY4oQhwnkHGMZSJxORP48m1KPEaaZjcg1YbdbhelLMvgeR4sa4zJZELd0qaSzFfLBMPRBMdfTxGTVqXeKxR1XXc6nTyhEAJJklAyqY0KqMRzz4XrMNoivL2hlGSWLJFee3hTFQYKxcqFoV45SVLMnLkG5+LqhvGflCq9lKTjJVar9J/DdEJ1G8dxaC1Xd8YYXFfxXNu2TcOIewv4AdcDFYIgxEnPxtlwhoCH+jztdjtfmXOuk+g0+gOhoXihBd1QvfODQP9SF5aDh9vHePnmO4a/xmA0+J0ybDT2YRgGarU6avU69vZq2KnmqOwa2NXaQGP/AM1mE6ZpUjdxQL1qNPD8xRa2Xm/jwfor3Fkr4zcYZx1e6ZQSFQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/efbf9d763ad5dc1ded34050d8a408b74/e05eb/loginadius-facebook-img5.png\"\n        srcset=\"/static/efbf9d763ad5dc1ded34050d8a408b74/e05eb/loginadius-facebook-img5.png 584w\"\n        sizes=\"(max-width: 584px) 100vw, 584px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-6\" style=\"position:relative;\"><a href=\"#step-6\" aria-label=\"step 6 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 6</h4>\n<p>Once you land on the App dashboard, Select Facebook Login, and click <strong>Set Up</strong>.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.76923076923077%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABqUlEQVQoz21S0W7bMAzM/3/NXvdWYMCAPqwv3dp0TVLETSzLkm3JkiXLTnqj6GxL1xkg7kBR5PHkVVU3kBQZy0pDyMxbSJWjYawu50vuErX+cJ5j9bvwKBR2LwXqWkJrjVJIiMsQ1VED/XegkITa0XnL/HrYKqsTyqArn/DmCmx+PqHYPePsDvBqhzRP2K87aOGJJzg/IIwzYvkDsdfMle7+NF1l2aLu4OoNgDfcPVR43Crkb7YF4+OthNxb5tM0M47bLzj7mrlu/tdQvXBxiCOGEDGdgFNW6Rxa26DpGoxjwpgSPKlUxsP0DpHqdWuuGmYzaWVTrhHNkST0wCDg1p8wHL9hiKToTM0JjO1p5QBPA2kZzDQ151Rj/lXYoms1VRh8f95jWxxoJ4ngDV98kF9R2h3zEJdmn19vcLCCef1+5eWljAvsx7a0eFUD8zSfGDfVPVRfXjycGG/3d6jt4rX62LCB7T3mmV5v8ByJvEp0OZIi34/kZWD/UpqWM58Qw8gD3nt4+THbrkfIBaQqhyXD+/yLUG4mA/OD5Vz2MMREuRMPzLlrhb8AKEf4I6SYIJQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/a31c9add537406960d222f19891bb897/e5715/loginadius-facebook-img6.png\"\n        srcset=\"/static/a31c9add537406960d222f19891bb897/a6d36/loginadius-facebook-img6.png 650w,\n/static/a31c9add537406960d222f19891bb897/e5715/loginadius-facebook-img6.png 768w,\n/static/a31c9add537406960d222f19891bb897/1d499/loginadius-facebook-img6.png 1632w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-7\" style=\"position:relative;\"><a href=\"#step-7\" aria-label=\"step 7 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 7</h4>\n<p>Click on Settings in the sidebar under Facebook Login. Turn on Client OAuth Login. Turn on Web OAuth Login. Put the valid redirect URL on <strong>\"Valid OAuth redirect URIs\"</strong>. Click on the Save button.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 39.53846153846154%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABN0lEQVQoz2WR227EIAxE9///ro9VpT60q80SAgQS7pCpIYn2UksjYouMj81FCIGcM3Kp0HKCnhisdSiUl1IeZ33ktX3Xdm6Qs8EwCjAuuy5SSrRIucIO30i3T4iRQZsVzvku61xv4n3optu2dbVQzZA9GWpjEGPshJbfEPgPkYpuEEPAdpA1M84nCKmOCcrD8Jnwzth+yQX4mBBChNILpNLQy4ozWsOZ6q1mybzugP3uC6FZDFJK/YfVaAQ9Qd5+YPgAKxnSIl9U7AyEBZs3gNdQSr0SJhq3LTlTy3W8YuZ3aDGi+BU1WNK6i/JeO+vRoy4TFGcYuAI7TC/nSCkXOCJ0aoQYfjthXhSq0/9lNdERYTKY3wnP18pkuNKLxlT6LndlhHelDE97ZpPGx9eE6yAxktH9MP0D/YBpMq/9JuIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/d23cd26ebfc6f1e63b8c71e3c3561e6d/e5715/loginadius-facebook-img7.png\"\n        srcset=\"/static/d23cd26ebfc6f1e63b8c71e3c3561e6d/a6d36/loginadius-facebook-img7.png 650w,\n/static/d23cd26ebfc6f1e63b8c71e3c3561e6d/e5715/loginadius-facebook-img7.png 768w,\n/static/d23cd26ebfc6f1e63b8c71e3c3561e6d/3d405/loginadius-facebook-img7.png 1348w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"step-8\" style=\"position:relative;\"><a href=\"#step-8\" aria-label=\"step 8 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 8</h4>\n<p>Click on Basic under settings in the sidebar. Under App, Domains include your website Url. Enter all the required details. Change the status of the app from Development to Live from the top-right corner. Click on the <strong>Save Changes</strong> button.</p>\n<p>Now your Facebook app is ready. You can start implementing Facebook login\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 42.46153846153847%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUUlEQVQoz2WRjXKDIBCE8/4v2E5nOrVNjKKA/KmA4PYgJk1bZtbTU77blRMXEsZarKuH0gbTpKGNxTwvcE+al/WoHvraQJzfMRkHKRXYwDFyiZFYJy4EFvo4bolADlrfYKVXILXSs6CNrvY9ljUc8hBkgI3yoZOQkjYu8D5AW4eBJq1howEZgRQT1Ziq6xAjYtxqDaHcR0gCdkxUWD8Icsg5ckrIO2DZF+b2DdAdoK7Yi6YrsrzAKFkd5ZxR1r7v5UpAU0EPh87NFGlGoveu+4A7v2JlDeL4WZWnFmlsoDjDpAw5C9VZIucFWhz+Alo6kIUiF4duEjBDC8t7RCuR3AR4hyRbyOYFTvQIisGrEYmcY/OQyqJn/AeYKG6ZVCaWSMrMkNodkW5rjx5uuMDxDkGPBB2RDQfydgCfHN43FaClQyk/v546xSrQKvxf997fyN/r0WftIyhcFQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Facebook Login\"\n        title=\"Facebook Login\"\n        src=\"/static/ad6fe0cf1bcb752d3ad0798cf4030d78/e5715/loginadius-facebook-img8.png\"\n        srcset=\"/static/ad6fe0cf1bcb752d3ad0798cf4030d78/a6d36/loginadius-facebook-img8.png 650w,\n/static/ad6fe0cf1bcb752d3ad0798cf4030d78/e5715/loginadius-facebook-img8.png 768w,\n/static/ad6fe0cf1bcb752d3ad0798cf4030d78/3d405/loginadius-facebook-img8.png 1348w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3 id=\"data-selection\" style=\"position:relative;\"><a href=\"#data-selection\" aria-label=\"data selection 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>Data Selection</h3>\n<p>When a user logs into your website or app via Facebook Login, you can access the user's data stored on Facebook. Facebook only allows the basic profile data permissions for a new Facebook app.  To get more data according to your business requirement,  you need to enable additional permissions on your Facebook app. Facebook is supporting around <a href=\"https://developers.facebook.com/docs/permissions/reference\">42 permissions</a>. You need to choose user data that you want to collect from Facebook. </p>\n<h3 id=\"submit-your-facebook-login-app-for-review\" style=\"position:relative;\"><a href=\"#submit-your-facebook-login-app-for-review\" aria-label=\"submit your facebook login app for review 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>Submit Your Facebook Login App For Review</h3>\n<p>To grab more than basic profile data points or asking for additional permissions from your users, your Facebook apps go through the review process. Sometimes businesses require some additional permissions on the Facebook app and for that, you need to submit your Facebook app for approval before starting to ask for additional information. </p>\n<p>The Facebook app review process is pretty much simple, Please refer to this document <a href=\"https://www.loginradius.com/docs/api/v2/admin-console/social-provider/app-reviews/facebook-app-review/\">here</a> for the Facebook App Review Process. </p>\n<h3 id=\"add-login-with-the-facebook-button-on-your-site\" style=\"position:relative;\"><a href=\"#add-login-with-the-facebook-button-on-your-site\" aria-label=\"add login with the facebook button on your site 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>Add Login with the Facebook button on Your Site</h3>\n<p>Implement Facebook login to a web page is very easy using Facebook’s JavaScript SDK. Facebook is providing <a href=\"https://developers.facebook.com/docs/facebook-login/web\">documentation and instructions</a> along with code examples to implement the login system. </p>\n<p>Let's see how we can add the Facebook login interface. For this, we just need to copy and paste the code provided to us by Facebook. Here I have added some customization to the existing code </p>\n<p>Place this code in the body section of your HTML code. </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">The</span><span class=\"mtk1\"> </span><span class=\"mtk12\">JS</span><span class=\"mtk1\"> </span><span class=\"mtk12\">SDK</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Login</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Button</span><span class=\"mtk1\"> --&gt;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">fb</span><span class=\"mtk1\">:</span><span class=\"mtk10\">login-button</span><span class=\"mtk1\"> </span><span class=\"mtk12\">scope</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;public_profile,email&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">onlogin</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkLoginState();&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">fb</span><span class=\"mtk1\">:</span><span class=\"mtk10\">login-button</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">The</span><span class=\"mtk1\"> </span><span class=\"mtk12\">JS</span><span class=\"mtk1\"> </span><span class=\"mtk12\">SDK</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Login</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Button</span><span class=\"mtk1\"> --&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\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;status&quot;</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></code></pre>\n<p>Now you need to include the JavaScript section. It'll loads the Facebook SDK JavaScript asynchronously.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">Load</span><span class=\"mtk1\"> </span><span class=\"mtk12\">the</span><span class=\"mtk1\"> </span><span class=\"mtk12\">JS</span><span class=\"mtk1\"> </span><span class=\"mtk12\">SDK</span><span class=\"mtk1\"> </span><span class=\"mtk12\">asynchronously</span><span class=\"mtk1\"> --&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">script</span><span class=\"mtk1\"> </span><span class=\"mtk12\">async</span><span class=\"mtk1\"> </span><span class=\"mtk12\">defer</span><span class=\"mtk1\"> </span><span class=\"mtk12\">crossorigin</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;anonymous&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;https://connect.facebook.net/en_US/sdk.js&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">script</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Next, we'll add the Facebook init function. We just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId: '{your-app-id}'. </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=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk11\">fbAsyncInit</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=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">init</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">appId      :</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;{your-app-id}&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">cookie     :</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,                     </span><span class=\"mtk3\">// Enable cookies to allow the server to access the session.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">xfbml      :</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,                     </span><span class=\"mtk3\">// Parse social plugins on this webpage.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">version    :</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;v7.0&#39;</span><span class=\"mtk1\">           </span><span class=\"mtk3\">// Use this Graph API version for this call.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    });</span></span></code></pre>\n<p>Next, we need to add the function that handles the response and alters the page contents based on the type of response. I have added this function at the very top of the scripts section.</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=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">checkFacebookLoginStatusCallback</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {  </span><span class=\"mtk3\">// Called with the results from FB.getLoginStatus().</span></span>\n<span class=\"grvsc-line\"><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; Checking Facebook Login Status&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">);                   </span><span class=\"mtk3\">// The current login status of the person.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">status</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;connected&#39;</span><span class=\"mtk1\">) {   </span><span class=\"mtk3\">// Logged into your webpage and Facebook.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk11\">getUserProfile</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 class=\"mtk3\">// Not logged into your webpage or we are unable to tell.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;status&#39;</span><span class=\"mtk1\">).</span><span class=\"mtk12\">innerHTML</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;Please login with Facebook into this webpage.&#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>As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. When the login is not authorized, this function changed the HTML on your page to ask you to log in.</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=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">checkLoginState</span><span class=\"mtk1\">() {               </span><span class=\"mtk3\">// Called when a person is finished with the Login Button.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getLoginStatus</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {   </span><span class=\"mtk3\">// See the onlogin handler</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk11\">checkFacebookLoginStatusCallback</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</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=\"mtk1\">    </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getLoginStatus</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {   </span><span class=\"mtk3\">// Called after the JS SDK has been initialized.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk11\">checkFacebookLoginStatusCallback</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">);        </span><span class=\"mtk3\">// Returns the login status.</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=\"mtk1\">     </span><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">getUserProfile</span><span class=\"mtk1\">() {                      </span><span class=\"mtk3\">// Get User Profile using Facebook Graph API after login.</span></span>\n<span class=\"grvsc-line\"><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;Welcome!  Fetching your profile information.... &#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">api</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/me&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><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;Successful login for: &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">name</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;status&#39;</span><span class=\"mtk1\">).</span><span class=\"mtk12\">innerHTML</span><span class=\"mtk1\"> =</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk8\">&#39;Thanks for logging in, &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">name</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&#39;!&#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>Now if you save this page as login.html and open it in a browser you should see the Facebook Login button. You can also download this code from my <a href=\"https://github.com/VijayShekhawat/login-with-facebook\">GitHub Repo</a> and I have customized it to make it a bit shorter for an explanation.</p>\n<p>Now just Log In and check the console output. You’ll now see some basic info including id, email, first<em>name, gender, last</em>name.</p>\n<p>This is all there is to it. Of course, there are many more options and features available in Facebook documentation to discover.</p>\n<h3 id=\"closing-thoughts\" style=\"position:relative;\"><a href=\"#closing-thoughts\" aria-label=\"closing thoughts 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>Closing Thoughts</h3>\n<p>Social Media platforms are growing day-by-day and simplifying the registration and login process. Consumers can use their existing social identities to register and log in. They don't need to create a separate username/password combination so it is simplifying the Sign in/Signup process.</p>\n<p>LoginRadius supports Sign with Facebook with more than 40 other popular social networks google, twitter, Linkedin, etc. You can implement all the popular social media providers on your website or mobile app in less than 60 seconds.</p>\n<h3 id=\"source\" style=\"position:relative;\"><a href=\"#source\" aria-label=\"source 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>Source</h3>\n<p><a href=\"https://www.statista.com/statistics/278414/number-of-worldwide-social-network-users/\">statista</a> </p>\n<p><a href=\"https://news.netcraft.com/archives/2020/01/21/january-2020-web-server-survey.html\">netcraft</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 .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n</style>","frontmatter":{"date":"September 16, 2020","updated_date":null,"description":"This article will explain about social login benefits and how we can implement Sign In using Facebook on our website or mobile app.","title":"How to implement Facebook Login","tags":["Login With Facebook","Facebook","Facebook Login","Login","Oauth"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6666666666666667,"src":"/static/4e677331ecf5f923c5e08c812bca0026/1c1a5/index.png","srcSet":"/static/4e677331ecf5f923c5e08c812bca0026/69585/index.png 200w,\n/static/4e677331ecf5f923c5e08c812bca0026/497c6/index.png 400w,\n/static/4e677331ecf5f923c5e08c812bca0026/1c1a5/index.png 550w","sizes":"(max-width: 550px) 100vw, 550px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Assuming that the reader of this blog has a fair idea of the docker ecosystem! Docker has changed the world of software development! Since…","fields":{"slug":"/engineering/production-grade-development-using-docker-compose/"},"html":"<blockquote>\n<p>Assuming that the reader of this blog has a fair idea of the docker ecosystem!</p>\n</blockquote>\n<p>Docker has changed the world of software development! Since the last few years, docker has helped the developer community, enterprises, and startups to create solutions quickly and effectively. Also, deployment is relatively hassle-free with docker (conditions apply). And worth mentioning is, it resolves the “Works fine on my system” problem.  </p>\n<p>Well, just not docker, there are many container ecosystems available as an alternative to Docker. For example, Mesos by Apache and Vagrant by Hashicorp. Docker is more loved for what it is <strong>not</strong>, and that is Bulky! Docker is otherwise lightweight, works mostly with Linux and eventually was identified by Kubernetes in 2015. But, that story... some other time!!</p>\n<p>Straight to the context, Docker Compose! Docker compose is a powerful utility that is bundled with Docker installation. Docker-Compose can be used for production and development, to make things virtually seamless.</p>\n<h3 id=\"microservices-and-docker\" style=\"position:relative;\"><a href=\"#microservices-and-docker\" aria-label=\"microservices and docker 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>Microservices and Docker</h3>\n<p>Docker is doing a great job when it comes to describing and developing microservices.</p>\n<p>While working on microservices where quite a few ( <em>being reasonably complicated, in our example 6</em> ) containers talk to each other to complete a task and since it is an end to end task, the whole thing looks very complicated. To rectify :</p>\n<ul>\n<li>the troubles of developing end to end feature</li>\n<li>how it works in integration</li>\n<li>containerizing the application</li>\n</ul>\n<p>the developer has two choices, create a script in a scripting language of choice, or choose docker-compose. Well, docker-compose is an easier option.</p>\n<p>Here in this <em>kind of</em> practical example, we are going to demonstrate a similar situation, where multiple containers talk to each other. We are going to use docker-compose as our primary tool to build and deploy images.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 544px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 61.029411764705884%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAADXElEQVQoz3VTbUwTaRCe3qJe1EsMWkzQ5CIXMUETzXk5cyjKBSPE3Pnj1CNqTIzenYSEgImG+AsQUVAxIm1AK1dDEVGhyke/aCm0hWy72w/abgvlIxSRbbfdQulH9Jfru03EmMtN8iRvJjPzPvPMDMzPz2OhUAgLBoOY3+9f63SOA0mSP0ciLBePx7lYbOXj0tISN+70nPV6fYCAAZyC/7XFxUWIxWKwvLwMiUQCcDMBHR1d+e8W6UQoFH7PMOEkTQc5s9lRbLO7wW53Yxx3A17U/iTQNh2BYdEhGBHlfSn4dmGhcDkaLQyzbGE0Gj0uk3XtTE/P/o7yzn5fd6tp+/0H0q1juGNHs7h9o6TtBbRKFWAQHYS7pbtAfCUHWq/ugRaEVQuHwxxil0I8HuOMRryO4zioqr4HlNt92umk/nnaLoWHog54/lIDqvocUDbsg9pLWZtqL2zDmkoy4MblH6GsrAzKyyv4lulwCNFjmBDDspEPas1IJV/QZBqDnp6B/d1ydX4yuQRa3SgQhjdr634FeNlwNFNen5scFP126Vk5Bponf6fxOTygs0uxpbffIOyW64QDSlPGwbziDdeuVW1HzE+6XK4/Kcp7kmGYM0qlVkh5p0Ez8CqVqLh7oK6rMnNvkibhcfcs78NGxwgB9PZpQaMdA5XaCG1PFYgZDkqlpoBlWQ4V4miaTsnh8UxKpqamK3S64QqKmmj2zgRvhiPxxrk5v/SxpP0AG4mA0WQBMFscApvdIyCtboHL7cWmpvjV8O6h6QDaqLco3j+D3gGrzXXFZqdyB7Wmw0N6Y3Hzw9ZKvd50cdI3+0d1TeMui8V61ePxFa0ORyj8BXbmnIXPWrRJ+9NHRy1VpNXZKOtU/8D7PKhls9kK8XhiNS6lG8A6h4MqGNLjX8aNYd/CufPXQSbrFIjFrSD999EGkrT2EYTNIn+tyEaJaxDWTUxM7EZHcMLnmzxhMJjOI2ZF9Xda0nCzDQxG4usll7TJAcdxgU6nA6VKlcXryKOvTyWanp4RWwhbjd0+ruO1DQSCKY3n5uZXbje0bD7++1+gHjR+85/LQT+CWqOFN7396wOBUP3CO+bJI8mrLL4JJEyaZtCQTZDOIoJ0FVht7mP6YTyvpLR6TWlZDYhbnsEntnIYO9rKgIkAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"title\"\n        title=\"title\"\n        src=\"/static/1bda5aef1d7445dcdf8ea583c442f42c/b3e51/example-arch.png\"\n        srcset=\"/static/1bda5aef1d7445dcdf8ea583c442f42c/b3e51/example-arch.png 544w\"\n        sizes=\"(max-width: 544px) 100vw, 544px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>The picture above depicts the architecture of a hypothetical portal of flash sale.</p>\n<p><em>Flash Sale is an e-commerce concept, where an item is made available for sale to the public on a portal at a specific time and in a limited quantity.</em></p>\n<p>The components of the application are</p>\n<ul>\n<li>Gateway</li>\n<li>Frontend (react)</li>\n<li>API server ( node.js)</li>\n<li>SQS ( In this example SQS Emulator)</li>\n<li>Listener (node.js)</li>\n<li>DataStore (mongo-db)</li>\n</ul>\n<p>The application is otherwise fairly simple. Go to the portal, hit the green button which calls an API, the API drops a message to the queue, the listener picks the messages, grabs the item from the database reduces the quantity and updates the datastore again.</p>\n<p>So far so good!</p>\n<h3 id=\"code\" style=\"position:relative;\"><a href=\"#code\" aria-label=\"code 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>Code</h3>\n<p>You may fork a copy from here.</p>\n<p><code>git clone https://github.com/LoginRadius/engineering-blog-samples/tree/master/Docker/docker-compose-dev-sample</code></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 225px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAEDBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB2xOaK6iszkpF7Ah//8QAGxAAAwEAAwEAAAAAAAAAAAAAAQIREgADITH/2gAIAQEAAQUCCLywo2g0x7pGihRhOygfP//EABURAQEAAAAAAAAAAAAAAAAAAAEg/9oACAEDAQE/AQj/xAAWEQADAAAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8BK//EABwQAAICAgMAAAAAAAAAAAAAAAABESESMQIQUf/aAAgBAQAGPwLRWRJBWjQnEv0bx411/8QAHhABAAICAgMBAAAAAAAAAAAAAQARITFBcVFhkaH/2gAIAQEAAT8hfnY5Y0VWvNMftRixpfERcv6lWC+SyxTdtzAl6E0dT//aAAwDAQACAAMAAAAQPz8A/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERECH/2gAIAQMBAT8QVBrpc//EABgRAAIDAAAAAAAAAAAAAAAAAAABEBEh/9oACAECAQE/EG9Kz//EABsQAQEAAwEBAQAAAAAAAAAAAAERACExQXFh/9oACAEBAAE/EJRUCyuH3kQxxOAHRp7iRMZVEwAXxq9fMWXu7W8I7hY1KXf5vEsJQoem+5v82f/Z'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"So what is the problem\"\n        title=\"So what is the problem\"\n        src=\"/static/3162769ede82087ce5b5175352957f96/863e1/what-is-the-problem.jpg\"\n        srcset=\"/static/3162769ede82087ce5b5175352957f96/863e1/what-is-the-problem.jpg 225w\"\n        sizes=\"(max-width: 225px) 100vw, 225px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3 id=\"the-use-of-docker-compose-and-why\" style=\"position:relative;\"><a href=\"#the-use-of-docker-compose-and-why\" aria-label=\"the use of docker compose and why 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 use of docker-compose and why?</h3>\n<p>Exactly! What is the problem? As such, there is no problem, but it may arise if we do not program or develop it well in an integrated manner. Programming a component and managing it well reduces the time-to-production to a greater degree.</p>\n<blockquote>\n<p><em>I am not a great programmer; I am just a good programmer with great habits.</em></p>\n<ul>\n<li>Martin Fowler</li>\n</ul>\n</blockquote>\n<p>While designing and developing complicated systems where microservices are involved, integration and debugging become cumbersome.</p>\n<p>To ease it up docker-compose acts a friend.</p>\n<p>For the example above we are going to write a docker-compose. Docker-Compose has got <em>powers</em> to</p>\n<ul>\n<li>Build images</li>\n<li>Bring up the whole application ecosystem</li>\n<li>Wipe it up from the memory in one command</li>\n</ul>\n<p>First things first, the Dockerfile.</p>\n<p>Starting from the API. The API needs a docker image to build. The following is the Dockerfile for the same.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">FROM node:alpine</span>\n<span class=\"grvsc-line\">WORKDIR &#39;/app&#39;</span>\n<span class=\"grvsc-line\">COPY ./package.json ./</span>\n<span class=\"grvsc-line\">RUN npm install </span>\n<span class=\"grvsc-line\">COPY . .</span>\n<span class=\"grvsc-line\">CMD [&quot;npm&quot;, &quot;run&quot;, &quot;start&quot;]</span></code></pre>\n<p>Since the other two components, listener and frontend are also written in JavaScript the Dockerfile does not change at all for them too, for this particular example.</p>\n<p>The following is a two-liner Dockerfile for gateway. The conf file targets apiserver and frontend. Please have a look at the configuration file in the repository itself.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">FROM nginx</span>\n<span class=\"grvsc-line\">COPY ./nginx.conf /etc/nginx/conf.d/default.conf</span></code></pre>\n<p>The other 2 components :</p>\n<ul>\n<li>Mongodb has its image. We will leverage that while writing the docker-compose.</li>\n<li>SQS is emulated using softwaremill/elasticmq image.</li>\n</ul>\n<h3 id=\"action\" style=\"position:relative;\"><a href=\"#action\" aria-label=\"action 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>Action!</h3>\n<p>First things first, file version. Since it is all yaml out there, the file <code>version</code> tells docker-compose about the data structure. The data structure which is expected by docker \"compose\".</p>\n<p>so we start the docker-compose as</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">version: &#39;3&#39;</span></code></pre>\n<p>All the components in the docker-compose are known as <code>services</code>. Next, we are going to write some services. Yes, the services we have written for our business.</p>\n<p>Message Queue :</p>\n<p>The message queue shall use <code>softwaremill/elasticmq</code> image out of the box and the applications will access that on port 9324. The service description in docker-compose shall look like this.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">mqserver:</span>\n<span class=\"grvsc-line\">        image: softwaremill/elasticmq</span>\n<span class=\"grvsc-line\">        ports:</span>\n<span class=\"grvsc-line\">            - &#39;9324:9324&#39;</span></code></pre>\n<p>That is analogous to <code>docker run -it -p '9324:9324' softwaremill/elasticmq</code>.</p>\n<p>A bit more complicated service next, mongodb.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">mongodbdb: </span>\n<span class=\"grvsc-line\">        depends_on: </span>\n<span class=\"grvsc-line\">            - mqserver</span>\n<span class=\"grvsc-line\">        image: mongo</span>\n<span class=\"grvsc-line\">        container_name: mongo</span>\n<span class=\"grvsc-line\">        volumes:</span>\n<span class=\"grvsc-line\">            - /data/db:/mongodata</span>\n<span class=\"grvsc-line\">        ports:</span>\n<span class=\"grvsc-line\">            - &#39;27017:27017&#39;</span></code></pre>\n<p>There are a couple of things one may notice more here.</p>\n<p><code>depends_on</code> shall wait for the container of mqserver service to come up, before mongodbdb service goes on air.</p>\n<blockquote>\n<p>Docker is only liable to check the containers when we use depends_on, if you want to check whether your service (which you have embedded) is ready to use or not, use <code>healthcheck</code>and <code>link</code>.</p>\n</blockquote>\n<p>Apart from this, we are mounting a volume and exposing ports for an image mongo which gets pulled directly from the docker container registry. <code>container_name</code> will give the service a name, so that it can be discovered *in the network. *Kind of a domain name in the internal docker-compose network.</p>\n<p>Now the developer's proprietary API service:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">apiserver:</span>\n<span class=\"grvsc-line\">        restart: always</span>\n<span class=\"grvsc-line\">        depends_on: </span>\n<span class=\"grvsc-line\">            - mqserver</span>\n<span class=\"grvsc-line\">            - mongodbdb</span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\">        build:</span>\n<span class=\"grvsc-line\">            dockerfile: Dockerfile</span>\n<span class=\"grvsc-line\">            context: ../fs-express-api/.</span>\n<span class=\"grvsc-line\">        volumes:</span>\n<span class=\"grvsc-line\">            - /app/node_modules</span>\n<span class=\"grvsc-line\">        environment: </span>\n<span class=\"grvsc-line\">            - NODE_ENV=production</span>\n<span class=\"grvsc-line\">            - AWS_SQS_URL=http://mqserver:9324/</span>\n<span class=\"grvsc-line\">            - AWS_SQS_FQ_URL=http://mqserver:9324/queue/fsqueue</span>\n<span class=\"grvsc-line\">            - AWS_ACCESS_KEY=na</span>\n<span class=\"grvsc-line\">            - AWS_SECRET_ACCESS_KEY=na</span>\n<span class=\"grvsc-line\">            - AWS_REGION=REGION</span>\n<span class=\"grvsc-line\">            - QUEUE_NAME=fsqueue</span>\n<span class=\"grvsc-line\">            - MONGODB_CONNECTION=mongodb://mongo:27017/fsorder</span>\n<span class=\"grvsc-line\">            - API_APP_PORT=5000</span>\n<span class=\"grvsc-line\">        ports:</span>\n<span class=\"grvsc-line\">            - &#39;5000:5000&#39;</span></code></pre>\n<p>The <code>build</code>tag will be used by the <code>docker-compose build</code> command to build an image. The build is defined as Dockerfile and the context is docker context, the directory which you want to use as context. Equivalent to:  <code>docker build -f filename.</code></p>\n<p>The more you are seeing here is <em>environment</em> and <em>restart</em> options. Environment variables are used to set environment variables while running the image. This is another part where docker-compose comes handy. Think about setting all nine environment variables with <code>docker run</code>.</p>\n<p><code>restart</code> is a bit interesting. One may specify a restart policy if the application crashes, which leads to stopping the docker image itself. always specifies to restart the container if it exit.</p>\n<p>In the environment section, one can see mqserver and mongo, instead of the regular localhost and loopback address. This is because when we run docker-compose, it creates a DNS recordset of all the <code>services</code> mentioned. The services can be referred to by their names. A slight deviation here may happen when the container is explicitly named. Here, container_name = mongo is used for service mongodbdb. Hence, the other containers in the environment shall refer to it by mongo and not mongodbdb.</p>\n<p>The pollingmod and frontend services are quite the same.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">    pollingmod:</span>\n<span class=\"grvsc-line\">        restart: always</span>\n<span class=\"grvsc-line\">        depends_on: </span>\n<span class=\"grvsc-line\">            - mqserver</span>\n<span class=\"grvsc-line\">            - mongodbdb</span>\n<span class=\"grvsc-line\">        build:</span>\n<span class=\"grvsc-line\">            dockerfile: Dockerfile</span>\n<span class=\"grvsc-line\">            context: ../polling-mod/</span>\n<span class=\"grvsc-line\">        volumes:</span>\n<span class=\"grvsc-line\">            - /app/node_modules</span>\n<span class=\"grvsc-line\">        environment: </span>\n<span class=\"grvsc-line\">            - AWS_QUEUE_URL=http://mqserver:9324/queue/fsqueue</span>\n<span class=\"grvsc-line\">            - AWS_ACCESS_KEY=na</span>\n<span class=\"grvsc-line\">            - AWS_SECRET_ACCESS_KEY=na</span>\n<span class=\"grvsc-line\">            - AWS_REGION=REGION</span>\n<span class=\"grvsc-line\">            - MONGODB_CONNECTION=mongodb://mongo:27017/fsorder   </span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\">    frontend:</span>\n<span class=\"grvsc-line\">        build:</span>\n<span class=\"grvsc-line\">            dockerfile: Dockerfile</span>\n<span class=\"grvsc-line\">            context: ../fs-frontend</span>\n<span class=\"grvsc-line\">        volumes:</span>\n<span class=\"grvsc-line\">            - /app/node_modules</span>\n<span class=\"grvsc-line\">            - ../fs-frontend:/app</span>\n<span class=\"grvsc-line\">        stdin_open: true</span>\n<span class=\"grvsc-line\">        ports:</span>\n<span class=\"grvsc-line\">            - &#39;3000:3000&#39;</span></code></pre>\n<p>Finally, the gateway. So, a gateway is created on the front using Nginx to make the development production-grade. If you go through the gateway code you will find that the services are accessed by their name <code>frontend</code> and <code>apiserver</code>.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">upstream frontend{</span>\n<span class=\"grvsc-line\">    server frontend:3000;</span>\n<span class=\"grvsc-line\">}</span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\">upstream apiserver{</span>\n<span class=\"grvsc-line\">    server apiserver:5000;</span>\n<span class=\"grvsc-line\">}</span></code></pre>\n<p>The Nginx container opens port 80 to an external port 5500. The Nginx container keeps configuration where the user can see just one port 5500 from out of the system, everything else is gray.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 542px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 31.734317343173434%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABiElEQVQY02WQzS8DYRDGh15cXInPAwd3icTFwaEOzhJ/BGfh6uDg1JIWkTqIkJA4IYQmu91+0O272+622m6/Euwq8VVtmpR2x2zTC97kl3kO8z4zz4AoyrDmXIVUSrMpatyGiFAqlcCq5XK5WUVRZIlEAuPxeJ3AP5jEt6qq6PVyDuA4YcSzvQHJVBoYk+H+rtCZTCanDcOw67pup+Ypas7mcjkkGvl8HlsaLU2YxLemaSgIQScsLi1PcJx/lAxWFDUxL0eVua+vGlYqFaxWq2iaDcxkMphOp81oNIqMMZQkCWOxWFMTJummIc8HnECvw+X2DIbD8sz5BT/J88HZl9e3zwfdMHTjsfj2/lGkjWv0oaEoal1RlDpt3IQG1MnMOkOtZeiAoeGxHutOEYobFiUoPr227e4dD1x6Q31X3uvedddOP5lkW/F+USgQLW2l8PtDbujqHm/f3Dpoo0jtwWDY5vPdABnC2bkAh0cnoOWeIRAI7TNJvo1EJEZI/2CyKEak7OnZ5cIP/vFp9zeD8fcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"User to System\"\n        title=\"User to System\"\n        src=\"/static/75b7d55327e23abc1558b2172b80f0f0/c0388/UserToSystem.png\"\n        srcset=\"/static/75b7d55327e23abc1558b2172b80f0f0/c0388/UserToSystem.png 542w\"\n        sizes=\"(max-width: 542px) 100vw, 542px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>And this is, how it happens in the real world as well!</p>\n<p>Finally, we have docker-compose.yml. And following are simple commands which make life even simpler when we need to build and run &#x26; stop the entire ecosystem.</p>\n<p>To build</p>\n<p><code>docker-compose build</code></p>\n<p>To start</p>\n<p><code>docker-compose up</code></p>\n<p>To stop</p>\n<p><code>docker-compose down</code></p>\n<p>This scratches the surface of using docker-compose for a production-grade development environment.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 493px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 82.96146044624746%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAIAAABSJhvpAAAACXBIWXMAABJ0AAASdAHeZh94AAAD5klEQVQ4y2NgZmZesGBBfX19TU3NzJkzZ8yY0dLSAmS0trbGxcV1d3c3NjaWl5fX1tYC2UDBjo4OIHfatGkqKioMQABUlJiYGBYWVlpampKSAiSB0uHh4d7e3nl5eenp6QkJCf7+/kB2RkZGfn5+VlZWWlqakJAQSHNOTs78+fObm5snTJjQ0NAAdAWQGx0dDTQFaM+UKVP6+vqmT58OtADoqKKiosWLF2dnZzNAgJ2dLdBsNze3kJCQ9IwMF1eXqKgoNzdXX18foCWxsbFAa4F2AmW9vLxMTU0iIiK8vDwZGBgZMAETE0i0pqZu5oxZkyZO0tTQAAsyYVEqJsohKMzOI8jGxc/CKcjCJQgkWVWURNpba5oaq6urS3MKi9zc3ZzszX38/PSM9USl+EUkePlA6pkZvFwlTU0F1PQ5FfQ5pfXYJXRYxHW4nD01ZnTE71jRu3VR16GDW44f23Ll7JbHj68tXlQfEWmoYCAgp8OmoMfJ4G4vaGbEbmzEbmTKrW3MI6vNoWkkWpPmuqzcf1WJ6742v3mFnstndV68tG/hwqaSHENTSwEhOUYxBQZJdWYGNzsOVxsOL0d+Z0cBGztBPTP+tliV47Vmh3uD1tf6nOp2v9DlML8qorTcPyBMTMuIRVSBWUiKQd5M0CbVnMHHiT3Mkz/cVzTAT9TDUyQ6Qu9Iu/3+apW9rRbnZ0btKPFaGmC9vT2xMM9JxZRTWo1LWIZByUY8flJi3bYmhkAPnkh/4eggUX8f3uxsmwub2t/vr9vT4dgVpby6NKTQzLzW0XxuqXd+sp2kKju/OIOCtVja3MxJp6bnLy9iCAsQjAmTjI6Ubm8NOHJg0ePDM47PTLg9v2xdU05ndvyS1Mw6d6cFWalz6tJUDATlDISiJydOuzCn83CfS5YRQ1ykWFKMTGWV88UTy2+dWXd46+R1c8uPLOh7vHrTorbCSZURvWmuszKTd/Z07tiybNvh9Xsvb154eWnMlDAdKxaGlBjJ5GjpmiqPSW0BjWVOmQF8k1qCdm7oX1QZUZdm1V/jPLnCb2Vf3M6VTXt2Lzl3Zuutq6c3XtxoGSWnb8bKEBsilhAmFRssEerP5+bJ4uXB4WzLHuHHt2JG3o5lDUc39e5Y3T27LyMpkq+rO3Xv3nWTVzcnTo3Utec1cRJg8PUUCPASCPYVDPATiIxQSIpWN9RlcLLlqc8zW9Id3l5l3Zlv1NUS6ODJ7BrEl1hl33yg1zXLWNeGz9xDgsHWls/Gls3FmcvVjT0hRnlBY6y7s6iTBXeIG0+AP4u7B2NAIJt/HJODJ0dci2vLvp6cJbmmXsLm7hLW3tIAw+9kFKCGTbYAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"No Animals Harmed\"\n        title=\"No Animals Harmed\"\n        src=\"/static/ce6bb0b0f93199d6510e41916aebfbe2/f88d0/noanimalsharmed.png\"\n        srcset=\"/static/ce6bb0b0f93199d6510e41916aebfbe2/f88d0/noanimalsharmed.png 493w\"\n        sizes=\"(max-width: 493px) 100vw, 493px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Thanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:</p>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/G-s2GXGAjTk\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\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</style>","frontmatter":{"date":"September 11, 2020","updated_date":null,"description":null,"title":"Production Grade Development using Docker-Compose","tags":["Docker","Docker-compose"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a4a816f26fe017e3244b736c0cbee474/ee604/index.png","srcSet":"/static/a4a816f26fe017e3244b736c0cbee474/69585/index.png 200w,\n/static/a4a816f26fe017e3244b736c0cbee474/497c6/index.png 400w,\n/static/a4a816f26fe017e3244b736c0cbee474/ee604/index.png 800w,\n/static/a4a816f26fe017e3244b736c0cbee474/f3583/index.png 1200w,\n/static/a4a816f26fe017e3244b736c0cbee474/5707d/index.png 1600w,\n/static/a4a816f26fe017e3244b736c0cbee474/eeb1b/index.png 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anurag Choudhary","github":"choudharyanurag","avatar":null}}}},{"node":{"excerpt":"Single Sign-on (or SSO) is a unique authentication method that allows users to access multiple applications with a single set of credentials…","fields":{"slug":"/identity/best-sso-providers-loginradius/"},"html":"<p>Single Sign-on (or SSO) is a unique authentication method that allows users to access multiple applications with a single set of credentials, like a username and password. </p>\n<p>SSO products are usually designed to simplify the verification process and create a seamless environment when accessing multiple apps, portals, and servers.</p>\n<p>Off late, SSO tools have become an integral part of enterprises' and developers' security landscape. </p>\n<p>Simply put, these implementations have entirely removed the need for users to enter their login credentials for individual applications. Alternatively, users sign in once, and the interface sends the necessary credentials to the assigned systems through various proxies and agents. </p>\n<p>Usually, identity providers offer SSO as part of their security access protocol. These platforms aren't similar, and the decision to choose the right one should be taken with professional advice.</p>\n<p>LoginRadius offers the ability to serve a broad range of users to cover everyone in an organization and beyond.</p>\n<p>We will breakdown the key features that make LoginRadius a highly rated SSO solution <a href=\"https://www.loginradius.com/single-sign-on/\">in its space</a> and discuss the implementation process later in this blog. </p>\n<p>But first, there are a few things you need to know.</p>\n<h2 id=\"importance-of-single-sign-on\" style=\"position:relative;\"><a href=\"#importance-of-single-sign-on\" aria-label=\"importance of single sign on 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>Importance of Single Sign-On </h2>\n<p><a href=\"https://www.loginradius.com/blog/2019/05/what-is-single-sign-on/\">Single Sign-On</a> is the perfect fit for organizations that want to reduce their data protection vulnerabilities, improve consumer experiences, and streamline processes for identity management and log in.</p>\n<p>What else makes single sign-on the best choice for your enterprise? Let's find out.</p>\n<h3 id=\"sso-offers-greater-security\" style=\"position:relative;\"><a href=\"#sso-offers-greater-security\" aria-label=\"sso offers greater security 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>SSO offers greater security.</h3>\n<p>According to a <a href=\"http://services.google.com/fh/files/blogs/google_security_infographic.pdf\">survey by Google</a>, 53% of users still reuse the same password for multiple accounts. Therefore, reducing login to a single set of credentials is a good start in reducing the attackers' surface area. Because users log in only once, there are lesser opportunities for mistakes. </p>\n<p>Enterprises can also go the extra mile with techniques such as two-factor authentication (2FA) and multifactor authentication (MFA). </p>\n<h3 id=\"sso-helps-with-regulatory-compliance\" style=\"position:relative;\"><a href=\"#sso-helps-with-regulatory-compliance\" aria-label=\"sso helps with regulatory compliance 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>SSO helps with regulatory compliance.</h3>\n<p>Regulations like HIPAA require users to authenticate before they are allowed to access electronic records along with options like automatic log-off and audit controls to track user access. </p>\n<p>SSO makes these requirements around data access and control at the granular level. It also <a href=\"https://www.loginradius.com/blog/2019/06/enterprise-single-sign-on-authentication/\">allows enterprises</a> and developers to comply with regulations that require provisioning and deprovisioning users. </p>\n<h3 id=\"sso-saves-time\" style=\"position:relative;\"><a href=\"#sso-saves-time\" aria-label=\"sso saves time 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>SSO saves time.</h3>\n<p>Because users need not remember multiple credentials for multiple logins anymore, it definitely saves time and improves productivity. Also, remembering one password instead of many miraculously reduces <a href=\"https://www.loginradius.com/blog/2018/12/infographic-the-death-of-passwords/\">password fatigue</a>. More so, it gives users the perfect opportunity to come up with even stronger passwords. </p>\n<h3 id=\"sso-lowers-it-costs\" style=\"position:relative;\"><a href=\"#sso-lowers-it-costs\" aria-label=\"sso lowers it costs 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>SSO lowers IT costs.</h3>\n<p>This one is interlinked. When there are lesser passwords to remember, there will be even lesser chances of users forgetting them—leading to a reduced number of reset help tickets. This will reduce the need for IT involvement and lower IT costs.</p>\n<h2 id=\"top-5-feature-of-the-best-single-sign-on-solutions-provider\" style=\"position:relative;\"><a href=\"#top-5-feature-of-the-best-single-sign-on-solutions-provider\" aria-label=\"top 5 feature of the best single sign on solutions provider 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>Top 5 Feature of the Best Single Sign-on Solutions Provider</h2>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 60.61538461538461%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsSAAALEgHS3X78AAABbUlEQVQoz41SbU/CMBDeB13boSZAjHyRKMne2lHm0Ejoxti6jeFA8Av//6d43YAgQWNy2a7Xe+6e3nMascLfDHsZopIwSbyM2DNiibME7eBFB6uPpsBebrD0lsbEjghNyTBXzgUwVHVi9W2uTUHcue4mvaCgcnftr0iwhogqYYqLnU8MMmiqO3H/vRpE29Z4jYYL4swU/3+BnVhnWZenT9NPzHIVASQ0vwA2hWGHNWehrsH3MszLlifv6BzXr8B+RWhCzCmkYYUUDViRRCwDg/HuZ+PGamZuoiJwhCCUZhKPyhYvbkYlXCkw/Aye9ycreGFnlOu8VHkNvSNJUzRTBAkGYsPkrvO2RlakISbbXD6H20fx1eG1sKeSOCcSQH++wJPdw3jZDpbInilw1y96r8srv0Je/kNPcICeMz/uAvY/8EsFFBBTaZpSmBf3wcKgKQZJzvQ4dm6a27VgbL9w2l4YWu8gTf7Y1nM5rfAb3jdsYg20hrIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Best SSO Providers\"\n        title=\"Best SSO Providers\"\n        src=\"/static/cc52b28b2aae5ddac81bd9c04a568ba4/e5715/Best-SSO-Providers.png\"\n        srcset=\"/static/cc52b28b2aae5ddac81bd9c04a568ba4/a6d36/Best-SSO-Providers.png 650w,\n/static/cc52b28b2aae5ddac81bd9c04a568ba4/e5715/Best-SSO-Providers.png 768w,\n/static/cc52b28b2aae5ddac81bd9c04a568ba4/2bef9/Best-SSO-Providers.png 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Looking for factors to consider when selecting an SSO solution. The following are the top five. </p>\n<h3 id=\"1-customizable-user-experience\" style=\"position:relative;\"><a href=\"#1-customizable-user-experience\" aria-label=\"1 customizable user 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>1. Customizable user experience</h3>\n<p>A good single sign-on solution will let you customize the user experience. For instance, it will let you transform your login page into something that resonates with your corporate branding. </p>\n<p>Apart from the flexible appearance, it will help you make adjustments to your security practices as well. You should be able to add various authentication factors at your discretion.</p>\n<h3 id=\"2-reliability\" style=\"position:relative;\"><a href=\"#2-reliability\" aria-label=\"2 reliability 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. Reliability</h3>\n<p>You need to ensure that your single sign-on solution offers everything that your company requires (including access to certain custom applications)—however, it takes experience to ascertain the same. Yet, look for options that provide <a href=\"https://www.loginradius.com/blog/2018/08/23-months-since-our-last-incident/\">100% uptime</a> and the tools to monitor usage in realtime. </p>\n<h3 id=\"3-authentication-via-saml\" style=\"position:relative;\"><a href=\"#3-authentication-via-saml\" aria-label=\"3 authentication via saml 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. Authentication via SAML</h3>\n<p>Given its growing popularity in web applications, any feasible SSO provider should support SAML authentication for applications at a fundamental level.</p>\n<p>SAML (or Security Assertion Markup Language) allows users to authenticate to web applications without passwords. This authentication approach centralizes and simplifies their login process. It is much better than entering passwords for each application because the end-users no longer enters credentials across third-party websites. </p>\n<h3 id=\"4-multi-factor-authentication-mfa\" style=\"position:relative;\"><a href=\"#4-multi-factor-authentication-mfa\" aria-label=\"4 multi factor authentication mfa 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. Multi-Factor Authentication (MFA)</h3>\n<p>You should also ensure that your MFA solution enables <a href=\"https://www.loginradius.com/blog/2019/06/what-is-multi-factor-authentication/\">multi factor authentication</a> too. It is one of the security expert's favorite tools to dodge majority data breaches— more than implementing password complexity or expiration requirements. </p>\n<p>Another primary requirement of MFA in SSO is because end-users access all their applications through a single portal, it is critical that the portal should be closely guarded for security.</p>\n<h3 id=\"5-testing\" style=\"position:relative;\"><a href=\"#5-testing\" aria-label=\"5 testing 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. Testing</h3>\n<p>Though not an unconditional necessity, it is a good gesture if the SSO solutions offer free trials. It will be a lot easier if you get to assess a solution by testing if it is the right solution. Therefore, make it a point to ask for free trials, if possible. </p>\n<h2 id=\"why-loginradius-is-the-best-sso-solution-provider-for-developers-and-businesses\" style=\"position:relative;\"><a href=\"#why-loginradius-is-the-best-sso-solution-provider-for-developers-and-businesses\" aria-label=\"why loginradius is the best sso solution provider for developers and businesses 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>Why LoginRadius Is the Best SSO Solution Provider for Developers and Businesses</h2>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 60.61538461538461%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsSAAALEgHS3X78AAABXUlEQVQoz4VRa2/CMAzs//9f2z6jTQLGNkBA2/VFkuYdJ5nb0hKmSbOiRnV89t05i3NAiMaHEB8ijOf+G6LD42+5bLoshIrbnLurhvgISFsI57d5V/bG+RE8ZZkNRUv3DSsEto7gAzNQcHtiRli/UKul+6jZF9FqqJonGx/PV152rFbQqmF+q+BI9P6qVt+iFq63nmjg1jcKKukeaA/MQ5QD5dhpYMquL822YojcNPK1xvG/pCTg9IVZz5V5K+mmM0/nftfJA9Gp8sXVLHVlihbpabM+li/vl+dd8dmIU28X2QruldkEowaoBuk8+oSuEOMpl+tjXlHRyMECfEVGSL/tZStvIgYw0Q6LCgEHajQMaQUe8RwiftWY8aPVZUdr0hOh+3EFAxgb78tm9Xk+EZnyD7O42zqNF8aVwqHbcgFj64qbnHA+r/QPZ8flEwM46TrRS9328f9AKpDU/QDOHbyXN5sOeQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Best SSO Providers 2\"\n        title=\"Best SSO Providers 2\"\n        src=\"/static/037bf8526f80f5d4c889294c39f94a25/e5715/Best-SSO-Providers-2.png\"\n        srcset=\"/static/037bf8526f80f5d4c889294c39f94a25/a6d36/Best-SSO-Providers-2.png 650w,\n/static/037bf8526f80f5d4c889294c39f94a25/e5715/Best-SSO-Providers-2.png 768w,\n/static/037bf8526f80f5d4c889294c39f94a25/2bef9/Best-SSO-Providers-2.png 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>LoginRadius goes beyond a single sign-on solution with its broader consumer identity and access management functions, but it is an excellent platform for SSO nonetheless. </p>\n<p>With its simple-to-use one-click access, it works great for small to large-scale, consumer-facing deployment. The added 2FA/MFA security protects data—both in-house and consumers.</p>\n<p>The LoginRadius Identity Platform offers SSO in the following ways:</p>\n<ul>\n<li><strong>Web SSO</strong>: LoginRadius offers browser-based session management when the SSO is required between two or more web applications. It uses localStorage, cookies, and similar storage mechanism to maintain the user's session across applications. To execute the authentication, a centralized domain operated by LoginRadius IDX is used.</li>\n<li><strong>Mobile SSO</strong>: After logging into an application, the user can log in across multiple apps without the need for multiple passwords. It works by storing the LoginRadius access token in a shared session. It enables you to identify a currently active session and utilize the data to configure the user account in successive applications. </li>\n<li><strong>Federated SSO</strong>: Login also helps you implement SSO with third-party applications. It is done through <a href=\"https://www.loginradius.com/federated-sso/\">federated SSO</a>. LoginRadius Identity Platform supports all major industry single sign-on protocols like SAML, JWT, OAuth, and OpenID SSO protocols for interaction with various third-party web applications.</li>\n<li><strong>Custom IDPs</strong>: Consider this as Social Login. Custom IDPs are used to configure a Social Login provider that is not available in the default list of providers by LoginRadius. You can use any external database to authenticate your application users. </li>\n</ul>\n<p>Here is how the LoginRadius SSO benefits developers and businesses. </p>\n<h3 id=\"single-sign-on-for-developers\" style=\"position:relative;\"><a href=\"#single-sign-on-for-developers\" aria-label=\"single sign on for developers 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>Single Sign-On for Developers</h3>\n<p>The LoginRadius Single Sign-On takes the authentication load off web app developers, as the end-user authentication functionality is transferred outside the app. </p>\n<p>Another good reason for developers to shift to LoginRadius is they can embed SSO with LoginRadius. This comprehensive digital identity feature can be implemented with <a href=\"https://www.loginradius.com/blog/2019/12/identity-as-a-service-for-business/\">Identity-as-a-Service (IDaaS)</a>.</p>\n<p>Because developers need not focus on complex authentication anymore, it (kind of) gives the liberty to work on other functions of the application.</p>\n<p><a href=\"https://www.loginradius.com/resource/loginradius-single-sign-on/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgUlEQVQY01VQv0tCYRR9LflMMbUIs9RELTVfEfoe+vzJszT7RRGF4FqDDQ0tQgUNBRkEDf0DbQ3VEIUQUUFDBLU0FBGUNVYuQs6n73ui0QeHey/fueeeexlldwgUTT1hqJ0RGSqSK7uDUDqCqP1TsA4RTb0SdPwE9JwEpVsC64zWeSyJDE1UzjBae2NotgegtgWgdUVh9A6jfSABjSsiEylPYfNDxQ3BHM/AHZ8Fy09BwSXAkj7WUR3K1KZbhRSEZBqeyCS0xKGGS6JNTEPjjkFBBOkGHcIIugLjMBGukU/BTGqLfwwmAsqTHdam94QmII5mwBNRO2kw+VKwhmag80h1hzTqyKoGHxUcgYFs0dI/+O8sssNGm4ijwiU+v77x9PyC1+I73oofKJVKCE/PgzHzaLAIWFzbxt3DI/aPz7B3cEJwiqubexwWLqDvixOdwJ/g+fUt6CuXy6hUfggqci2ls2A6vTKZ5rnNXSysbiG7kkd2OY+l9R3M5Taqp7GL+AU1kd8S931D/gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"LoginRadius Single Sign-on Datasheet\"\n        title=\"LoginRadius Single Sign-on Datasheet\"\n        src=\"/static/41cc8ea16144a85f22b499da107c16bf/e5715/DS-LoginRadius-Single-Sign-on.png\"\n        srcset=\"/static/41cc8ea16144a85f22b499da107c16bf/a6d36/DS-LoginRadius-Single-Sign-on.png 650w,\n/static/41cc8ea16144a85f22b499da107c16bf/e5715/DS-LoginRadius-Single-Sign-on.png 768w,\n/static/41cc8ea16144a85f22b499da107c16bf/2bef9/DS-LoginRadius-Single-Sign-on.png 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<h3 id=\"single-sign-on-for-enterprise\" style=\"position:relative;\"><a href=\"#single-sign-on-for-enterprise\" aria-label=\"single sign on for enterprise 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>Single Sign-On for Enterprise</h3>\n<p>Why should any enterprise invest in the LoginRadius SSO? We have three main factors that will motivate your decision.</p>\n<ol>\n<li><strong>Reinforce security with stronger authentication</strong>: You can control your enterprise's access efficiently by deploying the LoginRadius SSO in all parts of your work station. For example, in the top management systems, doctors' access to patient records, video surveillance desk with access to personal data, operator with access rights to bills, front office trader working on a cluster of workstations, and more. LoginRadius offers multiple authentication types, including SMS-based, email-based, and others.</li>\n<li> <strong>Reduce help desk costs</strong>: According to <a href=\"https://www.gartner.com/en\">research by Gartner</a>, 20% to 50% of all help desk calls are for password resets. Therefore, handling application password constraints should do the trick. With the LoginRadius SSO tool in place, the hidden help desk cost is considerably reduced. </li>\n<li><strong>Open up information without risk</strong>: Let's explain this benefit with a use case. For example, one of your employees is on a business trip. That person must bring a specially configured PC to use the intranet applications. To overcome these reservations, SSO will allow the user to access your internal web applications from any browser securely. This is really useful as it makes your employees extremely independent.</li>\n</ol>\n<h2 id=\"why-loginradius-sso-solution-is-better-than-its-competitors\" style=\"position:relative;\"><a href=\"#why-loginradius-sso-solution-is-better-than-its-competitors\" aria-label=\"why loginradius sso solution is better than its competitors 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>Why LoginRadius SSO Solution Is Better Than Its Competitors</h2>\n<p>LoginRadius guarantees unparalleled uptime 99.99% every month. The cloud-based identity provider manages 180K logins per second, 20 times more than its major competitors!</p>\n<p>Apart from delivering the industry's best consumer, the following are a few ways where the platform excels compared to its competitors.</p>\n<ul>\n<li><strong>Autoscalable infrastructure</strong>: The platform offers an auto-scalable infrastructure to handle surges during daily and seasonal peak loads. It automatically accommodates data storage, account creation, consumer authentication, new applications, and more.</li>\n<li><strong>Scalability</strong>: LoginRadius ensures that it accommodates your continually growing consumer base. The even better part is, there are no limitations to the number of users. Also, the LoginRadius Cloud Directory scales automatically to handle incremental data every time—in realtime. It has the ability to autoscale and handle hundreds of applications.</li>\n<li><strong>Globally compliant</strong>: The LoginRadius platform also complies with major global compliances like the GDPR, CCPA, etc. You can keep track of your consumers, manage preferences, and customize the kind of <a href=\"https://www.loginradius.com/blog/identity/consumer-data-privacy-security/\">consent consumers want</a>. </li>\n<li><strong>Security Certifications</strong>: LoginRadius is compliant with <a href=\"https://www.loginradius.com/compliances-list/\">international regulatory bodies</a> like AICPA SOC 2, ISAE 3000, Cloud Security Alliance, Privacy Shield, and more.</li>\n</ul>\n<p>So far, so good? </p>\n<p>Willing to try out the LoginRadius SSO for your business? You can register for a free account here.</p>\n<h2 id=\"how-to-configure-single-sign-on-with-loginradius\" style=\"position:relative;\"><a href=\"#how-to-configure-single-sign-on-with-loginradius\" aria-label=\"how to configure single sign on with 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>How to Configure Single Sign-On With LoginRadius</h2>\n<p>Here is the step-by-step guide on configuring Web Single Sign-On with LoginRadius.</p>\n<p><strong>Step 1:</strong> Log in to the LoginRadius Admin Console account. Navigate to Deployment and click on Apps.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 46.61538461538461%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbElEQVQoz32R60rDQBCF84wiCCIV38bnEWmr/4v6T1SQ3m+kF9s02Vuy2aQ5ziStbUFdOMzMsvvN2VlvNvxA++0J3fdnfL62sFzMoaI1EiORZRmcc/8qTVNYa8uYJAm8RvMRl1c11K5vcHZ+gWb9HnLZxsrvQSoNISVFBa01jDHQJEU514r2szxHURTgxWBP02YUhnRA0UZSdUwdTByXl1hpWjk4duVcWsacgEAF5NrbX4oJwJZZkRAINhtsqJFjB3R4Wxy0r6tYIKcip2gtAfkZDIlZJdRiJmIMVhKjjUY/svCVw8JkmOtfZCo9jBSGgT4CEmzvchoadL4EugTtrA16ocVIOkxVhoniWOk4v+tL9NZ/AP0oRp9ggzW5DChS5yG5nVCjMWkiLMbUYHbktDFU5bkTYMJQyusDiduXFVp+XA6bZ5Tl24O2rN3sdsq2QHIywx2Q80AozAOBUKjy9/n3fhYNvyDg6Tr88jcZSK5fzTpWvgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Best SSO Providers 3\"\n        title=\"Best SSO Providers 3\"\n        src=\"/static/74d7213124cf165f890e4b357df64839/e5715/Best-SSO-Providers-3.png\"\n        srcset=\"/static/74d7213124cf165f890e4b357df64839/a6d36/Best-SSO-Providers-3.png 650w,\n/static/74d7213124cf165f890e4b357df64839/e5715/Best-SSO-Providers-3.png 768w,\n/static/74d7213124cf165f890e4b357df64839/2bef9/Best-SSO-Providers-3.png 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><strong>Step 2:</strong> Under the Production Website URL, add the domains you want to implement your Web SSO. There is an Add New Site button at the bottom. Click on it to add the domains. </p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.92307692307693%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABnklEQVQoz5WRy07bQBSG80JJdiE3EsSCXZdZdJdu8g59l75ItkXqhoY9GEKw6wYCvs14xvZc/HNsXC5SsqilT791Zs6nX5rWeDzCdNzHZHSE05Mxjkc9nBwPMP3yFWffvmM0PcVRr4fJZILhcIh+v4/BYIBut4t2u41Op/OJltYKPN5h693hwd/Av3fA4hBFoVBag//5yrJEi3GO1WqFxWKB+XyO2WyG5XIJnqZ4DgJU50nC6kxplqYCnKf1fzWTMoMlkbUW2hi0wjCkCxxVJklCFyTyPK8RQkDQoqRUShFFkw1FAU1J1ZqG9l1YiSqyLIMkEsYRRDEiaqdsCUM7e7GApvNMW2TqQ8Na9EHqRxK3O4b1s8BtkMGNcrhxRQGXafjcNGjshMEvP8PlVh4S5vBCietHRlIO50nW0nuSbki4STQ89s5DavDTk7j4Kw839EIBh4Q3T2ktW8e0/NbK4E9DJXykhuck/L1XSJlJAT+IsSaZE+S4iV6buOxzs3+zbdNwr/A1Bc4dFz8uNrjaxajesKAXUIegRxHKQhQGL+aEzzh7WH2ZAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Best SSO Provider 4\"\n        title=\"Best SSO Provider 4\"\n        src=\"/static/481bd0382ecc2f9a2e3bac9f3bf97ba9/e5715/Best-SSO-Provider-4.png\"\n        srcset=\"/static/481bd0382ecc2f9a2e3bac9f3bf97ba9/a6d36/Best-SSO-Provider-4.png 650w,\n/static/481bd0382ecc2f9a2e3bac9f3bf97ba9/e5715/Best-SSO-Provider-4.png 768w,\n/static/481bd0382ecc2f9a2e3bac9f3bf97ba9/2bef9/Best-SSO-Provider-4.png 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></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>Single Sign-On clearly improves consumer experience and boosts productivity by a considerable margin.</p>\n<p>By implementing the benefits of the LoginRadius SSO as a unified solution, you increase business agility, security, convenient and streamlined experience for your business and consumers alike. And, that's awesome! </p>\n<p><a href=\"https://www.loginradius.com/book-a-demo/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbElEQVQY0zVQO0/CUBQmaihthUbRhPhCAlhKEXlE3s+CCEaBwQF10riQODkwaFyMMcTFwR9gjBvRSeKko4NxcfD/fJ57C8PJbc53+r0soj8Lm5qHbS0HW6AIwZ+DXSvAESxBpJ3MMLph3+xWDlUwm2jCGa5A0isQtRIkhrH/CbdwwkDBHAJlGodexsy6wUkduknMBCfdmxCCBhZKHailfUxGm5jQKphaTUDwmaIWdigyF1oZsm7AFavBRspKuMpdTJMQO5yLbCHVPkG0cYRY4xAR9tbp3T5AsnUMT7YFqzdtOuQOSFmiyMupXUihKuzk0hWvc0xgUYlYod18tAZPrg13eg8rNIuJHSihMtVUHEUe51cLPJ5zo8oJJRJQRnHlQB6WpTjOru7w/fuH59d3PL0M8Th4w+fXDwbDD16R1ZsxCcelsyUbidQEEuC9ECap1J8nCaPTRe/2Ad3LvjkXfZxf3+O0d8P7FnwZ/AMzEsMp2f6LdQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"book-a-free-demo-loginradius\"\n        title=\"book-a-free-demo-loginradius\"\n        src=\"/static/779ad148d33fb1ecfd80cc41f1a94ef3/e5715/Book-a-free-demo-request-1024x310.png\"\n        srcset=\"/static/779ad148d33fb1ecfd80cc41f1a94ef3/a6d36/Book-a-free-demo-request-1024x310.png 650w,\n/static/779ad148d33fb1ecfd80cc41f1a94ef3/e5715/Book-a-free-demo-request-1024x310.png 768w,\n/static/779ad148d33fb1ecfd80cc41f1a94ef3/2bef9/Book-a-free-demo-request-1024x310.png 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></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":"September 11, 2020","updated_date":null,"description":"A unique authentication mechanism that allows users to access several programmes with a single set of credentials, such as a username and password, is Single Sign-on (or SSO).","title":"Best SSO Provider: Why LoginRadius Is Considered As The Best SSO Solution","tags":["sso provider","compliance","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4598540145985401,"src":"/static/de3333685212045a2cfa96ca4e977f64/14b42/best-sso-provider.jpg","srcSet":"/static/de3333685212045a2cfa96ca4e977f64/f836f/best-sso-provider.jpg 200w,\n/static/de3333685212045a2cfa96ca4e977f64/2244e/best-sso-provider.jpg 400w,\n/static/de3333685212045a2cfa96ca4e977f64/14b42/best-sso-provider.jpg 800w,\n/static/de3333685212045a2cfa96ca4e977f64/16310/best-sso-provider.jpg 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be…","fields":{"slug":"/engineering/adding-multi-threading-to-javascript-using-web-workers/"},"html":"<p>In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be performed at the same time by applications. It is helpful to consider the importance of web staff as an example of how humans benefit from parallel tasks.</p>\n<p>Web workers give us the ability to write multi-threaded Javascript that doesn't block the DOM. To some extent, even asynchronous operations block the DOM. On the other hand, Web employees help us solve this problem, escape from the single-threaded world, and achieve higher <a href=\"https://www.loginradius.com/blog/engineering/16-javascript-hacks-for-optimization/\">performance on our web pages</a>.</p>\n<h2 id=\"what-are-web-workers-in-js\" style=\"position:relative;\"><a href=\"#what-are-web-workers-in-js\" aria-label=\"what are web workers in js 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 are web workers in JS?</h2>\n<p>Web Workers are a simple means of running scripts in background threads for web content. Without interfering with the user interface, the worker thread may perform tasks.</p>\n<p>Furthermore, they can use XMLHttpRequest to perform I/O (although the responseXML and channel attributes are always null) or fetch (with no such restrictions). Once created, by posting messages to an event handler defined by that code, a worker can send messages to the JavaScript code that made it (and vice versa).</p>\n<h2 id=\"why-use-javascript-web-workers\" style=\"position:relative;\"><a href=\"#why-use-javascript-web-workers\" aria-label=\"why use javascript web workers 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>Why Use JavaScript Web Workers?</h2>\n<p>Web workers let you build background threads separate from the main execution thread, where the logic of the user interface is usually executed. </p>\n<p>The key benefit of this separation of workload is that inside an isolated thread and without interrupting or impacting the main thread's responsiveness and usability, you can perform costly operations.</p>\n<p>When the background thread completes its mission, the main thread is informed of the results seamlessly via an event handled by standard <a href=\"https://www.loginradius.com/blog/engineering/understanding-event-loop/\">JavaScript event handling</a>.</p>\n<h2 id=\"setting-up-web-workers--multi-threading-to-javascript\" style=\"position:relative;\"><a href=\"#setting-up-web-workers--multi-threading-to-javascript\" aria-label=\"setting up web workers  multi threading to javascript 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>Setting Up Web Workers &#x26; Multi-threading to JavaScript</h2>\n<h3 id=\"step-1-create-a-project-folder-and-add-indexhtml-in-the-root-of-it\" style=\"position:relative;\"><a href=\"#step-1-create-a-project-folder-and-add-indexhtml-in-the-root-of-it\" aria-label=\"step 1 create a project folder and add indexhtml in the root of it 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: Create a project folder and add index.html in the root of it.</h3>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"0\"><code class=\"grvsc-code\"><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=\"mtk1\"> </span><span class=\"mtk12\">lang</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;en&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\">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\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">charset</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;UTF-8&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">name</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;viewport&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">content</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;width=device-width, initial-scale=1.0&quot;</span><span class=\"mtk1\"> </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\">Club JavaScripters</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\">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\">button</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Can you click me?</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">h2</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Let&#39;s do the party. 👯‍♂️‍</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h2</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">ul</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;club&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">ul</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">script</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;./main.js&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">script</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>We just created a simple HTML page with a link to our javascript file which we will create in a moment.</p>\n<h3 id=\"step-2-lets-add-our-javascript-code-in-two-separate-files-mainjs-and-workerjs-in-the-same-folder\" style=\"position:relative;\"><a href=\"#step-2-lets-add-our-javascript-code-in-two-separate-files-mainjs-and-workerjs-in-the-same-folder\" aria-label=\"step 2 lets add our javascript code in two separate files mainjs and workerjs in the same folder 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: Let's add our JavaScript code in two separate files, <code>main.js</code> and <code>worker.js</code> in the same folder.</h3>\n<p><code>main.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">persons</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=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hriday&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hridayesh&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">false</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 class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Bob&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Daisy&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Our club container</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">club</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;club&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">worker</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\"> * Function entry allows entry to people coming to our club</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\"> */</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">entry</span><span class=\"mtk1\">(</span><span class=\"mtk12\">persons</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">persons</span><span class=\"mtk1\">.</span><span class=\"mtk11\">forEach</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</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=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">, </span><span class=\"mtk12\">name</span><span class=\"mtk1\"> } = </span><span class=\"mtk12\">person</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createElement</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;li&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">.</span><span class=\"mtk12\">textContent</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// if a person is not registered, register them first</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// create a new worker thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">worker</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Worker</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;worker.js&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// pass data to worker thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">worker</span><span class=\"mtk1\">.</span><span class=\"mtk11\">postMessage</span><span class=\"mtk1\">(</span><span class=\"mtk12\">name</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// listen to any data passed from worker thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">worker</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;message&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">event</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=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">event</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 class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</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 class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// if they are registered let them in</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</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=\"mtk11\">entry</span><span class=\"mtk1\">(</span><span class=\"mtk12\">persons</span><span class=\"mtk1\">)</span></span></code></pre>\n<p><code>worker.js</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\">// addEventListener is directly accessible in worker file</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;message&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">event</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=\"mtk3\">// extract person passed from main thread from event object</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">person</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk12\">data</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</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\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">member</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// generating membership card takes some amount of time</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">i</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">0</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">while</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">i</span><span class=\"mtk1\"> &lt; </span><span class=\"mtk10\">Math</span><span class=\"mtk1\">.</span><span class=\"mtk11\">pow</span><span class=\"mtk1\">(</span><span class=\"mtk7\">10</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\">i</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=\"mtk3\">// send result back to the main thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">postMessage</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=\"mtk11\">close</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"step-3-on-to-some-explanations-about-what-just-happened\" style=\"position:relative;\"><a href=\"#step-3-on-to-some-explanations-about-what-just-happened\" aria-label=\"step 3 on to some explanations about what just happened 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: On to some Explanations about what just happened.</h3>\n<p>Now, the problem I faced when I went to the club with Hriday was that I (and everyone else after me) had to wait for my registration process to complete. We don't want that to happen to our virtual club and therefore we added one more person (thread) who is in charge of the whole registration process. Once registration is done, he will tell the main guy(thread) to let the new person in.</p>\n<h3 id=\"heres-what-we-did-to-solve-it-in-our-code\" style=\"position:relative;\"><a href=\"#heres-what-we-did-to-solve-it-in-our-code\" aria-label=\"heres what we did to solve it in our code 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>Here's what we did to solve it in our code.</h3>\n<ol>\n<li>First of all we check for each person if they are a member or not. If they are, we let them in.</li>\n<li>If someone is not a member of the club yet, we create a worker thread for it using <code>new Worker('path to worker code')</code> and pass that person to the worker thread using <code>worker.postMessage()</code> and add the person as a member after registering them.</li>\n<li>To simulate the registration process we are doing some processing using a long <code>while</code> loop. In real life this could be some cryptographic code, image processing or anything that is CPU intensive and might block the main thread and make the page unresponsive.</li>\n<li>Once registered, the worker thread let's the main thread know about it by sending data using <code>postMessage</code> and the main thread listens for it using <code>onmessage handler</code> and lets the person in the club i.e add to DOM.</li>\n<li>Once we get the result from the worker thread, we close it using <code>close()</code>.</li>\n</ol>\n<h2 id=\"web-workers-faqs\" style=\"position:relative;\"><a href=\"#web-workers-faqs\" aria-label=\"web workers faqs 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>Web Workers FAQs</h2>\n<h3 id=\"how-do-the-main-thread-and-worker-threads-talk-to-each-other\" style=\"position:relative;\"><a href=\"#how-do-the-main-thread-and-worker-threads-talk-to-each-other\" aria-label=\"how do the main thread and worker threads talk to each other 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>How do the main thread and worker threads talk to each other?</h3>\n<p>They talk to each other by message passing. Both workers and the main thread use <code>postMessage</code> to send data to each other and <code>onmessage</code> event handler to get data. The data is available inside the event's data property.\nYou can only pass one argument to <code>postMessage</code>. If you wish to pass multiple arguments use an <code>object</code> instead.</p>\n<h3 id=\"can-i-update-dom-in-a-worker-thread-or-access-window-object\" style=\"position:relative;\"><a href=\"#can-i-update-dom-in-a-worker-thread-or-access-window-object\" aria-label=\"can i update dom in a worker thread or access window object 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>Can I update DOM in a worker thread or access window object?</h3>\n<p>No you can not update DOM in a worker thread as worker threads run in a separate context from the main window and don't have access to <code>window</code> object and <code>document</code> object but they do have access to some of the <code>window</code> object's capabilities like <code>Websockets</code> and <code>indexedDB</code>.</p>\n<h3 id=\"why-did-you-add-worker-code-in-a-separate-file\" style=\"position:relative;\"><a href=\"#why-did-you-add-worker-code-in-a-separate-file\" aria-label=\"why did you add worker code in a separate file 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>Why did you add worker code in a separate file?</h3>\n<p>It's important that the worker code must be in a separate file, which we can use to create a separate worker thread by using the <code>Worker</code> constructor and passing it the path of the file.</p>\n<h3 id=\"why-did-you-add-that-button-i-can-easily-click-it\" style=\"position:relative;\"><a href=\"#why-did-you-add-that-button-i-can-easily-click-it\" aria-label=\"why did you add that button i can easily click it 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>Why did you add that button? I can easily click it.</h3>\n<p>You were able to click that button because we did not block the main thread.\nTo see the difference add the following code to <code>main.js</code> and see the difference.</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=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">persons</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=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Joe&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hriday&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hridayesh&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">false</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 class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Bob&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Daisy&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</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>\n<span class=\"grvsc-line\"><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Our club container</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">club</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;club&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">worker</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">entry</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">persons</span><span class=\"mtk1\">.</span><span class=\"mtk11\">forEach</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</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=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">, </span><span class=\"mtk12\">name</span><span class=\"mtk1\"> } = </span><span class=\"mtk12\">person</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createElement</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;li&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">.</span><span class=\"mtk12\">textContent</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">memeberAdded</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</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\">memeberAdded</span><span class=\"mtk1\">) </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</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 class=\"mtk1\">      </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</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=\"mtk11\">entry</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">member</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">i</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">0</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">while</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">i</span><span class=\"mtk1\"> &lt; </span><span class=\"mtk10\">Math</span><span class=\"mtk1\">.</span><span class=\"mtk11\">pow</span><span class=\"mtk1\">(</span><span class=\"mtk7\">10</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\">i</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=\"mtk4\">true</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">close</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"could-you-still-click-the-button\" style=\"position:relative;\"><a href=\"#could-you-still-click-the-button\" aria-label=\"could you still click the button 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>Could you still click the button?</h3>\n<p>You can share that answer in the comment section 😉 To get the full code you can visit to <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/JavaScript/WebWorkers\">Github Repo</a></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 introduced web workers in this article, a technology that helps the web industry keep up with demanding web applications. This is achieved by providing web apps with a way to exploit multiprocessor and multi-threaded machines by granting JavaScript some multi-threaded superpowers.</p>\n<p>Do you have any tips on web workers and the web as a forum for programming? Let us know in the comment section below.</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 .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n</style>","frontmatter":{"date":"September 09, 2020","updated_date":null,"description":" Learn how web workers help with the success of the web app and get started by creating a simple web worker for JavaScript.","title":"Web Workers: How to add multi-threading in JS","tags":["JavaScript","Web"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/bb9b45936f45ddb8d312dcff1653e084/14b42/cover.jpg","srcSet":"/static/bb9b45936f45ddb8d312dcff1653e084/f836f/cover.jpg 200w,\n/static/bb9b45936f45ddb8d312dcff1653e084/2244e/cover.jpg 400w,\n/static/bb9b45936f45ddb8d312dcff1653e084/14b42/cover.jpg 800w,\n/static/bb9b45936f45ddb8d312dcff1653e084/47498/cover.jpg 1200w,\n/static/bb9b45936f45ddb8d312dcff1653e084/ec6c5/cover.jpg 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"excerpt":"In this article, we will learn about state management in Angular with NGXS. Here we will understand the basic concept of NGXS and create a…","fields":{"slug":"/engineering/angular-state-management-with-ngxs/"},"html":"<p>In this article, we will learn about state management in Angular with NGXS. Here we will understand the basic concept of NGXS and create a simple TO-DO App.</p>\n<h2 id=\"what-is-state\" style=\"position:relative;\"><a href=\"#what-is-state\" aria-label=\"what is state 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 is State</h2>\n<p>In the bigger apps, managing the data states is very complicated. In angular, each component has its own state, to share the data/state between the components we normally use @Input and @Output decorators, but when the application goes bigger, its challenging to maintain the data consistency. So to solve this problem, redux was introduced. It provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 58.92307692307692%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9ElEQVQoz01SyXLaQBDlmsrf+Z7Kn+SWs38glUMOObhycRX2gcRsAWGkmEppQUhGAolFLCVUGAktM5rJQ8I4XV2zdPebft09lZwxxvl0OjUMY6TrWDNCWH4S2Asn3+12hmmqmrbdbnGlJx/LsqyCC/zHVzmEIRw5P8l0H12P/a8T3/OD1Wq1C4IkTXnxIiBvYMjhcECG0kdPG/3wtHz3vf/+ZnBtbqLNSjdNxBBCinAOghUgS+ayLLdarfJVWrC9XwRXXfuj6Pxd70Sh2+l0QW3/8pIX+c5giKqqgiAsFgvgwQeWknlyPPI8VxVZkqTxePzY60VRhJrPmbF5ntcXRW04RMTTYKBpWlrWxnmaZs581hn8cVxXlCRFUUajUVYwP4N7gmBb1rMxwhNpktRqteVyyYtysDabTW+zGWoa6kqSpFqtBkEAe4qGCb3eaj67Gyifb245yX49PKy329/tdjmVer2BNn5rP3752cqisN5o+L7fajZROchXHMdJ49j01v3nCaJd10VCFB+GIa5gyyiRnbm+8GiaIhgYrHGSEEor/PUnYPINzdgfYU9QD0YaRhG4HeOYkIyxcg7n4LdRlQrEpx93qjWxbUvTdcu2TdNEF8eWJSuKO5tdusAuYCS6KCMZheZ5qcUXZZSejvgbMeS/YMg/cHaVEGMm3H4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Image\"\n        title=\"Image\"\n        src=\"/static/e7078db45932adcc702097caf1919a23/e5715/redux.png\"\n        srcset=\"/static/e7078db45932adcc702097caf1919a23/a6d36/redux.png 650w,\n/static/e7078db45932adcc702097caf1919a23/e5715/redux.png 768w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h2 id=\"what-is-ngxs\" style=\"position:relative;\"><a href=\"#what-is-ngxs\" aria-label=\"what is ngxs 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 is NGXS</h2>\n<p>NGXS is a state management pattern + library. It provides as a single source of truth for your application's state, providing simple rules for predictable state mutations.</p>\n<p>NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators.</p>\n<h2 id=\"how-ngxs-works\" style=\"position:relative;\"><a href=\"#how-ngxs-works\" aria-label=\"how ngxs works 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>How NGXS works:</h2>\n<p>NGXS is very simple to use as compared to other state management patterns like redux and Akita. NGXS takes full advantage of angular and typescript over the redux pattern.\nThere are majors 4 concepts to NGXS</p>\n<h4 id=\"1-store\" style=\"position:relative;\"><a href=\"#1-store\" aria-label=\"1 store 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. Store:</h4>\n<p>It is a global state container and manages the states of the application.We can dispatch the actions to perform certain operations.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">store</span><span class=\"mtk1\">.</span><span class=\"mtk11\">dispatch</span><span class=\"mtk1\">(</span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk10\">AddTodo</span><span class=\"mtk1\">(</span><span class=\"mtk12\">form</span><span class=\"mtk1\">));</span></span></code></pre>\n<h4 id=\"2-actions\" style=\"position:relative;\"><a href=\"#2-actions\" aria-label=\"2 actions 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. Actions</h4>\n<p>An action is a type of command which should be called when something happens or you want to trigger at any event like adding a new todo, listing todos etc.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AddTodo</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">readonly</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;[Todo] Add&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">public</span><span class=\"mtk1\"> </span><span class=\"mtk12\">payload</span><span class=\"mtk1\">: </span><span class=\"mtk10\">ITodo</span><span class=\"mtk1\">) { }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h4 id=\"3-state\" style=\"position:relative;\"><a href=\"#3-state\" aria-label=\"3 state 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. State</h4>\n<p>States are classes along with decorators to describe metadata and action mappings.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Injectable</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">State</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@ngxs/store&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">State</span><span class=\"mtk1\">&lt;</span><span class=\"mtk10\">ITodoStateModel</span><span class=\"mtk1\">[]&gt;({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;todoList&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">defaults:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">todoList:</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 class=\"mtk11\">Injectable</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">TodoState</span><span class=\"mtk1\"> {}</span></span></code></pre>\n<h4 id=\"4-select\" style=\"position:relative;\"><a href=\"#4-select\" aria-label=\"4 select 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. Select</h4>\n<p>Selects are functions that slice a specific portion of the state from the global state container i.e. to get the data from the specific global state whenever you want to use.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">  @</span><span class=\"mtk11\">Select</span><span class=\"mtk1\">(</span><span class=\"mtk12\">TodoState</span><span class=\"mtk1\">) todoList$: </span><span class=\"mtk12\">Observable</span><span class=\"mtk1\">&lt;</span><span class=\"mtk12\">ITodo</span><span class=\"mtk1\">&gt;;</span></span></code></pre>\n<h2 id=\"lets-build-a-to-do-app\" style=\"position:relative;\"><a href=\"#lets-build-a-to-do-app\" aria-label=\"lets build a to do 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>Let's build a To-Do App:</h2>\n<h4 id=\"1-get-started\" style=\"position:relative;\"><a href=\"#1-get-started\" aria-label=\"1 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>1. Get started</h4>\n<p>Install the <code>npm install @ngxs/store --save</code> then import the below code in  <code>app.module.ts</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">//File name app.module.ts</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">NgxsModule</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@ngxs/store&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">NgModule</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">imports:</span><span class=\"mtk1\"> [</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">NgxsModule</span><span class=\"mtk1\">.</span><span class=\"mtk11\">forRoot</span><span class=\"mtk1\">([</span><span class=\"mtk12\">ToDoState</span><span class=\"mtk1\">], { </span><span class=\"mtk3\">// here login state </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">developmentMode:</span><span class=\"mtk1\"> !</span><span class=\"mtk12\">environment</span><span class=\"mtk1\">.</span><span class=\"mtk12\">production</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 class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AppModule</span><span class=\"mtk1\"> {}</span></span></code></pre>\n<h4 id=\"2-create-your-store\" style=\"position:relative;\"><a href=\"#2-create-your-store\" aria-label=\"2 create your store 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. Create your store</h4>\n<p>Here we have created a component that dispatches actions to create a to-do and for other operations. Apart from that, we are using a selector <code>TodoState</code>, from which we are listening for the updated to-do list.</p>\n<p>Put this code in the <code>app.component.ts</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// File name app.component.ts</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Component</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Store</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Select</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@ngxs/store&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">TodoActions</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./state/todo-actions&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">FormGroup</span><span class=\"mtk1\">, </span><span class=\"mtk12\">FormControl</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Validators</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/forms&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">TodoState</span><span class=\"mtk1\">, </span><span class=\"mtk12\">ITodo</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./state/todo-state&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Observable</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;rxjs&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">Component</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">selector:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;app-root&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">templateUrl:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./app.component.html&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">styleUrls:</span><span class=\"mtk1\"> [</span><span class=\"mtk8\">&#39;./app.component.scss&#39;</span><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AppComponent</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">title</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;ngxs-todo-app&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  @</span><span class=\"mtk11\">Select</span><span class=\"mtk1\">(</span><span class=\"mtk12\">TodoState</span><span class=\"mtk1\">) </span><span class=\"mtk12\">todoList$</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Observable</span><span class=\"mtk1\">&lt;</span><span class=\"mtk10\">ITodo</span><span class=\"mtk1\">&gt;;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">addForm</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">FormGroup</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">title:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">FormControl</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;&#39;</span><span class=\"mtk1\">, [</span><span class=\"mtk12\">Validators</span><span class=\"mtk1\">.</span><span class=\"mtk12\">required</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=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">store</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Store</span><span class=\"mtk1\">){}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">onSubmit</span><span class=\"mtk1\">(</span><span class=\"mtk12\">form</span><span class=\"mtk1\">: </span><span class=\"mtk10\">any</span><span class=\"mtk1\">){</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">store</span><span class=\"mtk1\">.</span><span class=\"mtk11\">dispatch</span><span class=\"mtk1\">(</span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk10\">AddTodo</span><span class=\"mtk1\">(</span><span class=\"mtk12\">form</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=\"mtk11\">markDone</span><span class=\"mtk1\">(</span><span class=\"mtk12\">id</span><span class=\"mtk1\">: </span><span class=\"mtk10\">string</span><span class=\"mtk1\">, </span><span class=\"mtk12\">is_done</span><span class=\"mtk1\">: </span><span class=\"mtk10\">boolean</span><span class=\"mtk1\">){</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">store</span><span class=\"mtk1\">.</span><span class=\"mtk11\">dispatch</span><span class=\"mtk1\">(</span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk10\">markDone</span><span class=\"mtk1\">(</span><span class=\"mtk12\">id</span><span class=\"mtk1\">, </span><span class=\"mtk12\">is_done</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<h4 id=\"3-create-your-actions\" style=\"position:relative;\"><a href=\"#3-create-your-actions\" aria-label=\"3 create your actions 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. Create your actions</h4>\n<p>Create a folder <code>state</code> and put the <code>todo-actions.ts</code> file and add below code</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// File name todo-actions.ts</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AddTodo</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">readonly</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;[Todo] Add&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">public</span><span class=\"mtk1\"> </span><span class=\"mtk12\">payload</span><span class=\"mtk1\">: </span><span class=\"mtk10\">any</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=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">EditTodo</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">readonly</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;[Todo] Edit&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">public</span><span class=\"mtk1\"> </span><span class=\"mtk12\">payload</span><span class=\"mtk1\">: </span><span class=\"mtk10\">any</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=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">FetchAllTodos</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">readonly</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;[Todo] Fetch All&#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=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">DeleteTodo</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">readonly</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;[Todo] Delete&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">public</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">: </span><span class=\"mtk10\">number</span><span class=\"mtk1\">) { }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h4 id=\"4-create-your-state\" style=\"position:relative;\"><a href=\"#4-create-your-state\" aria-label=\"4 create your state 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. Create your State:</h4>\n<p>Here we have created the state of the todo, it contains the global state of the todo list.\nCreate a folder <code>state</code> and put the <code>todo-state.ts</code> file and add below code</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"typescript\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// File name todo-state.ts</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Injectable</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">State</span><span class=\"mtk1\">, </span><span class=\"mtk12\">NgxsOnInit</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Action</span><span class=\"mtk1\">, </span><span class=\"mtk12\">StateContext</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@ngxs/store&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">TodoActions</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./todo-actions&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">patch</span><span class=\"mtk1\">, </span><span class=\"mtk12\">updateItem</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@ngxs/store/operators&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">interface</span><span class=\"mtk1\"> </span><span class=\"mtk10\">ITodo</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">id</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\">title</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\">is_done</span><span class=\"mtk1\">: </span><span class=\"mtk10\">boolean</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">interface</span><span class=\"mtk1\"> </span><span class=\"mtk10\">ITodoStateModel</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">todoList</span><span class=\"mtk1\">: </span><span class=\"mtk10\">ITodo</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=\"mtk11\">State</span><span class=\"mtk1\">&lt;</span><span class=\"mtk10\">ITodoStateModel</span><span class=\"mtk1\">&gt;({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;todoList&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">defaults:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">todoList:</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 class=\"mtk11\">Injectable</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">TodoState</span><span class=\"mtk1\"> </span><span class=\"mtk4\">implements</span><span class=\"mtk1\"> </span><span class=\"mtk10\">NgxsOnInit</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">ngxsOnInit</span><span class=\"mtk1\">(</span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">.</span><span class=\"mtk11\">dispatch</span><span class=\"mtk1\">(</span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk10\">FetchAllTodos</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=\"mtk11\">Action</span><span class=\"mtk1\">(</span><span class=\"mtk12\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk12\">markDone</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">markDone</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">: </span><span class=\"mtk10\">StateContext</span><span class=\"mtk1\">&lt;</span><span class=\"mtk10\">ITodoStateModel</span><span class=\"mtk1\">&gt;, </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      { </span><span class=\"mtk12\">payload</span><span class=\"mtk1\">, </span><span class=\"mtk12\">is_done</span><span class=\"mtk1\"> }: </span><span class=\"mtk10\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk10\">markDone</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    ) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setState</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk11\">patch</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk12\">todoList:</span><span class=\"mtk1\"> </span><span class=\"mtk11\">updateItem</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                  (</span><span class=\"mtk12\">item</span><span class=\"mtk1\">: </span><span class=\"mtk10\">ITodo</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">item</span><span class=\"mtk1\">.</span><span class=\"mtk12\">id</span><span class=\"mtk1\"> === </span><span class=\"mtk12\">payload</span><span class=\"mtk1\">, </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                  </span><span class=\"mtk11\">patch</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">is_done:</span><span class=\"mtk1\"> !</span><span class=\"mtk12\">is_done</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 class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    @</span><span class=\"mtk11\">Action</span><span class=\"mtk1\">(</span><span class=\"mtk12\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk12\">AddTodo</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">add</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">: </span><span class=\"mtk10\">StateContext</span><span class=\"mtk1\">&lt;</span><span class=\"mtk10\">ITodoStateModel</span><span class=\"mtk1\">&gt;,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        { </span><span class=\"mtk12\">payload</span><span class=\"mtk1\"> }: </span><span class=\"mtk10\">TodoActions</span><span class=\"mtk1\">.</span><span class=\"mtk10\">AddTodo</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=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">state</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getState</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">ctx</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setState</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            ...</span><span class=\"mtk12\">state</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">todoList:</span><span class=\"mtk1\"> [</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                ...</span><span class=\"mtk12\">state</span><span class=\"mtk1\">.</span><span class=\"mtk12\">todoList</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=\"mtk12\">payload</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                    </span><span class=\"mtk12\">id:</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Math</span><span class=\"mtk1\">.</span><span class=\"mtk11\">random</span><span class=\"mtk1\">().</span><span class=\"mtk11\">toString</span><span class=\"mtk1\">(</span><span class=\"mtk7\">36</span><span class=\"mtk1\">).</span><span class=\"mtk11\">substring</span><span class=\"mtk1\">(</span><span class=\"mtk7\">7</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                    </span><span class=\"mtk12\">is_done:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">false</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 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=\"mtk1\">}</span></span></code></pre>\n<h4 id=\"5-create-your-html-view\" style=\"position:relative;\"><a href=\"#5-create-your-html-view\" aria-label=\"5 create your html view 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. Create your html view</h4>\n<p>Here we have created a form that we use to create todo and listed all todos.\nput this code in your <code>app.component.html</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">File</span><span class=\"mtk1\"> </span><span class=\"mtk12\">name</span><span class=\"mtk1\">  </span><span class=\"mtk12\">app</span><span class=\"mtk1\">.</span><span class=\"mtk12\">component</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\">form</span><span class=\"mtk1\"> </span><span class=\"mtk14\">[formGroup]=&quot;addForm&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk14\">(ngSubmit)=&quot;onSubmit(addForm.value)&quot;&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk14\">&lt;input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;text&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">formControlName</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;title&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;form-control todo-list-input&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">placeholder</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;What do you need to do today?&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\">button</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;add btn btn-primary font-weight-bold todo-list-add-btn&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Add</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">form</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">ul</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;d-flex flex-column-reverse todo-list&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\">li</span><span class=\"mtk1\"> </span><span class=\"mtk14\">*ngFor=&quot;let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">todo</span><span class=\"mtk1\"> </span><span class=\"mtk12\">of</span><span class=\"mtk1\"> </span><span class=\"mtk14\">(todoList$</span><span class=\"mtk1\"> </span><span class=\"mtk14\">|</span><span class=\"mtk1\"> </span><span class=\"mtk14\">async)</span><span class=\"mtk1\"> </span><span class=\"mtk14\">?.</span><span class=\"mtk1\"> </span><span class=\"mtk14\">todoList&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk14\">[ngClass]=&quot;{&#39;completed&#39;:</span><span class=\"mtk1\"> </span><span class=\"mtk14\">todo.is_done}&quot;&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk14\">&lt;div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;form-check&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">label</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;form-check-label&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk14\">(click)=&quot;markDone(todo.id,</span><span class=\"mtk1\"> </span><span class=\"mtk14\">todo.is_done)&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk14\">[checked]=&quot;todo.is_done&quot;&gt;{{todo.title}}</span><span class=\"mtk1\"> </span><span class=\"mtk14\">&lt;i</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;input-helper&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">i</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">label</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> </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\">li</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  &lt;/</span><span class=\"mtk12\">ul</span><span class=\"mtk1\">&gt;</span></span></code></pre>\n<p>After lots of code, it's time to see the results. So here is the UI you will get. To get the complete code please go to <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/Angular/To-do-App-in-angular-with-NGXS\">Github Repo.</a>\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 412px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 157.28155339805824%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAfCAYAAADnTu3OAAAACXBIWXMAABJ0AAASdAHeZh94AAACnUlEQVRIx51WS47TQBD1UTgDJ0EsYAViAwvOwpYdC0YCMQgWiDMAAoSQYAZGilA0cRLHdhz//+7uR3U7HpyJE9u0VHKny3ldn1cv0UBLMI4/kwnOzs5xcX6B6fQS6lyIo9as9l4jl9rkeY6MrCgKVFWFvsU5B6NAGrDmqTVOudI0xcqy4XoBNq6HIAzhByHCKILtbNSZH9Q++R3OBXgXoPxQ0W1JlsMjAC+I4Iex2odRjDhJ4PqB2kdxjDCMKAt2KEJZD3WEMetQHTXGa7DPOnD3FLj3RuD+W4HbLwW+zoXyMX68ITtNqbaAz74JaA8FbjwRuPmU9g8ETr7XgCXr7/ZehJ9mAndeAY/eCTx+L3DrBfBlXt9avzNsabKArQRaz+bmUaWtu8wYQ5KkCoJtqdBVt64UOwEFcSrLMhRlObjDByNsnLwBpUmRUyOtosjl54z4WZYVWTkwwpZz7ThYGAaWZPKCnMxYruDQpAS+r8CPAl6vjeu6WK8dtTcME6ZlQdd1NYJdvOuPcL2GT2NmmiaM1UqNmW1bClym3Qe6U0OpMrJOEYmBT+nFNLfSX1A9A4qQbUVkECBjlUp3aIcHADKk1IB2BLVE8f0Z7qNNO21nsyFNpPpRl/O8UF02TYui90gHXXU2iDaNW6YtO5sT/zyPOm7bmM/nSnRrlWYjeEjPpssRialFwNIWiyVsOu/j4E4Nm9Rlhz3qsCS2QySXMh/TmSxBMICLV4CSMpImfRGIHvnR6reYApMKAzFcTI/WkHG2l44YK4ZtwCQtSFmqTgKPsa3AckymFtHFw+xyhhXxruqhR2+XryK7Nhn/FaFcJ68/4scvHTH9ewjjFFygt0FHAZ+ffsDP3zos0kLT9urJEWL8j9Rhkv4DGxPhX9j2e81D8ZGsAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Image\"\n        title=\"Image\"\n        src=\"/static/1d73631385a6f5f4c0fda45a96eb775e/9e32a/result.png\"\n        srcset=\"/static/1d73631385a6f5f4c0fda45a96eb775e/9e32a/result.png 412w\"\n        sizes=\"(max-width: 412px) 100vw, 412px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></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 have gone through the basic concepts of NGXS and built a simple to-do app. There are a lot of advanced features and plugins by NGXS, but beyond the scope, we could not add, but hopefully, we will be exploring in future blogs.</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 .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 .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk14 { color: #F44747; }\n</style>","frontmatter":{"date":"September 08, 2020","updated_date":null,"description":"NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations.","title":"Angular State Management With NGXS","tags":["Angular","NGXS","Redux"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.2903225806451613,"src":"/static/11800c1071c0ff7f8e9b3161611001aa/ee604/title-image.png","srcSet":"/static/11800c1071c0ff7f8e9b3161611001aa/69585/title-image.png 200w,\n/static/11800c1071c0ff7f8e9b3161611001aa/497c6/title-image.png 400w,\n/static/11800c1071c0ff7f8e9b3161611001aa/ee604/title-image.png 800w,\n/static/11800c1071c0ff7f8e9b3161611001aa/81944/title-image.png 875w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akshaya Sharma","github":"akshay-js","avatar":null}}}},{"node":{"excerpt":"Go announced Go 1.15 version on 11 Aug 2020. Highlighted updates and features include Substantial improvements to the Go linker, Improved…","fields":{"slug":"/engineering/what-is-the-new-go-1-15/"},"html":"<p>Go announced <a href=\"https://blog.golang.org/\">Go 1.15</a> version on 11 Aug 2020. Highlighted updates and features include Substantial improvements to the Go linker, Improved allocation for small objects at high core counts, X.509 CommonName deprecation, GOPROXY supports skipping proxies that return errors, New embedded tzdata package, Several Core Library improvements and more. </p>\n<p>As <a href=\"https://golang.org/doc/go1compat\">Go promise</a> for maintaining backward compatibility. After upgrading to the latest Go 1.15 version, almost all existing Golang applications or programs continue to compile and run as older Golang version.</p>\n<p>Download the latest Go Version from <a href=\"https://golang.org/dl/\">Golang</a>.</p>\n<h3 id=\"operating-system-and-platform-compatibility\" style=\"position:relative;\"><a href=\"#operating-system-and-platform-compatibility\" aria-label=\"operating system and platform compatibility 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>Operating system and platform compatibility</h3>\n<h4 id=\"macos\" style=\"position:relative;\"><a href=\"#macos\" aria-label=\"macos 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>macOS</h4>\n<p>Go 1.14 version announced some changes for the macOS. According to announcement  </p>\n<blockquote>\n<p>Go 1.14 is the last release that will run on macOS 10.11 El Capitan. Go 1.15 will require macOS 10.12 Sierra or later.</p>\n</blockquote>\n<p>The lastest macOS 10.15 (Catalina) is no longer supporting 32-bit binaries. Go 1.14 will likely to be the last Go release to support 32-bit binaries on iOS, iPadOS, watchOS, and tvOS (the darwin/arm port). Go continues to support the 64-bit darwin/amd64 port.</p>\n<h4 id=\"windows\" style=\"position:relative;\"><a href=\"#windows\" aria-label=\"windows 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>Windows</h4>\n<p>Go now generates Windows ASLR executables when -buildmode=pie cmd/link flag is provided. Go command uses <code>-buildmode=pie</code> by default on Windows.</p>\n<p>The -race and -msan flags now always enable <code>-d=checkptr</code>, which checks uses of unsafe. Pointer. This was previously the case on all OSes except Windows.</p>\n<h4 id=\"android\" style=\"position:relative;\"><a href=\"#android\" aria-label=\"android 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>Android</h4>\n<p>Mobile applications were crashing in some devices due to some invalid lld linker versions so now avoiding the crashing the latest Go 1.15 version explicitly selects the lld linker available in recent versions of the NDK. This explicitly lld linker avoids crashes on some devices. it becomes the default NDK linker in a future NDK version.</p>\n<h3 id=\"smaller-binaries--performance-improvements\" style=\"position:relative;\"><a href=\"#smaller-binaries--performance-improvements\" aria-label=\"smaller binaries  performance improvements 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>Smaller binaries &#x26; Performance improvements</h3>\n<p>Always new Go 1.15 brings many minor/major performance improvements. The first major improvement has reduced the executable's binary size by almost 5% - 10% as compared to Go 1.14. As Brad Fitzpatrick <a href=\"https://twitter.com/bradfitz/status/1256348714198654976?lang=en\">tweet</a>, test program down from 8.2MB in Go 1.14 to 3.9MB in 1.15. </p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 80.76923076923077%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAACiUlEQVQ4y5WTW2/aQBCFnXD3FdvccTAYgzH1BeMQIJCkuTV5iCpVykulqv//X5zOLEJVW6VpH45md737zczxrrTcP+L5y1e8vH7D5u4Fo3gLL9liEK5ovEFz+AHW2Qz2IETDnYv5MR51nLe9GFK6uUW2e8D+8TO29y9YXD4gv3pCsrnDcv8Jq5tnZLQWrz+iNYr+gP2eQHLnFxhFG0Sra4TLPcL8CvPza8wppts7Me5NUpH9ePhvkuLzNTZX1wjyG/iLHTxq04vW8KntINtR67kA2XzgWNFbYuDTfY7vr2tY0Q3s+Ba2l8I+C4Rn7J3p8HhGIGrLfUfcsmL1IJ2WUFNUdPtnGI0ncEdjJIulkOdPoOp1FEoVFMvVN1UolaE3HUiybkGSJBSLRTj9PrLFAlEUwXUH6HY6UBUF5VJJ7HlPSr1JQKMhJgUCdrpdxHGM3W6Hi4s1ujT/F5AknRyAZvsnsERVNJtNjMdjpGkK3/dxcnLYeIzvVmi2IFW1Q8unpwUBzLIM0+lUVMrzarX6HxUSsD+coFatQNcNWJaFDvnGMk0TffK01+vRNx0Kecmq1+tQVfXtCmfxEsOhiyAIEIahiI7joNFoCHES9pJBrVZLJONEnMQwDMiyDE3TSCpUizz0ggiddpugQ+EfH+aqGM5gBnBkiOu6AswQFlfKVXNSs24cgH6YwB0MRPYugZIkERrQGkNqtZrwkce2bRNAPVRHYAbphv5ry64/o7uXUBV99AnIVyagn7JcZri83Ir7mOc5XaMVPG8k9qRpgl5KXV07cNYd6MODp7JB99CdRvRC6IM7Qk0l8zXyheJBhljTDFOs1xQNFVkVsazJKOsyKoaCCvnHr4Vfyg/oqpwpFWDL7wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"image 1\"\n        title=\"image 1\"\n        src=\"/static/216a02ed439988a46672b5b77a351a6a/e5715/lr-tweet1.png\"\n        srcset=\"/static/216a02ed439988a46672b5b77a351a6a/a6d36/lr-tweet1.png 650w,\n/static/216a02ed439988a46672b5b77a351a6a/e5715/lr-tweet1.png 768w,\n/static/216a02ed439988a46672b5b77a351a6a/dd104/lr-tweet1.png 1064w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 80.76923076923077%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAACYUlEQVQ4y5WSW3eaUBCFQV0rUcGIIqgEEbkoF0G8BWM0Mdqmq13NS/vWvvX//4bdYUy72jfz8K05Z2D22XPOCNvTK758/4lvP35hc3xFuD4gWD7Cm20xWexxO56j781g+LO3mOGWKPbFuuemnNdHU2h2DCHJn7Hcv2C1/4Tp3QGL3Qtm90fihPn2A4LFDvHqEUl+QLx+4n9mmyMiyqWbZ+LIdJ0EqhVCcJMcXrpBuNxzQfFjQbEeZ1sWYpH7s0hxQCHEhz98pLodCxV0hiTopfd8wpScTuYP/wkGdMgovsMwWsGO1hSJcAWLKHLONIc5WZBQTESM4JO7NH9iMnKxOXzGw+krtbnHlNCsAM2+A8XwoPTdc2Rcyp/3bdMnxueWr+UWBEFAS+1gmqRIZxk0vYtypUJ5EaVy5SLEUgk32gBCVbphQUVRMB6PEQQB2u0WyuUy59+DrPYhyIrKG1Es4erqCtVqFbIss7v3CjZUA4LWM6GqbViWhU6ng1qtxsL1ep1dt1otzl3mkASv31ru9XrcbpIk8H0fruvyFYRhCMdxIEnS+wR1XedCz/OYQkxVVXZZfC/RpV8kWJWavDHNAaIoYodpmmK32yHPc76Kyx/lH4dFYZZlWC6XLLTdbrFer/+2KoriZYI1+dySQpdvGAZj2zY/0HA4JOcmjZF6+SsbgxEaUh2NhowajYyuddCl+1RpFq/ptc/uBFRoLsViTZRLNPCUK4l/4pvDNs2hMZrAGnlQu7fQDQvJfAU/TOBOYoyjBNJNm/GCGH3ThtY3YTk+BlRjewFH03ZRk5to9mz8BmAjmKWlNCj4AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"image 1\"\n        title=\"image 1\"\n        src=\"/static/f97cca2c10ac4080b1558296d5a61401/e5715/lr-tweet2.png\"\n        srcset=\"/static/f97cca2c10ac4080b1558296d5a61401/a6d36/lr-tweet2.png 650w,\n/static/f97cca2c10ac4080b1558296d5a61401/e5715/lr-tweet2.png 768w,\n/static/f97cca2c10ac4080b1558296d5a61401/dd104/lr-tweet2.png 1064w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Go 1.15 has improved the code build process now unused code is eliminating in the new linker, along with several targeted improvements, such as Clements's CL 230544, which reduces the number of stack and register maps included in the executable.  </p>\n<h3 id=\"standard-library-additions\" style=\"position:relative;\"><a href=\"#standard-library-additions\" aria-label=\"standard library additions 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>Standard library additions</h3>\n<p>Always in every new version release Go come with various minor changes and updates to the library. I m including some useful and important changes  </p>\n<h4 id=\"tzdata-package\" style=\"position:relative;\"><a href=\"#tzdata-package\" aria-label=\"tzdata package 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>tzdata Package</h4>\n<p>A new embedded tzdata package was added that permits embedding the timezone database into a program. Importing this package (as import _ \"time/tzdata\") which allows the program to find timezone information without the timezone database on the local system. We can also embed the timezone database by building with -tags timet/zdata. This approach increases the size of the program by about 800 KB. This might be useful and can test some code with the virtualized environments like <a href=\"https://play.golang.org/\">Go playground</a>.</p>\n<h4 id=\"x509-commonname-deprecation\" style=\"position:relative;\"><a href=\"#x509-commonname-deprecation\" aria-label=\"x509 commonname deprecation 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>X.509 CommonName deprecation</h4>\n<p>Go older versions were using CommonName field on X.509 certificates as a hostname if there is no Subject\nAlternative Names, would be disabled by default. If Still want to use this legacy behavior then we need to add x509ignoreCN=0 in the GODEBUG environment variable.</p>\n<h4 id=\"neturl-package\" style=\"position:relative;\"><a href=\"#neturl-package\" aria-label=\"neturl package 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>net/url Package</h4>\n<p>The <code>net/url</code> package adds a new URL. The redacted () method that returns the URL as a string. This is proposed in the <a href=\"https://github.com/golang/go/issues/34855\">Issue 34855</a>. It is a very useful improvement for audit logging and security. It's a simple derivation from the URL.String() that masks the password if exists from the string being passed. It does not modify at all to the URL itself but a copy of it.</p>\n<h3 id=\"summary\" style=\"position:relative;\"><a href=\"#summary\" aria-label=\"summary 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>Summary</h3>\n<p>Go 1.15 has released with various improvements, bug fixes. We can get all improvements, closed proposals and features details for the Go GitHub repository.</p>\n<h3 id=\"referance\" style=\"position:relative;\"><a href=\"#referance\" aria-label=\"referance 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>Referance</h3>\n<ul>\n<li><a href=\"https://blog.golang.org/\">Go Blog</a></li>\n<li><a href=\"https://golang.org/doc/go1.15\">Go 1.15</a></li>\n</ul>\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":"September 07, 2020","updated_date":null,"description":null,"title":"What's new in the go 1.15","tags":["Go","Golang","Go 1.15"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/d85b112d59a5149f84548b866984f6db/ee604/index.png","srcSet":"/static/d85b112d59a5149f84548b866984f6db/69585/index.png 200w,\n/static/d85b112d59a5149f84548b866984f6db/497c6/index.png 400w,\n/static/d85b112d59a5149f84548b866984f6db/ee604/index.png 800w,\n/static/d85b112d59a5149f84548b866984f6db/f3583/index.png 1200w,\n/static/d85b112d59a5149f84548b866984f6db/5707d/index.png 1600w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}}]},"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.jpg"}}}},"pageContext":{"limit":6,"skip":720,"currentPage":121,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}