<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="293745" data-post-id="293745">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="artokun" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/artokun/120/31110_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  artokun
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey it’s been a couple months since the latest progress update and commit. Wondering if this awesome project still has wings! i would love to implement passwordless auth to my projects someday using your package.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293745" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-293745" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293745"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #31"></div>
  </section>
</div>
    <div class="postbit" id="293768" data-post-id="293768">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="scoop" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/scoop/120/31638_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  scoop
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I want to chime in with a +1 as well and generally give some support and encouragement <img src="https://forum.elixirforum.com/images/emoji/apple/clap/2.png?v=15" title=":clap:t2:" class="emoji" alt=":clap:t2:" loading="lazy" width="20" height="20"></p>
<p>And show gratitude <img src="https://forum.elixirforum.com/images/emoji/apple/folded_hands/2.png?v=15" title=":folded_hands:t2:" class="emoji" alt=":folded_hands:t2:" loading="lazy" width="20" height="20"></p>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/otter.png?v=15" title=":otter:" class="emoji only-emoji" alt=":otter:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293768" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-293768" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293768"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #32"></div>
  </section>
</div>
    <div class="postbit" id="293870" data-post-id="293870">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="type1fool" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/120/26216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  type1fool
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<blockquote>
<p>Wondering if this awesome project still has wings!</p>
</blockquote>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/heart_decoration.png?v=15" title=":heart_decoration:" class="emoji" alt=":heart_decoration:" loading="lazy" width="20" height="20"> Thank you <a class="mention" href="/u/artokun" rel="nofollow">@artokun</a> &amp; <a class="mention" href="/u/scoop" rel="nofollow">@scoop</a>! <img src="https://forum.elixirforum.com/images/emoji/apple/heart_decoration.png?v=15" title=":heart_decoration:" class="emoji" alt=":heart_decoration:" loading="lazy" width="20" height="20"></p>
<p>I suppose an update would be appropriate.</p>
<p>By all means, feel free to try out <code>webauthn_components</code> now in a non-production environment. Feedback on documentation, the API, and the demo app would be great! If you have some familiarity with WebAuthn, you could even open an issue or PR if you have ideas for improvements.</p>
<h2><a name="p-293870-update-1" class="anchor" href="#p-293870-update-1" aria-label="Heading link" rel="nofollow"></a>Update</h2>
<p>The development pause is a result of a few challenges:</p>
<ul>
<li>I had been waiting for Passkey support in 1Password (finally in beta).</li>
<li>I hadn’t been working on any projects using Passkeys.</li>
<li>There’s not enough time in the day.</li>
</ul>
<p>Last weekend, I installed the 1Password beta and successfully added Passkeys for a few personal accounts to observe the user flow. It’s nice having Passkeys stored in a cross-platform virtual device, but not a hard requirement for supporting Passkeys in an application.</p>
<p>This weekend, I plan on adding Passkeys to a side project. As part of this process, I will be making improvements to the package as issues surface.</p>
<p>I just spent some time working on the Phoenix app generator (<a href="https://github.com/phoenixframework/phoenix/pull/5505" rel="noopener nofollow ugc">PR 5505</a>), and have a better understanding of <code>Mix.Task</code> and <code>Mix.Generator</code>. This will help with building code generators for the various schemas and migrations. As a result, adoption should be much easier, especially for greenfield apps.</p>
<p>I’ll keep this thread updated as things change.</p>
<p>Btw, welcome to ElixirForum, <a class="mention" href="/u/artokun" rel="nofollow">@artokun</a>! <img src="https://forum.elixirforum.com/images/emoji/apple/partying_face.png?v=15" title=":partying_face:" class="emoji" alt=":partying_face:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293870" data-batch-url="/posts/batch_likers">
                        8
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-293870" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293870"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #33"></div>
  </section>
