{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/142","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"What is Web Accessibility? Web Accessibility (often stylized “a11y”), is the practice of ensuring that your websites and web applications…","fields":{"slug":"/engineering/introduction-to-web-accessibility-with-semantic-html5/"},"html":"<p><strong>What is Web Accessibility?</strong></p>\n<p>Web Accessibility (often stylized “a11y”), is the practice of ensuring that your websites and web applications are accessible by people with disabilities of many kinds.</p>\n<p>Some examples of common disabilities which we need to consider are: Blindness and visual impairment, deafness and hearing difficulties, motor skill impairment, and many more.</p>\n<p>The common categories of disabilities include:</p>\n<ul>\n<li>Auditory</li>\n<li>Cognitive, learning, and neurological</li>\n<li>Physical</li>\n<li>Speech</li>\n<li>Visual</li>\n</ul>\n<p><em>This list was taken from the W3C Web Accessibility Initiative (WAI). A link to their resources can be found at the bottom.</em></p>\n<p><strong>What is Semantic HTML? What is its correlation with Web Accessibility?</strong></p>\n<p>HTML semantics refers to conveying meaning through the use of HTML elements. An example of <em>semantic</em> HTML would be using <strong><code>&#x3C;header></code></strong>, <strong><code>&#x3C;main></code></strong>, <strong><code>&#x3C;footer></code></strong>, and other content-specific tags when applicable. <em>Unsemantic</em> HTML would be using <strong><code>&#x3C;div></code></strong> or <strong><code>&#x3C;span></code></strong> tags for every use-case.</p>\n<p><strong>Images and “alt” attributes</strong></p>\n<p>Users who are visually impaired may encounter trouble when the content of a website relies on an image. Luckily, there are precautions that we - as developers - can take to ensure that their user experience does not suffer because they are unable to see images.</p>\n<p>The easiest way to do this is to add an <strong>alt</strong> attribute to <strong>all</strong> of your <strong><code>&#x3C;img></code></strong> tags. This way, screen readers will be able to describe the image to the user. Here are a few suggestions and best practices for writing <strong>alt</strong> text:</p>\n<ul>\n<li>\n<p><strong>Do not include words like “image”, or “picture”.</strong> It is redundant, because the screen reader will notify the user that it’s an image. An exception to this would be if the image is of a painting, or an illustration. In this case, emphasizing that is fine, because you want the user to know that it’s specifically a painting, as opposed to any image.</p>\n<ul>\n<li>Example: <strong>alt=”Painted portrait of Albert Einstein”</strong></li>\n</ul>\n</li>\n<li>\n<p><strong>Always include the alt attribute</strong>, even if you don’t want the screen reader to read it. If you have a decorative image (one that is simply cosmetic, and not necessary for the site), then you can add an <strong>alt</strong> tag and assign it to an empty string. In this case, the image will be ignored by the screen reader. If this is neglected, the screen reader may read the file name instead, which may not be particularly helpful.</p>\n<ul>\n<li>Tip: you can also assign an attribute of <strong>role=”presentation”</strong> for decorative images. This can be done in addition to the alt attribute.</li>\n</ul>\n</li>\n<li><strong>Keep it concise.</strong> While there is no limit for length of <strong>alt</strong> text, some screen readers will cut off the alt text at around 125 characters. Either way, you don’t want to waste the user’s time by having their screen reader read a needlessly long description.</li>\n</ul>\n<p><strong>Form Labels and ARIA Labelling</strong></p>\n<p>Users with screen readers will need some way to differentiate between multiple inputs on a single form. Without labels, the user will have a difficult time figuring out what each input is for.</p>\n<p>The easiest way to implement form labelling is with the HTML <strong><code>&#x3C;label></code></strong> tag. The <strong><code>&#x3C;label></code></strong> element uses an attribute called <code>for</code> in order to form a relationship with the ID of the <strong><code>&#x3C;input></code></strong> tag.</p>\n<p>Another way to give context to a screen reader is with the ARIA <strong><code>aria-labelledby</code></strong> attribute. This attribute can be placed on (but not limited to) <strong><code>&#x3C;input></code></strong> tags, and then reference the <strong>id</strong> of the label. You can use <strong><code>&#x3C;label for=””></code></strong> in conjunction with <strong><code>&#x3C;input aria-labelledby=””></code></strong> in order to provide extra support and maximize compatibility.</p>\n<p><strong>Buttons and Tabindices</strong></p>\n<p>Buttons should use <strong><code>&#x3C;button></code></strong> tags (or <strong><code>&#x3C;input type=”submit”></code></strong> if applicable), rather than <strong><code>&#x3C;a></code></strong>, <strong><code>&#x3C;span></code></strong>, <strong><code>&#x3C;div></code></strong>, or anything else that doesn’t have semantic meaning for clickable buttons. Often people choose to use these tags, because they want to clear all styling and not have default <strong><code>&#x3C;button></code></strong> styling. This is ill-advised because <strong><code>&#x3C;button></code></strong> tags come with a ton of functionality built-in, an important part being its <strong><code>tabindex</code></strong>. A user who isn’t able to use a mouse, and must navigate the site with their keyboard, will press the <strong><code>tab</code></strong> key to jump through interactive elements. Standard <strong><code>&#x3C;div></code></strong> tags are not tabbable by default, and assigning a <strong><code>tabindex</code></strong> to it manually can break the flow of the natural tabindices of the page.</p>\n<p><strong>Other Semantic HTML tags</strong></p>\n<p>Other than images and forms, there are still many ways to provide the best accessibility possible. Semantic HTML tags are useful because they describe the content and the relationship with your overall page. Using appropriate, accurate tags such as <strong><code>&#x3C;article></code></strong>, <strong><code>&#x3C;aside></code></strong>, <strong><code>&#x3C;section></code></strong> will give screen readers an idea of what the role is for those sections.</p>\n<p>Other elements such as <strong><code>&#x3C;h1></code></strong> and other heading tags should be carefully planned before sprinkled throughout your webpage. The <strong><code>&#x3C;h1></code></strong> through <strong><code>&#x3C;h6></code></strong> tags should form direct relationships with each other in order to differentiate their meaning. Headings with lower importance (relative to the previous heading) can be used to start new subsections within its current section. Your different page sections can even use <strong><code>aria-labelledby</code></strong> to point to its corresponding heading in order to label your sections accurately.</p>\n<p>The full W3C specification on HTML semantics can be found at: <a href=\"https://www.w3.org/TR/2016/REC-html51-20161101/dom.html\">W3C Recommendation</a>.</p>\n<p>More information about the varying disabilities and barriers can be found at: <a href=\"https://www.w3.org/WAI/people-use-web/abilities-barriers/\">Diverse Abilities and Barriers</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":"July 24, 2019","updated_date":null,"description":null,"title":"Introduction to Web Accessibility with Semantic HTML5","tags":["HTML5","HTML","Web Accessibility","Semantic HTML5"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/70f4300c1f86c6d8e337f40979e66dea/58556/handicapped.webp","srcSet":"/static/70f4300c1f86c6d8e337f40979e66dea/61e93/handicapped.webp 200w,\n/static/70f4300c1f86c6d8e337f40979e66dea/1f5c5/handicapped.webp 400w,\n/static/70f4300c1f86c6d8e337f40979e66dea/58556/handicapped.webp 800w,\n/static/70f4300c1f86c6d8e337f40979e66dea/cc834/handicapped.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Greg Sakai","github":null,"avatar":null}}}},{"node":{"excerpt":"A basic example of a JavaScript event Events, in JavaScript, are occurrences that can trigger certain functionality, and can result in…","fields":{"slug":"/engineering/javascript-events-bubbling-capturing-and-propagation/"},"html":"<p><strong>A basic example of a JavaScript event</strong></p>\n<p>Events, in JavaScript, are occurrences that can trigger certain functionality, and can result in certain behaviour. A common example of an event, is a “click”, or a “hover”. You can set listeners to watch for these events that will trigger your desired functionality.</p>\n<p><strong>What is “propagation”?</strong></p>\n<p>Propagation refers to how events travel through the Document Object Model (DOM) tree. The DOM tree is the structure which contains parent/child/sibling elements in relation to each other. You can think of propagation as electricity running through a wire, until it reaches its destination. The event needs to pass through every node on the DOM until it reaches the end, or if it is forcibly stopped.</p>\n<p><strong>Event Bubbling and Capturing</strong></p>\n<p>Bubbling and Capturing are the two phases of propagation. In their simplest definitions, <strong>bubbling</strong> travels from the <em>target</em> to the <em>root</em>, and <strong>capturing</strong> travels from the <em>root</em> to the <em>target</em>. However, that doesn’t make much sense without first defining what a target and a root is.</p>\n<p>The <em>target</em> is the DOM node on which you click, or trigger with any other event.</p>\n<p>For example, a button with a click event would be the event target.</p>\n<p>The <em>root</em> is the highest-level parent of the target. This is usually the <strong>document</strong>, which is a parent of the <strong><body></strong>, which is a (possibly distant) parent of your target element.</p>\n<p>Capturing is not used nearly as commonly as bubbling, so our examples will revolve around the bubbling phase. As an option though, <strong>EventTarget.addEventListener()</strong> has an optional third parameter - which takes its argument as a boolean - which controls the phase of the propagation. The parameter is called <strong>useCapture</strong>, and passing <strong>true</strong> will cause the listener to be on the capturing phase. The default is <strong>false</strong>, which will apply it to the bubbling phase.</p>\n<p>Once you trigger the event, it will <em>propagate</em> up to the root, and it will trigger every single event handler which is associated with the same type. For example, if your button has a click event, during the bubbling phase, it will bubble up to the root, and trigger every click event along the way.</p>\n<p>This kind of behaviour might not sound desirable - and it often isn’t - but there’s an easy workaround...</p>\n<p><strong>Event.stopPropagation()</strong></p>\n<p>These two methods are used for solving the previously mentioned problem regarding event propagation. Calling <strong>Event.stopPropagation()</strong> will prevent further propagation through the DOM tree, and only run the event handler from which it was called.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!--</span><span class=\"mtk12\">Try</span><span class=\"mtk1\"> </span><span class=\"mtk12\">it</span><span class=\"mtk1\">--&gt;</span></span></code></pre>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">first</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=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">second</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=\"mtk7\">2</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">button</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;button&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">container</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;container&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">button</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;click&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">first</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">container</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;click&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">second</span><span class=\"mtk1\">);</span></span></code></pre>\n<p>In this example, clicking the button will cause the console to print <strong>1, 2</strong>. If we wanted to modify this so that <em>only</em> the button’s click event is triggered, we could use <strong>Event.stopPropagation()</strong> to immediately stop the event from bubbling to its parent.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">first</span><span class=\"mtk1\">(</span><span class=\"mtk12\">event</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk11\">stopPropagation</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=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>This modification will allow the console to print <strong>1</strong>, but it will end the event chain right away, preventing it from reaching <strong>2</strong>.</p>\n<p><strong>How does this differ from <code>Event.stopImmediatePropagation()</code>? When would you use either?</strong></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!--</span><span class=\"mtk12\">Try</span><span class=\"mtk1\"> </span><span class=\"mtk12\">it</span><span class=\"mtk1\">--&gt;</span></span></code></pre>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">first</span><span class=\"mtk1\">(</span><span class=\"mtk12\">event</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=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">second</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=\"mtk7\">2</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">third</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=\"mtk7\">3</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">button</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;button&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">container</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;container&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">button</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;click&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">first</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">button</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;click&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">second</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">container</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;click&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">third</span><span class=\"mtk1\">);</span></span></code></pre>\n<p>Let’s suppose we wanted to add a third function, which prints <strong>3</strong> to the console. In this scenario, we will also move the <strong>second</strong> function to also be on the button. We will apply <strong>third</strong> to the container now.</p>\n<p><strong>Long story short</strong>: we have two event handlers on the button, and clicking <strong>&#x3C;div#container></strong> will now print <strong>3</strong>.</p>\n<p>What will happen now? This will behave the same as before, and it will propagate through the DOM tree, and print <strong>1, 2, 3</strong>, in that order.</p>\n<p><strong>How does this tie in to <code>Event.stopPropagation()</code> and <code>Event.stopImmediatePropagation()</code>?</strong></p>\n<p>Adding <strong>Event.stopPropagation()</strong> to the first function, like so, will print <strong>1, 2</strong> to the console.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">first</span><span class=\"mtk1\">(</span><span class=\"mtk12\">event</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk11\">stopPropagation</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=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>This is because <strong>Event.stopPropagation()</strong> will immediately prevent all click events on the <em>parent</em> from being triggered, but it does <strong>not</strong> stop any <strong>other</strong> event handlers from being called.</p>\n<p>As you can see in our example, our button has two click handlers, and it <em>did</em> stop the propagation to its parents. If you wanted to stop <em>all</em> event handlers after the first, <em>that’s where</em> <strong>Event.stopImmediatePropagation()</strong> <em>comes in.</em></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">first</span><span class=\"mtk1\">(</span><span class=\"mtk12\">event</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk11\">stopImmediatePropagation</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=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Now, the first function <em>really will</em> stop the parent click handlers, and all other click handlers. The console will now print just <strong>1</strong>, whereas if we simply used <strong>Event.stopPropagation()</strong>, it would print <strong>1, 2</strong>, and not including either would print <strong>1, 2, 3</strong> .</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 .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n</style>","frontmatter":{"date":"July 22, 2019","updated_date":null,"description":null,"title":"JavaScript Events: Bubbling, Capturing, and Propagation","tags":["JavaScript","JavaScript Events"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/53a3895e9c38870937a9136813ac9e10/0ce14/bubbles.webp","srcSet":"/static/53a3895e9c38870937a9136813ac9e10/61e93/bubbles.webp 200w,\n/static/53a3895e9c38870937a9136813ac9e10/1f5c5/bubbles.webp 400w,\n/static/53a3895e9c38870937a9136813ac9e10/0ce14/bubbles.webp 772w","sizes":"(max-width: 772px) 100vw, 772px"}}},"author":{"id":"Greg Sakai","github":null,"avatar":null}}}},{"node":{"excerpt":"What is Multi Factor Authentication (MFA)? Multi Factor Authentication (MFA) is a security process that requires users to verify their…","fields":{"slug":"/identity/what-is-multi-factor-authentication/"},"html":"<h2 id=\"what-is-multi-factor-authentication-mfa\" style=\"position:relative;\"><a href=\"#what-is-multi-factor-authentication-mfa\" aria-label=\"what is 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>What is Multi Factor Authentication (MFA)?</h2>\n<p>Multi Factor Authentication (MFA) is a security process that requires users to verify their identity using two or more authentication factors before accessing an account, application, or system.</p>\n<p>Unlike traditional password-based logins, MFA adds an extra layer of security by demanding additional verification, reducing the risk of unauthorized access. For instance, a user must complete a second verification process after providing their username and password to access certain platforms or resources.</p>\n<p>MFA is widely used in various industries, including e-commerce, media &#x26; communication, healthcare, and finance, to protect user accounts from cyber threats. Hundreds of organizations have benefited by integrating MFA. See how to <a href=\"https://www.loginradius.com/docs/security/customer-security/multi-factor-authentication/overview/#integration-guide\">integrate MFA into security policies</a> to mitigate risks associated with credential theft and data breaches.</p>\n<h2 id=\"why-is-mfa-important\" style=\"position:relative;\"><a href=\"#why-is-mfa-important\" aria-label=\"why is mfa important 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 is MFA Important?</h2>\n<p>Cybercriminals are constantly exploiting weak credentials and gaining access to sensitive systems. Here’s where we get an answer to the question- Why is MFA important?</p>\n<ul>\n<li><strong>Enhanced Security</strong>: Even if a password is stolen, unauthorized access is blocked by requiring an additional authentication factor.</li>\n<li><strong>Prevention of Phishing Attacks</strong>: Since MFA requires multiple authentication steps, it significantly reduces the effectiveness of phishing attempts.</li>\n<li><strong>Regulatory Compliance</strong>: Many industries mandate MFA implementation to comply with security regulations such as GDPR, HIPAA, and PCI DSS.</li>\n<li><strong>Reduced Risk of Account Takeover</strong>: Cybercriminals find it harder to breach accounts that require multiple authentication steps.</li>\n<li><strong>Business Continuity</strong>: Companies using MFA can prevent operational disruptions caused by unauthorized access and cyber threats.</li>\n<li><strong>Cost Savings and Avoiding Liability Issues</strong>: Implementing MFA reduces the financial impact of security breaches, lowering potential fines, recovery costs, and helping organizations avoid legal liabilities related to data breaches.</li>\n</ul>\n<h2 id=\"how-does-mfa-work\" style=\"position:relative;\"><a href=\"#how-does-mfa-work\" aria-label=\"how does mfa work 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 Does MFA Work?</h2>\n<p>Since we’ve learned what MFA is and why it’s important, let’s understand how it works. The MFA process is straightforward yet highly effective. Here’s how it works:</p>\n<ol>\n<li><strong>User Enters Credentials</strong>: The user inputs their username and password.</li>\n<li><strong>MFA Triggered</strong>: The system asks for an additional authentication factor if the credentials are correct.</li>\n<li><strong>Verification Step</strong>: The user provides the second factor (e.g., OTP, biometric scan, hardware token, or passkey).</li>\n<li><strong>Access Granted or Denied</strong>: Access is granted if the second factor is valid; otherwise, the login attempt is blocked.</li>\n</ol>\n<p>Understanding how MFA works is crucial for organizations implementing strong security policies.</p>\n<p>MFA can be implemented in various ways, and organizations can choose the most suitable method based on their security needs and user convenience.</p>\n<p><img src=\"/31897617f8cfd303cc4a03b4950ccab7/how-mfa-works.webp\" alt=\"A visual of the multi-factor authentication (MFA) process on a dark background. It shows a user logging in with email and password, then completing an extra security check using OTP, biometrics, or a security key. The final step confirms access with a green checkmark or denies it with a security alert.\"></p>\n<h2 id=\"types-of-multi-factor-authentication\" style=\"position:relative;\"><a href=\"#types-of-multi-factor-authentication\" aria-label=\"types of multi factor authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Types of Multi-Factor Authentication</h2>\n<p>Different MFA methods provide varying levels of security and convenience. Here are the most commonly used types of multi-factor authentication:</p>\n<h3 id=\"time-based-one-time-password-totp\" style=\"position:relative;\"><a href=\"#time-based-one-time-password-totp\" aria-label=\"time based one time password totp 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>Time-Based One-Time Password (TOTP)</h3>\n<p>A TOTP is a temporary passcode generated by an authentication app (e.g., Google Authenticator or Microsoft Authenticator). The code expires shortly, reducing the risk of unauthorized access.</p>\n<h3 id=\"push-notifications\" style=\"position:relative;\"><a href=\"#push-notifications\" aria-label=\"push notifications 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>Push Notifications</h3>\n<p>Push notification MFA is one of the convenient MFA factors that allows seamless authentication. It involves sending a push notification to a registered mobile device and asking the user to approve or deny the login attempt.</p>\n<h3 id=\"sms-based-verification\" style=\"position:relative;\"><a href=\"#sms-based-verification\" aria-label=\"sms based verification 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>SMS-Based Verification</h3>\n<p>An SMS-based MFA solution sends a one-time passcode (OTP) to a user’s mobile phone via text message. The user must enter the OTP to complete authentication.</p>\n<h3 id=\"hardware-token\" style=\"position:relative;\"><a href=\"#hardware-token\" aria-label=\"hardware token 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>Hardware Token</h3>\n<p>A hardware token is a physical device that generates OTPs or connects via USB/NFC to authenticate the user.</p>\n<h3 id=\"biometric-authentication\" style=\"position:relative;\"><a href=\"#biometric-authentication\" aria-label=\"biometric authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Biometric Authentication</h3>\n<p>This method uses inherent factors like fingerprint scans, facial recognition, or iris scans for verification.</p>\n<p>Biometric authentication is gaining popularity because of its ease of use and strong security. Many modern devices, including smartphones and laptops, integrate biometric authentication as an additional layer of security.</p>\n<p><a href=\"https://www.loginradius.com/resource/ebook/buyers-guide-to-multi-factor-authentication/\"><img src=\"/b2d3a16b02ab56f63d8a8a720ca22b86/eb-buyers-guide-to-multi-factor-authentication.webp\" alt=\"Buyers Guide to Multi-Factor Authentication ebook\"></a></p>\n<h2 id=\"what-are-the-different-types-of-authentication-factors\" style=\"position:relative;\"><a href=\"#what-are-the-different-types-of-authentication-factors\" aria-label=\"what are the different types of authentication factors 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 the Different Types of Authentication Factors?</h2>\n<p>Authentication factors are categorized into different types based on what the user knows, has, or is. These MFA factors play a key role in strengthening security.</p>\n<h3 id=\"knowledge-factors-something-the-user-knows\" style=\"position:relative;\"><a href=\"#knowledge-factors-something-the-user-knows\" aria-label=\"knowledge factors something the user knows 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>Knowledge Factors: Something the User Knows</h3>\n<p>Examples include passwords, PINs, or security questions.</p>\n<h3 id=\"possession-factors-something-the-user-has\" style=\"position:relative;\"><a href=\"#possession-factors-something-the-user-has\" aria-label=\"possession factors something the user has 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>Possession Factors: Something the User Has</h3>\n<p>Examples include smartphones, security keys, and smart cards.</p>\n<h3 id=\"inherent-factors-something-unique-to-the-user\" style=\"position:relative;\"><a href=\"#inherent-factors-something-unique-to-the-user\" aria-label=\"inherent factors something unique to the user 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>Inherent Factors: Something Unique to the User</h3>\n<p>These involve biometric authentication methods such as fingerprints, voice recognition, or facial scans.</p>\n<h3 id=\"behavioral-factors-something-the-user-does\" style=\"position:relative;\"><a href=\"#behavioral-factors-something-the-user-does\" aria-label=\"behavioral factors something the user does 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>Behavioral Factors: Something the User Does</h3>\n<p>These include behavioral patterns like keystroke dynamics and mouse movement patterns.</p>\n<p>Behavioral authentication is an emerging MFA technology that continuously analyzes user behavior to detect anomalies and prevent unauthorized access.</p>\n<h2 id=\"multi-factor-authentication-vs-two-factor-authentication\" style=\"position:relative;\"><a href=\"#multi-factor-authentication-vs-two-factor-authentication\" aria-label=\"multi factor authentication vs two factor authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Multi-Factor Authentication vs. Two-Factor Authentication</h2>\n<p>Many people confuse both terms and are unable to <a href=\"https://www.loginradius.com/blog/identity/2fa-mfa-key-differences/\">decide between 2FA and MFA</a>. When it comes to 2FA vs MFA, the difference is quite simple:</p>\n<ul>\n<li>Two-factor authentication (2FA) requires exactly two authentication factors.</li>\n<li>Multi-factor authentication (MFA) requires two or more authentication factors.</li>\n</ul>\n<p>MFA is more secure than 2FA since it provides additional layers of protection. Organizations handling sensitive data or focusing on enterprise security often prefer MFA over 2FA to ensure stronger security.</p>\n<h2 id=\"what-is-adaptive-multi-factor-authentication\" style=\"position:relative;\"><a href=\"#what-is-adaptive-multi-factor-authentication\" aria-label=\"what is adaptive multi factor authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Adaptive Multi-Factor Authentication?</h2>\n<p>When we talk about an advanced security measure, <a href=\"https://www.loginradius.com/products/adaptive-mfa\">Adaptive MFA</a> is undoubtedly a game-changer that analyzes user behavior and risk levels to determine when to prompt for authentication.</p>\n<p>If a login attempt appears risky (e.g., new device, unusual location), the system triggers additional authentication steps.</p>\n<p>Adaptive MFA helps balance security and user convenience by requiring additional verification only when necessary.</p>\n<h2 id=\"examples-of-multi-factor-authentication-methods\" style=\"position:relative;\"><a href=\"#examples-of-multi-factor-authentication-methods\" aria-label=\"examples of multi factor authentication methods 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>Examples of Multi-Factor Authentication Methods</h2>\n<p>Here are some MFA examples used by businesses and individuals:</p>\n<ul>\n<li><strong>Online Banking</strong>: Banks use MFA for account access and high-value transactions.</li>\n<li><strong>Cloud Applications</strong>: Google, Microsoft, and AWS enforce MFA to secure user accounts.</li>\n<li><strong>Corporate Networks</strong>: Businesses implement MFA for employee access to sensitive data.</li>\n<li><strong>Healthcare Systems</strong>: Medical organizations use MFA to protect patient records and comply with regulations.</li>\n<li><strong>E-commerce Platforms</strong>: Online retailers leverage MFA to prevent fraudulent transactions.</li>\n</ul>\n<h2 id=\"benefits-of-multi-factor-authentication\" style=\"position:relative;\"><a href=\"#benefits-of-multi-factor-authentication\" aria-label=\"benefits of multi factor authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Benefits of Multi-Factor Authentication</h2>\n<p>When it comes to the benefits of MFA, the list is endless; here’s a list of a few benefits that you get:</p>\n<h3 id=\"improving-security\" style=\"position:relative;\"><a href=\"#improving-security\" aria-label=\"improving 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>Improving Security</h3>\n<p>MFA protects against unauthorized access by adding extra layers of verification beyond passwords. It significantly reduces the risk of credential-based attacks and data breaches.</p>\n<h3 id=\"enabling-digital-initiatives\" style=\"position:relative;\"><a href=\"#enabling-digital-initiatives\" aria-label=\"enabling digital initiatives 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>Enabling Digital Initiatives</h3>\n<p>Businesses can implement MFA solutions to secure digital transactions, remote work setups, and cloud applications. This allows organizations to safely expand their digital services without compromising security.</p>\n<h3 id=\"reducing-fraud-risks\" style=\"position:relative;\"><a href=\"#reducing-fraud-risks\" aria-label=\"reducing fraud risks 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>Reducing Fraud Risks</h3>\n<p>MFA helps businesses prevent fraudulent transactions and unauthorized account access. It is especially crucial for industries like banking and e-commerce, where financial fraud is a major concern.</p>\n<h3 id=\"increasing-user-confidence--trust\" style=\"position:relative;\"><a href=\"#increasing-user-confidence--trust\" aria-label=\"increasing user confidence  trust 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>Increasing User Confidence &#x26; Trust</h3>\n<p>Customers feel more confident using services that implement strong authentication measures. A well-implemented MFA system reassures users that their sensitive information is protected, leading to improved customer retention and brand reputation.</p>\n<h3 id=\"boosting-regulatory-compliance\" style=\"position:relative;\"><a href=\"#boosting-regulatory-compliance\" aria-label=\"boosting 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>Boosting Regulatory Compliance</h3>\n<p>Many industries, such as healthcare and finance, require MFA to comply with strict data protection regulations. Implementing MFA ensures that businesses meet compliance standards like GDPR, HIPAA, and PCI DSS.</p>\n<p>See how one of <a href=\"https://www.loginradius.com/resource/case-study-page-safebridge/\">our clients- SafeBridge, leveled up security</a> with LoginRadius MFA.</p>\n<h2 id=\"top-mfa-providers\" style=\"position:relative;\"><a href=\"#top-mfa-providers\" aria-label=\"top mfa providers 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 MFA Providers</h2>\n<h3 id=\"loginradius\" style=\"position:relative;\"><a href=\"#loginradius\" aria-label=\"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>LoginRadius</h3>\n<p><a href=\"https://www.loginradius.com/platforms/multi-factor-authentication\">LoginRadius Multi-Factor Authentication</a> makes security effortless. With flexible options like OTPs, biometrics, and authenticator apps, you can add an extra layer of protection without disrupting the user experience.</p>\n<p>Moreover, LoginRadius’ adaptive MFA intelligently detects risk—only stepping in when needed, like an unusual login attempt. Best of all, you can integrate LoginRadius MFA into your app or website within minutes, with developer-friendly APIs and seamless workflows. Strong security, easy implementation, and a frictionless login experience—all in one solution.</p>\n<h3 id=\"google-authenticator\" style=\"position:relative;\"><a href=\"#google-authenticator\" aria-label=\"google authenticator 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>Google Authenticator</h3>\n<p>Google Authenticator is a mobile app that generates time-based one-time passwords (TOTP) for multi-factor authentication (MFA).</p>\n<p>It provides an additional layer of security by requiring users to enter a unique 6-digit code, which refreshes every 30 seconds, along with their password during login. This method helps protect accounts from unauthorized access and is widely used across various platforms for secure authentication.</p>\n<h3 id=\"yubico\" style=\"position:relative;\"><a href=\"#yubico\" aria-label=\"yubico 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>Yubico</h3>\n<p>Yubico provides hardware-based multi-factor authentication (MFA) solutions through its YubiKey devices. YubiKeys enhances security by requiring physical authentication in addition to a password, protecting accounts from phishing and unauthorized access.</p>\n<p>They support multiple authentication methods, including FIDO2, U2F, OTP, and Smart Card authentication, making them compatible with a wide range of platforms. Unlike SMS-based MFA, YubiKeys does not rely on network connectivity and provides strong, passwordless authentication options for improved security and ease of use.</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>Multi-Factor Authentication is a critical component of modern cybersecurity. By requiring multiple verification steps, MFA enhances security, prevents data breaches, and provides an added layer of protection against cyber threats.</p>\n<p>Businesses should implement MFA by choosing the right multi-factor authentication provider to safeguard sensitive information, reduce fraud risks, and comply with security regulations.</p>\n<h2 id=\"faqs\" style=\"position:relative;\"><a href=\"#faqs\" aria-label=\"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>FAQs</h2>\n<p><strong>1. Why is MFA important to security?</strong></p>\n<p>MFA is crucial to security because it adds an extra layer of protection by requiring multiple forms of verification, reducing the risk of unauthorized access.</p>\n<p><strong>2. What are the benefits of MFA security?</strong></p>\n<p>MFA security offers enhanced protection against cyber threats, mitigates the risk of stolen or weak passwords, and improves overall account security.</p>\n<p><strong>3. What is multi-factor authentication and why is it important to help prevent identity theft?</strong></p>\n<p>Multi-factor authentication (MFA) verifies user identity with multiple factors like passwords, tokens, or biometrics, reducing the risk of identity theft by ensuring only authorized users gain access.</p>\n<p><strong>4. What are the benefits of having an MFA?</strong></p>\n<p>Having MFA provides improved security, reduced vulnerability to password-related attacks, increased trust with consumers, and compliance with security standards.</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":"June 28, 2019","updated_date":null,"description":"In today’s digital landscape, cybersecurity threats are evolving rapidly. Businesses and individuals alike need stronger security measures to protect sensitive data. A highly effective method to improve security is through Multi-Factor Authentication (MFA). But what is multi factor authentication, and how does it work? Let’s dive into the details.","title":"What is Multi Factor Authentication (MFA) and How does it Work?","tags":["mfa","authentication","ciam solution","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4598540145985401,"src":"/static/bebdf0e50e1df0f97ff4169608b4f233/58556/mfa-cover.webp","srcSet":"/static/bebdf0e50e1df0f97ff4169608b4f233/61e93/mfa-cover.webp 200w,\n/static/bebdf0e50e1df0f97ff4169608b4f233/1f5c5/mfa-cover.webp 400w,\n/static/bebdf0e50e1df0f97ff4169608b4f233/58556/mfa-cover.webp 800w,\n/static/bebdf0e50e1df0f97ff4169608b4f233/cc834/mfa-cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"It is hard to write 100% holes-free code, no matter how hard you try. Sometimes it is not even your own fault (language implementation…","fields":{"slug":"/engineering/3-simple-ways-to-secure-your-websites-applications/"},"html":"<p>It is hard to write 100% holes-free code, no matter how hard you try. Sometimes it is not even your own fault (language implementation, server setups, etc.) and those factors are likely out of your control. That being said, as developers, we should strive to write our code as safe and secure as possible. Here are my suggestions to keep yourself from being woken up in the middle of the night:</p>\n<p>1. <strong>DO NOT trust any user-input, PERIOD.</strong> Not even if it is yours truly. This is the most common attack vector for your web applications, whether it is just a contact form or an API end-point. For example, if a form is implemented to store data in a database, someone can try brute-forcing with classic SQL-injection techniques. Others can certainly try calling your API and see if there are any spotty error-handling issues. Sanitize all inputs as much as you can, and handle all errors behind the scenes properly and gracefully without exposing the actual details to the public.</p>\n<p>2. <strong>UPDATE, UPGRADE and REPEAT.</strong> Chances are, a lot of your code is dependent on third-party libraries (open or closed source, does not matter). It is your job to make sure you are using the latest version for them all. When hackers find out you are using outdated or vulnerable code, you are done. I have seen this happening way too many times than I can count over the years when websites got hacked and outdated plugins or libraries was the main culprit.</p>\n<p>You might be saying, \"Hey, upgrading that library will break my code!!\". Well, what is your job again? Deal with it.</p>\n<p>3. <strong>Web Application Firewall (WAF)</strong> Consider getting one if your server admin lets you, it can potentially save yourself a lot of embarrassments. Just keep in mind though it should not be your only security strategy, as WAFs will not stop all kinds of attacks. It is still your sole responsibility to write good code and repeat step 1 and 2.</p>\n<p><strong>Happyyyyy coding!</strong></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":"June 24, 2019","updated_date":null,"description":null,"title":"3 Simple Ways to Secure Your Websites/Applications","tags":["Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/5a3022253d6646c0ce3939c478b4481e/ad85c/hacker.webp","srcSet":"/static/5a3022253d6646c0ce3939c478b4481e/61e93/hacker.webp 200w,\n/static/5a3022253d6646c0ce3939c478b4481e/1f5c5/hacker.webp 400w,\n/static/5a3022253d6646c0ce3939c478b4481e/ad85c/hacker.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Do you remember the Amazon outage that affected several high-profile customers back in 2011? On April 21st, widely-used sites such as Reddit…","fields":{"slug":"/engineering/failover-systems-and-loginradius-99-99-uptime/"},"html":"<p>Do you remember the Amazon outage that affected several high-profile customers back in 2011? On April 21st, widely-used sites such as Reddit and Quora were brought down, and many others experienced latency or were knocked offline, too. Early that morning, as part of normal scaling activities, Amazon staff performed a network change. However, the change was done incorrectly and, after the staff attempted to correct it through a rollback, the inner mechanisms of the service made it unavailable to serve read and write requests. The ‘inner mechanisms’ responsible for the service unavailability are out of the scope of this article, but they are described in the <a href=\"https://aws.amazon.com/message/65648/\">service disruption summary</a> that Amazon published. What interests us here is the strategies that companies can use to mitigate the negative effects on their products when a service they rely on fails. These strategies make up what is known as a <em>failover system</em>.</p>\n<p>A failover system is a set of mechanisms that perform <em>failover</em>. In computer networking, failover is the process of switching to a redundant or standby server or network upon the <strong><em>abnormal</em></strong> termination of a previously-active server or network. The benefit of a failover system is obvious: with one in place, you can ensure your product or service will be available even when adverse events take place. Uptime—time during which a service is operational—is crucial to the success of your business. If your services are unavailable, you are likely to lose customers and any revenue they would have generated. In an article entitled <a href=\"https://medium.com/netflix-techblog/lessons-netflix-learned-from-the-aws-outage-deefe5fd0c04\">‘Lessons Netflix Learned from the AWS Outage</a>,’ Netflix talks about the manual process they used to deal with the Amazon outage and acknowledges the importance of automating this process in the future so they can keep scaling their service. That is, the company acknowledges the importance of having an automated failover system in place instead of relying on a team of top engineers <strong><em>manually</em></strong> making changes every time there is an issue.</p>\n<p>How is an automated failover system set up? Let us consider the simplest scenario: setting a failover system for one server. By definition of a failover system, in addition to the main server, we need to have another redundant standby server that we can switch to whenever the main one fails. Since the redundant server must provide the same functionality as the first, it must be identical to it. Additionally, we need a tool that ensures client requests are routed to the redundant server in case of failure of the main one. We can achieve this by using a DNS failover tool. DNS is the internet protocol used to translate human-readable hostnames into IP addresses, and a DNS failover tool makes sure the “dictionary” (DNS tables) used for this translation are updated in the event of an outage. DNS failover tools know when to update the tables by periodically checking on the main server’s status. With these three tools—and some configuration—you can set up a simple, automated failover system. Of course, there are other considerations you must take when setting the failover system, such as ensuring the redundant standby server is hosted in a geographic area different from the main server’s location and using different companies to host your services. That way, your services will be less likely to go down simultaneously. </p>\n<p>At LoginRadius, we have set up automated failover systems in all layers of our architecture, which is why we can ensure 99.99% uptime on a monthly basis. With our services, you can be assured your customers will always be able to engage with your business, ensuring you will never lose these customers and any revenue they will generate. </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":"June 24, 2019","updated_date":null,"description":null,"title":"Failover Systems and LoginRadius' 99.99% Uptime","tags":["Engineering","AWS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.0050251256281406,"src":"/static/aa689bef0926b16dc0f50c38ca2e3f1c/18421/tech.webp","srcSet":"/static/aa689bef0926b16dc0f50c38ca2e3f1c/61e93/tech.webp 200w,\n/static/aa689bef0926b16dc0f50c38ca2e3f1c/1f5c5/tech.webp 400w,\n/static/aa689bef0926b16dc0f50c38ca2e3f1c/18421/tech.webp 719w","sizes":"(max-width: 719px) 100vw, 719px"}}},"author":{"id":"Ruben Gonzalez","github":"rubenprograms","avatar":null}}}},{"node":{"excerpt":"In January of 2019, Akamai acquired Janrain and rebranded their CIAM solution as “Identity Cloud,” a platform designed to improve security…","fields":{"slug":"/identity/best-janrain-alternative/"},"html":"<p>In January of 2019, Akamai acquired Janrain and rebranded their <a href=\"https://www.loginradius.com/blog/2019/06/customer-identity-and-access-management/\">CIAM solution</a> as “Identity Cloud,” a platform designed to improve security access controls and identity management. Before the purchase price was revealed, Forrester predicted it would be in the $250M–$275M range (based on an estimation of Janrain’s annual revenue). In reality, the sale price was <a href=\"https://www.bizjournals.com/portland/news/2019/03/01/that-sale-price-for-janrain-125.html\">$125M</a>—<em>roughly half of Forrester’s estimate</em>. Since then, perhaps in response to the Janrain acquisition, customers have reached out to LoginRadius seeking a Janrain alternative. Here’s what they told us. </p>\n<h2 id=\"why-customers-want-a-janrain-alternative\" style=\"position:relative;\"><a href=\"#why-customers-want-a-janrain-alternative\" aria-label=\"why customers want a janrain alternative permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Why customers want a Janrain alternative</strong></h2>\n<p>LoginRadius has had many conversations with current and former Janrain customers in the last few months. Through these discussions, we’ve learned that the Janrain acquisition is playing out in a similar fashion to the Gigya acquisition. If you’re interested in reading about the pitfalls of the Gigya/SAP merger, you might like our article <a href=\"https://www.loginradius.com/blog/2019/02/looking-gigya-alternative-try-loginradius-superior-modern-identity-platform/\">Looking for a Gigya Alternative?</a>. In it, we explain some of the problems arising from the Gigya/SAP merger. </p>\n<p>Likewise, in this article, I’ll demonstrate that while mergers and acquisitions (M&#x26;A) can be exciting, an acquisition may sometimes be damaging for customers, partners, and employees. To illustrate that, here are some of the reasons customers are seeking a Janrain alternative today.</p>\n<h2 id=\"recent-janrainakamai-complaints\" style=\"position:relative;\"><a href=\"#recent-janrainakamai-complaints\" aria-label=\"recent janrainakamai complaints permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Recent Janrain/Akamai complaints</strong></h2>\n<h3 id=\"we-lost-the-freedom-to-use-our-existing-stack\" style=\"position:relative;\"><a href=\"#we-lost-the-freedom-to-use-our-existing-stack\" aria-label=\"we lost the freedom to use our existing stack 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>“We lost the freedom to use our existing stack.”</h3>\n<p>One of the chief concerns that companies have shared with us involves service level agreements (SLAs). In particular, we’ve heard that many companies fear that Akamai will not offer the flexibility of custom tech stacks. Their concern is that if they use software or apps not provided by Akamai, they’ll lose the quality, availability, and features that they relied on before the merger. </p>\n<p>To put it into perspective, former Gigya customers complained to us that during the SAP acquisition, they didn’t want to switch their tech stack to SAP. However, in order to get a full SLA and the optimal service and features they had come to expect, it suddenly became necessary. </p>\n<p>The reason for their cold feet is simple: switching software can lead to a massive drain of resources within large companies. Therefore, it’s reasonable for companies to avoid that kind of change. Let’s face it, if you already have a tried-and-true tech stack, wouldn’t you want to choose a CIAM solution that works <em>with</em> it?</p>\n<h3 id=\"we-noticed-a-decline-in-support\" style=\"position:relative;\"><a href=\"#we-noticed-a-decline-in-support\" aria-label=\"we noticed a decline in support 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>“We noticed a decline in support.”</h3>\n<p>Anytime a big acquisition or disruption occurs in a company, there’s a high probability that customer service may suffer. In fact, time and again, customers told our consultants that they switched from Akamai/Janrain or Gigya due to a decline in technical assistance and customer support.</p>\n<h3 id=\"what-happened-to-auto-renew\" style=\"position:relative;\"><a href=\"#what-happened-to-auto-renew\" aria-label=\"what happened to auto renew 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 happened to auto-renew?”</h3>\n<p>Another customer related complaint occurred after Akamai acquired Janrain.  Janrain customers became concerned when their accounts did not auto-renew. Since the Janrain/Akamai merger, Akamai is exercising its right to renegotiate terms. As a result, <em>Janrain customers are reported to be wary of the fine print on these new terms</em>.</p>\n<h3 id=\"we-cant-afford-any-outages\" style=\"position:relative;\"><a href=\"#we-cant-afford-any-outages\" aria-label=\"we cant afford any outages 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>“We can’t afford any outages.”</h3>\n<p>Customers revealed that they noticed a <a href=\"https://status.janrain.com/incidents/j66wdht40wmc\">lot of downtime</a> on sites using <a href=\"https://deets.feedreader.com/secure-now.sportsnet.ca\">Akamai Identity Cloud as their provider</a>. Most recently, the <a href=\"https://www.theglobeandmail.com/business/article-i-missed-a-big-chunk-of-the-game-raptors-fans-frustrated-by-rogers/\">NBA Finals game outage</a> on Sportsnet created a lot of heat for Rogers. And since Janrain is the CIAM provider for Rogers, the outage is a result of their inability to handle peak loads. For any business that experiences surges in logins, downloads, or streaming, <a href=\"https://www.the20.com/blog/the-cost-of-it-downtime/\">downtime can cost $300,000</a> (on average) in lost revenue. </p>\n<p><strong>Key Takeaway</strong> </p>\n<p>Akamai is a security company, so its acquisition of Janrain confirms that CIAM is a security platform. Akamai clearly saw Janrain as a missing piece in their security company. </p>\n<p>However, LoginRadius made this pivot sooner than Janrain—in 2016, to be precise. Simply put, we've spent more years innovating and delivering value to enterprises than Janrain has. Here are just some of the reasons why LoginRadius is the best Janrain alternative for your business.</p>\n<h2 id=\"why-loginradius-should-be-your-janrain-alternative\" style=\"position:relative;\"><a href=\"#why-loginradius-should-be-your-janrain-alternative\" aria-label=\"why loginradius should be your janrain alternative permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Why LoginRadius Should Be Your Janrain Alternative</strong></h2>\n<p><strong>Our 100% uptime is second to none.</strong></p>\n<p>You don’t have to worry about surges or spikes driving customers away and hurting revenue. <em>LoginRadius is the only identity platform with a 100% uptime.</em></p>\n<p><strong>We’re a global leader in customer identity.</strong> </p>\n<p>LoginRadius was named a <a href=\"https://www.loginradius.com/press/loginradius-named-global-ciam-leader-by-identity-research-firm-kuppingercole/\">global CIAM leader</a> by KuppingerCole and has been <em>positioned ahead of other vendors such as ForgeRock, Okta, and Ping Identity.</em> Recently, <a href=\"https://www.loginradius.com/blog/identity/loginradius-announces-17m-series-funding-forgepoint-microsoft/\">LoginRadius received $17 million Series A funding</a>, led by ForgePoint Capital and Microsoft. <em>W__e may not be enterprise-size, but we’re enterprise grade—meaning you’ll get both dedicated service and an exceptional product from LoginRadius.</em> </p>\n<p><strong>We provide data privacy and consent solutions.</strong></p>\n<p>We follow the strictest government regulations for privacy and consent and offer out-of-the-box solutions for GDPR, CCPA, and COPPA compliance. <em>We also provide the highest industry standards for secure single sign-on, data storage, and customer access management.</em></p>\n<p><strong>We’re 100% CIAM with 24/7 tech support.</strong></p>\n<p>Our product consultants, customer support, and tech teams act quickly to meet your needs. <em>Data migration from your current provider is included, as are customization features and fast deployment.</em></p>\n<p><strong>Simply put, LoginRadius excels at what Akamai/Janrain doesn’t—**</strong><em>giving companies an edge over the competition.</em>** </p>\n<hr>\n<h3 id=\"know-your-audience\" style=\"position:relative;\"><a href=\"#know-your-audience\" aria-label=\"know your audience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>Know Your Audience</strong></h3>\n<p><em>“The secret to exceeding customer expectations</em></p>\n<p> <em>is knowing what customers want before they do.”</em></p>\n<hr>\n<h2 id=\"ready-to-switch-to-loginradius\" style=\"position:relative;\"><a href=\"#ready-to-switch-to-loginradius\" aria-label=\"ready to switch to 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><strong>Ready to switch to LoginRadius?</strong></h2>\n<p>LoginRadius is a CIAM solution that offers seamless migration from your current provider within days. <em>We also do migration testing on a staging site, so your customers won’t notice a thing.</em></p>\n<p>Want to hear more about making the switch to LoginRadius? Call a LoginRadius digital identity consultant today at 1-844-625-8889. We’ll be happy to give you a product demo so you can compare LoginRadius with your current provider. </p>\n<p><a href=\"https://www.loginradius.com/book-demo/\"><img src=\"/23b2208278dbd4fe5b7ddff1307ce0b5/CTA-Graphics-for-Blogs-V02.01-15.webp\" alt=\"Janrain alternative\"></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":"June 24, 2019","updated_date":null,"description":"Akamai purchased Janrain in January 2019 and renamed its CIAM solution Identity Cloud, a platform designed to strengthen security access controls and identity management.","title":"Why LoginRadius Is the Best Akamai Identity Cloud (Janrain) Alternative","tags":["public-sector"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/f0a4b456371af805e58752d5abeee474/7f8e9/janrain-feature.webp","srcSet":"/static/f0a4b456371af805e58752d5abeee474/61e93/janrain-feature.webp 200w,\n/static/f0a4b456371af805e58752d5abeee474/1f5c5/janrain-feature.webp 400w,\n/static/f0a4b456371af805e58752d5abeee474/7f8e9/janrain-feature.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"<p>Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.</p>\n<p>We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the <a href=\"https://www.loginradius.com/\">LoginRadius website</a>—to be faster, more intuitive, and developer-first in every way.</p>\n<p>The goal? Having them spend less time searching and more time building.</p>\n<h2 id=\"whats-new-and-improved-on-the-loginradius-website\" style=\"position:relative;\"><a href=\"#whats-new-and-improved-on-the-loginradius-website\" aria-label=\"whats new and improved on the loginradius website permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s New and Improved on the LoginRadius Website?</h2>\n<p>LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.</p>\n<p>Here’s a closer look at what’s new and why it’s important:</p>\n<h3 id=\"a-developer-friendly-dark-theme\" style=\"position:relative;\"><a href=\"#a-developer-friendly-dark-theme\" aria-label=\"a developer friendly dark theme permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Developer-Friendly Dark Theme</h3>\n<p><img src=\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\" alt=\"This image shows how LoginRadius offers several authentication methods like traditional login, social login, passwordless login, passkeys and more in a dark mode.\">    </p>\n<p>Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.</p>\n<p>The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.</p>\n<p>So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.</p>\n<h3 id=\"clear-categorization-for-loginradius-capabilities\" style=\"position:relative;\"><a href=\"#clear-categorization-for-loginradius-capabilities\" aria-label=\"clear categorization for loginradius capabilities permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Clear Categorization for LoginRadius Capabilities</h3>\n<p><img src=\"/e5358b82be414940f3fb146013845933/capabilities.webp\" alt=\"This image shows a breakdown of all the LoginRadius CIAM capabilities, including authentication, security, UX, scalability and multi-brand management.\"></p>\n<p>We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:</p>\n<ul>\n<li>Authentication: Easily understand <a href=\"https://www.loginradius.com/blog/identity/authentication-option-for-your-product/\">how to choose the right login method</a>, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code.</li>\n<li>Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts.</li>\n<li>User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences.</li>\n<li>High Performance &#x26; Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions.</li>\n<li>Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs.</li>\n</ul>\n<p>This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.</p>\n<h3 id=\"developer-first-navigation\" style=\"position:relative;\"><a href=\"#developer-first-navigation\" aria-label=\"developer first navigation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Developer-First Navigation</h3>\n<p><img src=\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\" alt=\"This image shows the LoginRadius menu bar, highlighting the developer dropdown.\">   </p>\n<p>We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.</p>\n<p>The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.</p>\n<h3 id=\"quick-understanding-of-integration-benefits\" style=\"position:relative;\"><a href=\"#quick-understanding-of-integration-benefits\" aria-label=\"quick understanding of integration benefits permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Quick Understanding of Integration Benefits</h3>\n<p><img src=\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\" alt=\"This image shows a list of popular programming languages and frameworks offered by LoginRadius.\"></p>\n<p>Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.</p>\n<p>Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.</p>\n<h2 id=\"over-to-you-now\" style=\"position:relative;\"><a href=\"#over-to-you-now\" aria-label=\"over to you now permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Over to You Now!</h2>\n<p>Check out our <a href=\"https://www.loginradius.com/\">revamped LoginRadius website</a> and see how the improved experience makes it easier to build, scale, and secure your applications.</p>\n<p>Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":846,"currentPage":142,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}