<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nikolay Poturnak</title>
    <description>The latest articles on DEV Community by Nikolay Poturnak (@munkey).</description>
    <link>https://dev.to/munkey</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F604811%2F8a5ec096-9c0e-43dc-af5e-db5e4181017e.png</url>
      <title>DEV Community: Nikolay Poturnak</title>
      <link>https://dev.to/munkey</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/munkey"/>
    <language>en</language>
    <item>
      <title>Launched - Passwordless login with one-click, biometric, or QR-code</title>
      <dc:creator>Nikolay Poturnak</dc:creator>
      <pubDate>Thu, 06 May 2021 08:51:11 +0000</pubDate>
      <link>https://dev.to/idemeum/launched-passwordless-login-with-one-click-biometric-or-qr-code-333n</link>
      <guid>https://dev.to/idemeum/launched-passwordless-login-with-one-click-biometric-or-qr-code-333n</guid>
      <description>&lt;p&gt;Excited to share! We launched idemeum - &lt;strong&gt;Passwordless Identity Platform&lt;/strong&gt;. You can try &lt;a href="https://idemeum.com"&gt;idemeum&lt;/a&gt; and let us know what you think. &lt;/p&gt;

&lt;p&gt;We are on product hunt. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.producthunt.com/posts/idemeum"&gt;https://www.producthunt.com/posts/idemeum&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;idemeum was born out of a simple thought - passwords suck👎. For users, they are hard to create, remember, and access quickly. For developers, they are expensive to manage, create unnecessary vulnerabilities, and add extra friction to user acquisition.&lt;/p&gt;

&lt;p&gt;Today you have 2 choices - either struggle with passwords or give up your privacy for social login convenience. We thought users and developers shouldn't have to choose. So we asked a question - can we eliminate passwords and make the sign up experience easy, while keeping it private and secure?&lt;/p&gt;

&lt;p&gt;That is how we created idemeum. idemeum is an identity platform for developers that is:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Passwordless&lt;/strong&gt; - we replaced passwords with one-click, biometric, and QR-code login flows. You choose how you want to login your users - get simplicity of JWT token authentication with one-click, add extra security of WebAuthn with biometric login, or leverage mobile convenience and multi-factor security with QR-code login.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Private&lt;/strong&gt; - we architected idemeum to be private by design. We do not want to be yet another party collecting your users' data. It is none of our business. We rely on client-side encryption to keep user data away from our eyes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User centric&lt;/strong&gt; - our goal is to make login experience invisible to users. Therefore, we made Single Sign-On a priority. And not just within one domain, but rather across apps. So that users login only once, and then they get truly frictionless experience accessing native mobile and web applications.&lt;/p&gt;

&lt;p&gt;We are so excited to launch it today on Product Hunt, and we welcome all and any feedback you might have for us! Please let us know what you think about the product and its applicability, what features you might want us to add, and any questions that you might have.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Passwordless in 10 minutes - idemeum JavaScript SDK</title>
      <dc:creator>Nikolay Poturnak</dc:creator>
      <pubDate>Tue, 27 Apr 2021 05:44:27 +0000</pubDate>
      <link>https://dev.to/idemeum/passwordless-in-10-minutes-idemeum-javascript-sdk-58od</link>
      <guid>https://dev.to/idemeum/passwordless-in-10-minutes-idemeum-javascript-sdk-58od</guid>
      <description>&lt;p&gt;One SDK, 10 minutes of your time, and you can bootstrap passwordless auth for your single-page app. With one SDK, you get all the flows: one-click, WebAuthn, and QR-code login.&lt;/p&gt;

&lt;p&gt;When we developed idemeum JavaScript SDK our goal was simple - provide you with a seamless intuitive integration experience, yet give you the flexibility to implement the login flows that you need. With one SDK and simple configuration you get it all - &lt;strong&gt;one-click&lt;/strong&gt;, &lt;strong&gt;WebAuthn&lt;/strong&gt;, or &lt;strong&gt;QR-code&lt;/strong&gt; login experience. You choose what works best for your use case through simple developer portal settings. &lt;/p&gt;