</div>
    <div class="postbit" id="294045" data-post-id="294045">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="type1fool" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/120/26216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  type1fool
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<h2><a name="p-294045-update-1" class="anchor" href="#p-294045-update-1" aria-label="Heading link" rel="nofollow"></a>Update</h2>
<p>I have opened a draft PR which adds a task for generating the core modules required for <code>WebauthnComponents</code>.</p>
<p><a href="https://github.com/liveshowy/webauthn_components/pull/49" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/liveshowy/webauthn_components/pull/49</a></p>
<p>This PR is focused on generating the following files:</p>
<ul>
<li>User schema, migration, and context</li>
<li>UserKey schema, migration, and context</li>
<li>UserToken schema, migration, and context</li>
</ul>
<p>Some opinions and best practices are codified in the generated modules:</p>
<ol>
<li><code>Ecto.ULID</code> is used as the primary key for each of the schemas.</li>
</ol>
<ul>
<li>ULIDs are essentially sortable UUIDs, which prevent user enumeration without adding much complexity.</li>
</ul>
<ol>
<li>Each context only interacts directly with one schema.</li>
</ol>
<ul>
<li>This makes the contexts easier to read &amp; maintain compared to combining them into one <code>Identity</code> or <code>Authentication</code> context.</li>
</ul>
<h3><a name="p-294045-scope-2" class="anchor" href="#p-294045-scope-2" aria-label="Heading link" rel="nofollow"></a>Scope</h3>
<p>To limit scope, I am also constraining the generators to work best with Phoenix apps with no existing authentication. It may be possible to add <code>WebauthnComponents</code> to apps with basic authentication (a la <code>phx.gen.auth</code>), but doing so seems quite complex.</p>
<p>User email confirmation is also out of scope for now.</p>
<h2><a name="p-294045-call-for-feedback-3" class="anchor" href="#p-294045-call-for-feedback-3" aria-label="Heading link" rel="nofollow"></a>Call for Feedback</h2>
<p>Before I wrap up this PR and move on to generators for LiveView modules, <strong>I want your feedback</strong>.</p>
<ul>
<li>Do you see any typos or blatant errors?</li>
<li>If these files were generated in a new application, would they be a good starting point?</li>
<li>Do you like the general direction of the project’s generators?</li>
<li>Is there a better name for the task than <code>wac.install</code>?</li>
</ul>
<p>I’ll take feedback in this thread, but I’d prefer comments on the PR, especially as comments on the files for anything wrong or confusing.</p>
<p>In the meantime, I will be adding test generators for the contexts so they can be deployed with confidence.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="294045" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-294045" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="294045"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #34"></div>
  </section>
</div>
    <div class="postbit" id="300097" data-post-id="300097">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="type1fool" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/120/26216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  type1fool
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<h2><a name="p-300097-update-1" class="anchor" href="#p-300097-update-1" aria-label="Heading link" rel="nofollow"></a>Update</h2>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"> Version 0.5.0 has been released <img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"></p>
<p>This release adds a <code>wac.install</code> mix task, which will generate schemas, contexts, and migrations for the following schemas:</p>
<ul>
<li><code>%User{}</code></li>
<li><code>%UserKey{}</code></li>
<li><code>%UserToken{}</code></li>
</ul>
<p>Each schema has a corresponding context with CRUD functions, where each function is has some documentation and a typespec - except a few token helpers from <code>phx.gen.auth</code>, which were overlooked.</p>
<p>My hope is that this further simplifies the process of implementing Passkeys in <strong>new LiveView apps</strong>.  The generator is a bit opinionated about id types. To prevent user enumeration while maintaining sortability, <code>Ecto.ULID</code> is used as the <code>:id</code> type on the schemas.</p>
<p>Also of note, <code>*.get/2</code> functions return ok/error tuples, which may be a departure from other context modules in your existing app.</p>
<p>Thanks to <a class="mention" href="/u/jc00ke" rel="nofollow">@jc00ke</a> for providing feedback on the templates PR.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="300097" data-batch-url="/posts/batch_likers">
                        8
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-300097" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="300097"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #35"></div>
  </section>
</div>
    <div class="postbit" id="301592" data-post-id="301592">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="type1fool" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/120/26216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  type1fool
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<h1><a name="p-301592-update-1" class="anchor" href="#p-301592-update-1" aria-label="Heading link" rel="nofollow"></a>Update</h1>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"> Version 0.6.0 has been released <img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"></p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://hex.pm/packages/webauthn_components">
  <header class="source">
      <img src="https://hex.pm/images/hex-full-a8183c4f9adac71516516d107d402b18.svg?vsn=d" class="site-icon" alt="" width="136" height="120">

      <a href="https://hex.pm/packages/webauthn_components" target="_blank" rel="noopener nofollow">Hex</a>
  </header>

  <article class="onebox-body">
    <img width="160" height="160" src="https://hex.pm/images/favicon-160-3770bc59f1f8ba7656b4db5a1eacd8e3.png?vsn=d" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://hex.pm/packages/webauthn_components" target="_blank" rel="noopener nofollow">webauthn_components</a></h3>

  <p>Passkey authentication for Phoenix LiveView applications.</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>This release extends the new <code>wac.install</code> Mix Task to generate all the code required to implement Passkeys in a new LiveView application. Also, the <code>TokenComponent</code> has been removed in favor of cookie-based session storage.</p>