&lt;p&gt;idemeum JS SDK provides 4 methods to help you with your login needs: &lt;code&gt;login&lt;/code&gt;, &lt;code&gt;logout&lt;/code&gt;, &lt;code&gt;userClaims&lt;/code&gt;, &lt;code&gt;isLoggedIn&lt;/code&gt;. By leveraging these methods you can enable passwordless, secure, and private login for your application. &lt;/p&gt;

&lt;p&gt;In this guide we will go through the following steps to implement passwordless login with idemeum JavaScript SDK:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Initialize idemeum SDK&lt;/li&gt;
&lt;li&gt;Manage authentication state with &lt;code&gt;isLoggedIn&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Log the user in and out with &lt;code&gt;login&lt;/code&gt; and &lt;code&gt;logout&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Get and validate user claims with &lt;code&gt;userClaims&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  1. Initialize idemeum SDK
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Basic HTML setup
&lt;/h2&gt;

&lt;p&gt;Our application will display a simple log in button. Upon clicking a button, user will be authenticated by idemeum. After successful authentication idemeum will  return ID and Access tokens to the application, and the user will be greeted.&lt;/p&gt;

&lt;p&gt;As a first step, let's set up a simple &lt;code&gt;index.html&lt;/code&gt; page that we will be using for our application. We will set up some very simple css styles in order to format how things are organized in our page.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;
&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;idemeum JS SDK&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/css"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/src/styles.css"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;idemeum JS authentication sample&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h4&amp;gt;&lt;/span&gt;Welcome to Application!&lt;span class="nt"&gt;&amp;lt;/h4&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"initial"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Loading...&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;And our simple &lt;code&gt;styles.css&lt;/code&gt; file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/* our css style sheet that we save in styles.css and then import in out index page */&lt;/span&gt;

&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;#initial&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;align-self&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="py"&gt;justify-self&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#eee&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;300px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;27px&lt;/span&gt; &lt;span class="m"&gt;18px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Import idemeum JS SDK
&lt;/h2&gt;

&lt;p&gt;We can now import idemeum JavaScript SDK. For this guide we will simply import the script from idemeum CDN.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://asset.idemeum.com/webapp/SDK/idemeum.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Initialize idemeum SDK
&lt;/h2&gt;

&lt;p&gt;We can now initialize idemeum SDK instance. Do not forget to use your &lt;code&gt;clientId&lt;/code&gt; that you obtained from idemeum developer portal.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;      &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;idemeum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;IdemeumManager&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="c1"&gt;// 👇 Replace clientId with the the one you get from idemeum developer portal&lt;/span&gt;
        &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;clientId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;00000000-0000-0000-0000-000000000000&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  2. Manage user authentication state
&lt;/h1&gt;

&lt;p&gt;idemeum SDK helps you manage authentication state of the user, so that you can determine if the user is logged in or not, and then take actions depending on the outcome. idemeum &lt;code&gt;isLoggedIn&lt;/code&gt; returns Boolean value to identify the user authentication state.&lt;/p&gt;

&lt;p&gt;In our application we will follow the following logic.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If the user is logged in, we will greet the user and display user claims.&lt;/li&gt;
&lt;li&gt;In case the user is not logged in, we will not show any content and will simply display the login button.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As you can see in the code below, we are simply using &lt;code&gt;login&lt;/code&gt; method for button &lt;code&gt;onclick&lt;/code&gt; event.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;      &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;isUserLoggedIn&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Process the user logged-in state. &lt;/span&gt;
        &lt;span class="nx"&gt;idemeum&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isLoggedIn&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;//  Display user claims if the user is logged in&lt;/span&gt;
            &lt;span class="nx"&gt;renderUserClaims&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
          &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;errorData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Display the login button if the user is NOT logged in&lt;/span&gt;
            &lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&amp;lt;button id="btn-login" onclick="login()"&amp;gt;Log in&amp;lt;/button&amp;gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;initial&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
          &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And we can trigger &lt;code&gt;isUserLoggedIn()&lt;/code&gt; simply when the body of the document loads.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;   &lt;span class="nt"&gt;&amp;lt;body&lt;/span&gt; &lt;span class="na"&gt;onload=&lt;/span&gt;&lt;span class="s"&gt;"isUserLoggedIn()"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  3. Log the user in
&lt;/h1&gt;

&lt;p&gt;When user clicks &lt;code&gt;Log in&lt;/code&gt; button, idemeum SDK will trigger the &lt;code&gt;login&lt;/code&gt; method. Let's define what will need to happen in our application. On success our application will receive ID and Access tokens from idemeum. We will need to process and validate those tokens. In case there is failure, we can process that as well in our code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;      &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;login&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;idemeum&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;login&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
          &lt;span class="na"&gt;onSuccess&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;signinResponse&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Your application will receive ID and Access tokens from idemeum&lt;/span&gt;
            &lt;span class="c1"&gt;// renderUserClaims() (defined below) validates the oidc token and fetches the user approved claims&lt;/span&gt;
            &lt;span class="nx"&gt;renderUserClaims&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
          &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="na"&gt;onError&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;errorResponse&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// If there is an error you can process it here&lt;/span&gt;
          &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  4. Get and validate user claims
&lt;/h1&gt;

&lt;p&gt;idemeum SDK returns ID and Access tokens upon successful user login. For token validation you can:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Validate token yourself using any of the open source JWT token validation &lt;a href="https://jwt.io/"&gt;libraries&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Use idemeum SDK that provides &lt;code&gt;userClaims&lt;/code&gt; method to validate tokens.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In our guide we will rely on idemeum SDKs to validate tokens and extract user identity claims. In the code below we will take user claims (first name, last name, and email), and we will display these claims when the user is logged in.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;      &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;renderUserClaims&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;idemeum&lt;/span&gt;
          &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userClaims&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
          &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userClaimsResponse&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;//fetch user approved claims from OIDC token&lt;/span&gt;
            &lt;span class="nx"&gt;htmlStart&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&amp;lt;div&amp;gt;
                          &amp;lt;p align="left"&amp;gt;You are currently logged in.&amp;lt;/p&amp;gt;
                          &amp;lt;pre id="ipt-user-profile" align="left"&amp;gt;User profile:&amp;lt;br&amp;gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="nx"&gt;htmlProfile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
              &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;b&amp;gt;&amp;lt;h3 style='color:Tomato;'&amp;gt;First Name:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="nx"&gt;userClaimsResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;given_name&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/h3&amp;gt;&amp;lt;/b&amp;gt;&amp;lt;br&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;b&amp;gt;&amp;lt;h3 style='color:Tomato;'&amp;gt;Last Name:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="nx"&gt;userClaimsResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;family_name&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/h3&amp;gt;&amp;lt;/b&amp;gt;&amp;lt;br&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;b&amp;gt;&amp;lt;h3 style='color:Tomato;'&amp;gt;Email:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
              &lt;span class="nx"&gt;userClaimsResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

            &lt;span class="nx"&gt;htmlEnd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`
                    &amp;lt;/pre&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;button id="btn-logout" onclick="idemeum.logout();isUserLoggedIn();"&amp;gt;Log out&amp;lt;/button&amp;gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;initial&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
              &lt;span class="nx"&gt;htmlStart&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;htmlProfile&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;htmlEnd&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
          &lt;span class="p"&gt;})&lt;/span&gt;
          &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;errorResponse&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// If there is an error you can process it here&lt;/span&gt;
          &lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🎉 We are done with our simple SPA application!&lt;/p&gt;

&lt;p&gt;You can check the full working code in CodeSandbox &lt;strong&gt;&lt;a href="https://codesandbox.io/s/idemeum-javascript-sample-app-3noir"&gt;here&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;You can check &lt;strong&gt;&lt;a href="https://jsdemo.idemeum.com"&gt;live demo&lt;/a&gt;&lt;/strong&gt; of how you can authenticate users: one-click, WebAuthn, or QR-code. &lt;/p&gt;




&lt;p&gt;At &lt;strong&gt;&lt;a href="https://idemeum.com"&gt;idemeum&lt;/a&gt;&lt;/strong&gt; we build All-in-One Passwordless Identity Platform. We are happy to help you solve your sign up and login challenges.&lt;/p&gt;

&lt;p&gt;Also published &lt;a href="https://blog.idemeum.com/passwordless-in-10-minutes-idemeum-javascript-sdk/"&gt;here&lt;/a&gt;. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>security</category>
      <category>passwordless</category>
    </item>
    <item>
      <title>All-in-one JavaScript SDK to make web apps passwordless</title>
      <dc:creator>Nikolay Poturnak</dc:creator>
      <pubDate>Tue, 20 Apr 2021 21:10:22 +0000</pubDate>
      <link>https://dev.to/idemeum/all-in-one-javascript-sdk-to-make-web-apps-passwordless-37p</link>
      <guid>https://dev.to/idemeum/all-in-one-javascript-sdk-to-make-web-apps-passwordless-37p</guid>
      <description>&lt;p&gt;Hey guys! &lt;/p&gt;

&lt;p&gt;I built &lt;strong&gt;Passwordless Platform&lt;/strong&gt;, and am &lt;em&gt;looking for honest feedback to make the product useful&lt;/em&gt;. &lt;/p&gt;

&lt;p&gt;I embraced on a journey to combine passwordless authentication with the power of Single Sing-On across apps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I took what &lt;strong&gt;Auth0&lt;/strong&gt; is doing (set of SDKs and tools to outsource auth e2e)&lt;/li&gt;
&lt;li&gt;Combined it with what &lt;strong&gt;social login&lt;/strong&gt; is doing (SSO across domains and apps)&lt;/li&gt;
&lt;li&gt;Added privacy so that only users have access to identity data&lt;/li&gt;
&lt;li&gt;...and created &lt;strong&gt;idemeum&lt;/strong&gt;. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Today I have JavaScript SDK that can integrate into your SPA app and enable 3 types of auth flows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Login with one-click&lt;/li&gt;
&lt;li&gt;Login with biometrics&lt;/li&gt;
&lt;li&gt;Login with mobile app&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let me know what you think. I will be happy to share working code examples of how to use JS SDK to go passwordless.&lt;/p&gt;

&lt;p&gt;Live demo so you can play with auth experience. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://jsdemo.idemeum.com"&gt;https://jsdemo.idemeum.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>security</category>
    </item>
    <item>
      <title>Passwordless Authentication Overview</title>
      <dc:creator>Nikolay Poturnak</dc:creator>
      <pubDate>Sun, 28 Mar 2021 08:16:03 +0000</pubDate>
      <link>https://dev.to/idemeum/passwordless-authentication-overview-1fjd</link>
      <guid>https://dev.to/idemeum/passwordless-authentication-overview-1fjd</guid>
      <description>&lt;p&gt;This technology guide will help us first take a look at the current state of password-based authentication, and then we'll dig into various technologies that can help you go passwordless with your apps.&lt;/p&gt;

&lt;h1&gt;
  
  
  Password-based world
&lt;/h1&gt;

&lt;p&gt;Digital identity is so critical to &lt;strong&gt;everything&lt;/strong&gt; we do online, yet it gets compromised in almost every cyber security breach. Every now and then we would hear the news and learn about yet another data breach where identity compromise would be at the core of it. But not everybody is willing to accept the simple truth - &lt;strong&gt;we are not equipped with the proper tools to protect our identity&lt;/strong&gt;. We keep using old inefficient architectures and tools that have been invented decades ago.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxgzuemzm9eu66iov5k9v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxgzuemzm9eu66iov5k9v.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First passwords probably arrived at the Massachusetts Institute of Technology in the &lt;strong&gt;mid-1960s&lt;/strong&gt;, when researchers at the university built a massive time-sharing computer called CTSS. The punchline is that even then, passwords didn't protect users as well as they could have.&lt;/p&gt;

&lt;p&gt;Fast forward 60 years and we are still using the same &lt;strong&gt;"strings of characters"&lt;/strong&gt; that can ruin our lives and reveal everything about us. Your email. Your bank account. Your files. Your private photos. Your location. No matter how complex, no matter how unique, our passwords can no longer protect us. We constantly try to patch passwords, but we are unsuccessful. Take &lt;strong&gt;Multi-Factor Authentication&lt;/strong&gt; as an example. Despite the obvious benefits, users are still leveraging it on a selective basis due to the significant user experience friction that it introduces.&lt;/p&gt;

&lt;p&gt;At idemeum we believe patching passwords is no longer an option. We have to come up with simple, secure, and passwordless technology stack to handle our authentication online.&lt;/p&gt;

&lt;h2&gt;
  
  
  How passwords survived for that long
&lt;/h2&gt;

&lt;p&gt;Using passwords to access online services is a commonplace experience and so are the user frustrations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx72g6tbqg76h8d7ygv78.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx72g6tbqg76h8d7ygv78.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Passwords have survived for that long probably due to the three major reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplicity&lt;/strong&gt; - passwords are very simple to use. Type in characters, press a button, and you are in. No additional hardware required and no compatibility issues with pretty much any service online.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Ubiquity&lt;/strong&gt; - passwords are everywhere. Unfortunately, they are like digital waste - everywhere we go, we leave a password behind. The experience of using passwords is so ingrained in our digital routine that there is no need to explain anyone how to use them. It is familiar and casual.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Replaceability&lt;/strong&gt; - when compromised passwords are easy to replace. Unlike biometrics that are immutable, we can generate as many passwords as we want. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Why passwords need to go away
&lt;/h2&gt;

&lt;p&gt;When one starts digging into real password experience and implications the reality becomes more disappointing.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Expensive&lt;/strong&gt; - passwords are expensive for users and developers alike. Developers pay maintenance $ for storing, hashing, encrypting, and managing password infrastructure. Users pay productivity hours given the fact that passwords cause lock-outs, need to be reset frequently, and consume time with inevitable recovery flows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Cause friction&lt;/strong&gt; - yes typing password is simple. But looking at the overall lifecycle, we first need to create one, and with more and more stringent requirements (seven uppercase letters, four special characters, etc.) it is not an easy feat. But the real dance comes when you need to remember your password out of 100s of combinations that you already have 😤.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Wildly insecure&lt;/strong&gt; - more than 80% of breaches are due to compromised credentials. The statistics is validating that hackers' tools are effective: phishing, spear phishing, brute forcing, rainbow tables, and many others are always there to aid in compromising your password.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The reality is that we are all annoyed by passwords. We've got dozens to remember, some of them annoyingly complex, and on any given day, as we read e-mails, send tweets, and order groceries online, we're bound to forget one, or at least mistype it. Moreover, we know passwords are going to compromised. That will happen sooner or later. And no one is going to enjoy it when that happens.&lt;/p&gt;

&lt;h1&gt;
  
  
  Passwordless world
&lt;/h1&gt;

&lt;p&gt;Passwordless authentication (or “modern authentication,” as it is known in the industry) is the term used to describe a group of identity verification methods that don’t rely on passwords. Biometrics, security keys, certificates, and specialized mobile applications are all considered passwordless authentication methods.&lt;/p&gt;

&lt;p&gt;We will now get deeper into each passwordless technology:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;em&gt;Certificate based authentication&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Magic links&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;One-time passwords (OTPs)&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Hardware tokens&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Webauthn/FIDO2&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Mobile as authenticator&lt;/em&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  1. Certificate based authentication
&lt;/h2&gt;

&lt;p&gt;Certificate based authentication allows users to securely access an application by exchanging a &lt;strong&gt;digital certificate&lt;/strong&gt; instead of a username and password.&lt;/p&gt;

&lt;p&gt;To create a digital certificate, &lt;strong&gt;Public Key Infrastructure (PKI)&lt;/strong&gt; 🔐 must be used. PKI allows for what is called an asymmetric encryption. Client generates two keys: &lt;strong&gt;private key&lt;/strong&gt; that is kept secret by its owner, and &lt;strong&gt;public key&lt;/strong&gt; that is disseminated widely and openly. Leveraging this asymmetric key pair, PKI enables:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Public key encryption&lt;/strong&gt; - message is encrypted with a recipient's public key. For properly chosen and used algorithms, messages cannot in practice be decrypted by anyone who does not possess the matching private key.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Digital signatures&lt;/strong&gt; - message is signed with the sender's private key and can be verified by anyone who has access to the sender's public key. This verification proves that the sender had access to the private key, and therefore is very likely to be the person associated with the public key. This also ensures that the message has not been tampered with, as a signature is mathematically bound to the message it originally was made from, and verification will fail for practically any other message, no matter how similar to the original message.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Client can then create a digital certificate that will conform to &lt;strong&gt;X.509 standard&lt;/strong&gt;. X509 certificate will have various fields to identify the owner, including &lt;em&gt;public key&lt;/em&gt;, &lt;em&gt;subject name&lt;/em&gt;, &lt;em&gt;validity period&lt;/em&gt; and others. The key here is that digital certificate needs be &lt;strong&gt;signed&lt;/strong&gt; by some trusted 3rd party, so that this certificate can be trusted to represent identity of the owner.&lt;/p&gt;

&lt;p&gt;In order to use digital certificate to authenticate to a target application, client will need to share a X.509 digital certificate with the application along with the &lt;strong&gt;proof of possession&lt;/strong&gt;. Proof of possession will be represented by a nonce signed by a private key. When application receives the digital certificate, it can extract the user information from that certificate, and then will verify proof of possession to make sure that the requestor actually owns the private key.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxaxf5ydakheqwzcpz0c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxaxf5ydakheqwzcpz0c.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Certificate based authentication is very popular in enterprise space due to the fact that most employee devices are managed with &lt;strong&gt;MDM&lt;/strong&gt;, and it is convenient and easy to provision certificates to client devices.&lt;/p&gt;

&lt;p&gt;However, certificate based authentication is not as prevalent in consumer and developer space, as it is quite complex to install and manage X.509 certificates on unmanaged user devices. Some vendors try to create mobile and desktop applications that aim to simplify certificate provisioning and management, but the user experience will still be complex for ordinary users. &lt;/p&gt;

&lt;h2&gt;
  
  
  2. Magic links
&lt;/h2&gt;

&lt;p&gt;With magic links an application sends a unique URL link to user's email address or mobile phone via SMS. There is no need to enter any credentials. Instead, the user clicks on the magic link to authenticate. Since the magic link includes unique one-time authentication token, the user is logged in and redirected to an application landing page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpelmsash18l272x1dlp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpelmsash18l272x1dlp.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Magic links enable great frictionless experience for the users as there are no credentials to remember and very few steps to perform.&lt;/p&gt;

&lt;p&gt;However, we believe that to provide best possible experience magic links need to be combined with cross app &lt;strong&gt;Single Sign-On&lt;/strong&gt;, so that when the users verify their email with magic link they can maintain the session and seamlessly login across applications. &lt;/p&gt;

&lt;h2&gt;
  
  
  3. One-time passwords (OTPs)
&lt;/h2&gt;

&lt;p&gt;OTPs are heavily used in multi-factor authentication flows, but one-time passwords or one-time codes can also be used as a standalone authentication method.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;OTPs are time-bound numeric codes linked to a reference.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;One-time passwords function via random algorithms that create a new and random code each time access is requested.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;These codes are sent to a user upon providing a reference (email address or phone number). When the user enters the code back to a target application, the user is authenticated.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;As soon as the OTP enables access to the account, its validity comes to an end. Since an OTP (a four or six-digit numerical PIN code in most instances) can be entered just once, it’s not as risky as static passwords that can be used multiple times.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The biggest advantage offered by OTPs in contrast to standalone passwords is that they’re safe from replay attacks. In plain language, an adversary who uses trickery to capture your OTP can’t reapply it, since it’s no longer valid for future logins or sessions.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Hardware tokens
&lt;/h2&gt;

&lt;p&gt;A hardware security token is a physical device that validates user’s identity and grants access to the target application or resource. The user must possess this token to complete the authentication process. Hardware tokens can be used as a primary authentication method, or used in combination with other authentication factors such as username and password.&lt;/p&gt;

&lt;p&gt;Hardware tokens come in many forms, most commonly as USB tokens, key fobs, and wireless Bluetooth tokens. Also, there are three main types of hardware tokens.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Connected tokens&lt;/strong&gt; - a user must plug the security token into the system, computer, cardholder, etc. to complete the verification. Two examples of this type of token includes a USB token and a Common Access Card (CAC), the latter of which requires the use of a CAC reader.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2gwyne8pm46j5vk1ef99.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2gwyne8pm46j5vk1ef99.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Disconnected tokens&lt;/strong&gt; - these are the small devices that look like a sim card, keychain fob, or USB flash drive. These tokens generate a unique and temporary cryptographic code that must be input by the user to gain access to a computer resource.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhft0ysrdqsce278npmxv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhft0ysrdqsce278npmxv.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Contactless tokens&lt;/strong&gt; - with contactless tokens, you don’t need to connect to a device or enter any access codes. Instead, contactless devices connect with the system wirelessly. Based on the connection’s credentials, the system either grants or denies access. The most noteworthy examples of contactless tokens are Bluetooth tokens. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  5. Webauthn / FIDO2
&lt;/h2&gt;

&lt;p&gt;The Web Authentication API (also known as WebAuthn) is a specification written by the W3C and FIDO, with the participation of Google, Mozilla, Microsoft, Yubico, and others. The API allows servers to register and authenticate users using public key cryptography instead of a password.&lt;/p&gt;

&lt;p&gt;WebAuthn is part of the FIDO2 framework, which is a set of technologies that enable passwordless authentication between servers, browsers, and authenticators. Today WebAuthn is supported by major browsers, including Chrome, Firefox, Edge, and Safari.&lt;/p&gt;

&lt;p&gt;Webauthn allows applications to integrate with strong biometric authenticators built into end user devices, like Windows Hello or Apple’s Touch ID. Instead of a password, a private-public key-pair (known as a credential) is created for a website. The private key is stored securely on the user’s device; a public key and randomly generated credential ID is sent to the server for storage. The server can then use that public key to prove the user’s identity.&lt;/p&gt;

&lt;p&gt;Let's first look at the major components required to enable passwordless authentication with Webauthn.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2y7x575ghis7mtwmz88v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2y7x575ghis7mtwmz88v.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Webauthn API&lt;/strong&gt; - common and public API implemented by all major browsers that provide a mechanism to interact with FIDO based authenticators. This API defines registration, meaning enrollment of a credential, and authentication methods.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;FIDO2 server&lt;/strong&gt; - FIDO2 implementation in the application's backend. FIDO2 server calls browser based Webauthn API in order to communicate with the platform or roaming authenticator.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;CTAP&lt;/strong&gt; - Client to Authenticator Protocol. CTAP defines how the FIDO client running on a specific platform, e.g. an operating system or a web browser, can talk to an external authenticator such as a USB-powered security key or a mobile phone that can interact with the computer via NFC or Bluetooth.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;FIDO authenticator&lt;/strong&gt; - hardware based authenticator (USB device or built-in biometric sensor) that protects that user private key with which the authentication is performed. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Here is the high level flow to show how Webauthn authentication is performed on the web.&lt;/p&gt;

&lt;h3&gt;
  
  
  Webauthn registration
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;First a user proves his identity with some other means, such as proving ownership of an email (using magic link), or uploading ID document for online identity proofing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;FIDO2 server starts the registration process by calling Webauthn browser API with the registration request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Webauthn API communicates with FIDO authenticator over CTAP to create scoped credentials for the user.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Private key will be stored with authenticator and public key will be passed to the application backend. Response to the FIDO2 backend server will include various attributes including public key, attestation, and client data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Application backend will store the public key and associate it with the identity of the user.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Webauthn authentication
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;User requests access to the application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;FIDO2 communicates with the Webauthn API using authentication method and passing the authentication challenge.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Webauthn API passes the request to authenticate and challenge to FIDO authenticator using CTAP protocol.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;User is prompted to use biometrics to unlock access to authenticator private key.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Upon success, challenge is signed with the user private key by FIDO2 authenticator and is passed back to application backend.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Application validates the signed challenge with the user public key and grants access to the user.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Webauthn is the modern authentication protocol that is currently undergoing broader adoption across website and browsers. It offers strong passwordless authentication for the users, however as you can see it is not solving enrollment / registration step. To provide complete frictionless experience to users Webauthn needs to be paired with other tools such as magic link or online identity proofing to address user enrollment&lt;/p&gt;

&lt;p&gt;You can try Webauthn demo &lt;a href="https://webauthn.io/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Mobile as authenticator
&lt;/h2&gt;

&lt;p&gt;The last passwordless method we wanted to cover is using your mobile phone as an authenticator. It is also called &lt;strong&gt;Passwordless MFA&lt;/strong&gt; as it combines multiple authentication factors together:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Something you have&lt;/strong&gt; - you mobile phone and certificate that resides on your mobile device.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Something you are&lt;/strong&gt; - mobile device biometric sensor, such as Face ID or Touch ID.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are various implementations that we have seen in the industry, but we believe that the best and most secure implementation should be leveraging FIDO and Hardware Backed Security on a mobile device. Meaning that authentication shall be driven by FIDO protocol, and both iOS and Android support FIDO today. And the FIDO private keys need to be protected by HSM modules on mobile devices (Secure Enclave on iOS or TEE / StrongBox on Android).&lt;/p&gt;

&lt;p&gt;The most typical authentication flow is to install and leverage a mobile app that will handle authentication.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fez3xepj1o72cj08myl4g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fez3xepj1o72cj08myl4g.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;User requests access to an application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;QR-code is displayed instead of asking user for any input. There are various possibilities here - for instance asking for email and then sending push notification, but we find QR-code providing the most seamless experience.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;User scans the QR code with mobile app.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Application triggers FIDO based authentication.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;User authenticates with a biometric sensor on a mobile device.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The application verifies the authentication response according to FIDO spec and grants access to the user. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  Final thoughts
&lt;/h1&gt;

&lt;p&gt;When we talk about Passwordless Authentication we immediately think and focus on &lt;strong&gt;authentication&lt;/strong&gt; only. However, we need to think about user digital identity journey holistically - how will users enroll into our identity system, how will we authenticate them strongly yet providing great experience, and how will we let users manage and maintain their digital identity.&lt;/p&gt;

&lt;p&gt;At &lt;strong&gt;&lt;a href="https://idemeum.com/?utm_source=devto&amp;amp;utm_medium=community&amp;amp;utm_campaign=ultimate_guide" rel="noopener noreferrer"&gt;idemeum&lt;/a&gt;&lt;/strong&gt; we believe that at this day and age there are 3 major requirements for implementing a &lt;strong&gt;successful login system&lt;/strong&gt; for a modern application:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;It needs to be passwordless&lt;/strong&gt; - no more passwords, no more compromises, no more frustrated users who are overwhelmed with account creation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;It needs to offer Single Sign-On&lt;/strong&gt; - users need to login once and be able to access any application they want without any boundaries. No one wants to verify his email or enroll a new FIDO key with every new application sign up.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;It needs to guarantee privacy&lt;/strong&gt; - privacy is becoming ever more important in our digital world. Digital identity is critical and it needs to be owned and controlled by users, and not monetized by 3rd party companies.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At &lt;strong&gt;&lt;a href="https://idemeum.com/?utm_source=devto&amp;amp;utm_medium=community&amp;amp;utm_campaign=ultimate_guide" rel="noopener noreferrer"&gt;idemeum&lt;/a&gt;&lt;/strong&gt; we build &lt;strong&gt;All-in-One Passwordless Identity Platform&lt;/strong&gt;. We are happy to help you solve your sign up and login challenges.&lt;/p&gt;

&lt;p&gt;Also published &lt;a href="https://blog.idemeum.com/noob-guide-to-passwordless-authentication/" rel="noopener noreferrer"&gt;here&lt;/a&gt;. &lt;/p&gt;

</description>
      <category>auth</category>
      <category>passwordless</category>
      <category>beginners</category>
      <category>security</category>
    </item>
  </channel>
</rss>