<p>The <a href="https://hexdocs.pm/webauthn_components/readme.html" rel="noopener nofollow ugc">readme</a> and <a href="https://hexdocs.pm/webauthn_components/webauthn_flows.html" rel="noopener nofollow ugc">other documentation</a> has been updated, and setup should now be a much more streamlined process. Using <code>wac.install</code>, you no longer need to generate the LiveView or other code to get up and running. See the <a href="https://hex.pm/packages/webauthn_components" rel="nofollow"><code>wac.install</code></a> docs for available options.</p>
<p>Thanks to <a class="mention" href="/u/oullette" rel="nofollow">@oullette</a> <a class="mention" href="/u/sax" rel="nofollow">@sax</a> <a class="mention" href="/u/mward-sudo" rel="nofollow">@mward-sudo</a> and everyone who’s provided feedback on this project.</p>
<h2><a name="p-301592-end-user-demo-2" class="anchor" href="#p-301592-end-user-demo-2" aria-label="Heading link" rel="nofollow"></a>End User Demo</h2>
<div class="youtube-onebox lazy-video-container" data-video-id="GGWM_ZM3xlg" data-video-title="WebauthnComponents Demo v0.6.0" data-video-start-time="" data-provider-name="youtube">
  <a href="https://www.youtube.com/watch?v=GGWM_ZM3xlg" target="_blank" class="video-thumbnail" rel="noopener nofollow ugc">
    <img class="youtube-thumbnail" src="https://img.youtube.com/vi/GGWM_ZM3xlg/maxresdefault.jpg" title="WebauthnComponents Demo v0.6.0" width="690" height="388">
  </a>
</div>

<h2><a name="p-301592-state-of-passkeys-3" class="anchor" href="#p-301592-state-of-passkeys-3" aria-label="Heading link" rel="nofollow"></a>State of Passkeys</h2>
<p>Passkey support has been picking up steam, and I’m looking forward to Windows adding support for credential management across devices. Recently, Passkey support graduated out of beta for <a href="https://1password.com/product/passkeys?utm_source=google&amp;utm_medium=cpc&amp;utm_campaign=19853587186&amp;utm_content=651757510707&amp;utm_term=1password%20passkeys&amp;gclsrc=aw.ds&amp;gclid=CjwKCAjw6p-oBhAYEiwAgg2PgnZ-_CuEWDqeJl5lF3CryNTWXQRFfy6b3x6-cMAceGGa3nHifmNf5xoCdOgQAvD_BwE" rel="noopener nofollow ugc">1Password</a>, my preferred credential manager. MacOS and Android users can use their platform-specific credential managers as well.</p>
<h2><a name="p-301592-next-steps-4" class="anchor" href="#p-301592-next-steps-4" aria-label="Heading link" rel="nofollow"></a>Next Steps</h2>
<p>My next planned improvement is to add Telemetry events to the components and remove all calls to Logger, with the goal of improving observability.</p>
<p>I would also like to document the process of implementing WebauthnComponents in existing applications, but this is a <strong>daunting task</strong>. Providing step-by-step migration from basic auth or 0auth seems feasible, though guides for migrating from <code>phx.gen.auth</code>, Pow, and various packages may put too much burden on maintenance. If you have thoughts or would like to contribute, feel free to ping me here or in an <a href="https://github.com/liveshowy/webauthn_components/issues" rel="noopener nofollow ugc">issue</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="301592" data-batch-url="/posts/batch_likers">
                        11
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-301592" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="301592"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="309423" data-post-id="309423">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Joep" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Joep/120/4629_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Joep
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Dashlane also has <a href="https://www.dashlane.com/passkeys" rel="noopener nofollow ugc">passkeys support</a> these days.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="309423" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-309423" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="309423"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #37"></div>
  </section>
</div>
    <div class="postbit" id="309728" data-post-id="309728">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="type1fool" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/120/26216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  type1fool
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<h1><a name="p-309728-update-1" class="anchor" href="#p-309728-update-1" aria-label="Heading link" rel="nofollow"></a>Update</h1>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"> <a href="https://github.com/liveshowy/webauthn_components/releases/tag/v0.7.0" rel="noopener nofollow ugc">Version 0.7.0</a> has been released, with one new feature and a bug fix.</p>
<ol>
<li>Now, WebauthnComponents supports <a href="https://developers.yubico.com/WebAuthn/Concepts/Passkey_Autofill/" rel="noopener nofollow ugc">Passkey autofill</a>, which streamlines the authentication process for existing users.</li>
<li>Migrations are now generated in a deterministic order, fixing a bug where the <code>users</code> could be generated after its dependent migrations.</li>
</ol>
<h2><a name="p-309728-passkey-autofill-2" class="anchor" href="#p-309728-passkey-autofill-2" aria-label="Heading link" rel="nofollow"></a>Passkey Autofill</h2>
<p>With the introduction of autofill, users will be presented with a Passkey prompt automatically after the authentication component is mounted. Previously, users would need to click the “authenticate” button first, often thinking the email field was also required. With autofill, users have a more seamless authentication experience. <img src="https://forum.elixirforum.com/images/emoji/apple/woman_surfing/4.png?v=15" title=":woman_surfing:t4:" class="emoji" alt=":woman_surfing:t4:" loading="lazy" width="20" height="20"></p>
<p>If a user has multiple accounts on an application, they will still be prompted to select the desired account.</p>
<h2><a name="p-309728-order-of-migrations-3" class="anchor" href="#p-309728-order-of-migrations-3" aria-label="Heading link" rel="nofollow"></a>Order of Migrations</h2>
<p>Most of the templates and generators I created can be generated out of order, but migrations are an exception. Because migration files are generated with a timestamp and <code>users</code> must be created first, it’s important to create them in the correct order.</p>
<p>The migrations generator was using a plain Elixir map for its template files. Elixir maps are unordered, so the order of the keys in code are not necessarily the order they will be processed in <code>Enum</code> functions or <code>for</code> comprehensions. This is an oversight that catches me more often than I’d like to admit. <img src="https://forum.elixirforum.com/images/emoji/apple/see_no_evil_monkey.png?v=15" title=":see_no_evil_monkey:" class="emoji" alt=":see_no_evil_monkey:" loading="lazy" width="20" height="20"></p>
<p>The solution was to convert the template map into a Keyword list, which maintains the order of its keys (<a href="https://github.com/liveshowy/webauthn_components/pull/62" rel="noopener nofollow ugc">fix commit</a>). Now, we can be sure that the <code>users</code> table is created before the <code>user_keys</code> and <code>user_tokens</code> tables which depend on it. <img src="https://forum.elixirforum.com/images/emoji/apple/dizzy.png?v=15" title=":dizzy:" class="emoji" alt=":dizzy:" loading="lazy" width="20" height="20"></p>
<h2><a name="p-309728-credits-4" class="anchor" href="#p-309728-credits-4" aria-label="Heading link" rel="nofollow"></a>Credits</h2>
<p>Shout out to <a href="https://github.com/danielgpinheiro" rel="noopener nofollow ugc">Daniel Pinheiro</a> for introducing the autofill feature and to <a href="https://github.com/suranyami" rel="noopener nofollow ugc">David Parry</a> for reporting the migrations issue.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="309728" data-batch-url="/posts/batch_likers">
                        11
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/39">Post #38</a>
	                </div>
	            </div>
              <div id="likers-container-309728" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="309728"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="339178" data-post-id="339178">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Hermanverschooten" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Hermanverschooten/120/6447_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Hermanverschooten
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi Owen, thanks for the great library.<br>
I just completed adding it to my existing Phoenix application and it works like a charm.<br>
I did a little writeup on <a href="https://til.verschooten.name/til/2024-09-07/passkeys" rel="noopener nofollow ugc">my blog</a> to explain the steps I took.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="339178" data-batch-url="/posts/batch_likers">
                        12
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/40">Post #39</a>
	                </div>
	            </div>
              <div id="likers-container-339178" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="339178"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="339204" data-post-id="339204">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="type1fool" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/120/26216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  type1fool
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Excellent! Thank you for writing and sharing the blog post. I will read it more deeply later, but at first glance it looks like you found implementation fairly straightforward aside from understanding UserToken and an origin issue. This is great to see. <img src="https://forum.elixirforum.com/images/emoji/apple/trophy.png?v=15" title=":trophy:" class="emoji" alt=":trophy:" loading="lazy" width="20" height="20"></p>
<p>—-</p>
<p>I pushed an update to v0.8.0 at ElixirConf last week, and a more detailed post is overdue. Once life is done interfering with my plans, I will be posting that update and revisiting some improvements that have been deferred.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="339204" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/41">Post #40</a>
	                </div>
	            </div>
              <div id="likers-container-339204" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="339204"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #40"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/49941/load_more?page=5">Load more posts</a>
</div></template></turbo-stream>