<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="258483" data-post-id="258483">
  <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-258483-update-1" class="anchor" href="#p-258483-update-1" aria-label="Heading link" rel="nofollow"></a>Update</h2>
<p>I will be speaking at ElixirConf 2022 on this topic, and I plan to release a new Hex package, <code>WebAuthnLiveComponent</code>. <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>The package is a work in progress, and I have most of the Phoenix code in place. Since WebAuthn is a browser API, I have added a JS hook named <code>WebAuthn</code>, which is used by the component’s HTML form.</p>
<h2><a name="p-258483-call-for-help-2" class="anchor" href="#p-258483-call-for-help-2" aria-label="Heading link" rel="nofollow"></a>Call for Help</h2>
<p>In order to release this as a package, I need to bundle the JS with the Elixir code. I haven’t found clear instructions for doing this in the <a href="https://hex.pm/docs/publish" rel="nofollow">Hex</a> or <a href="https://hexdocs.pm/mix/1.13/Mix.Project.html" rel="noopener nofollow ugc">Mix</a> docs. I’ve referenced the source code in <a href="https://github.com/phoenixframework/phoenix_live_view" rel="noopener nofollow ugc"><code>phoenix_live_view</code></a> and <a href="https://github.com/geolessel/react-phoenix" rel="noopener nofollow ugc"><code>react-phoenix</code></a>, but it’s not clear exactly what I need to do for a LiveComponent with a JS hook.</p>
<p><strong>So, I’m looking for help getting the JS module into the Hex package</strong>, assuming this can/should be done. If publishing to NPM isn’t necessary, I’d like to avoid it.</p>
<ul>
<li>Repo: <a href="https://github.com/liveshowy/webauthn_live_component" rel="noopener nofollow ugc">webauthn_live_component</a></li>
<li>Related Branch: <a href="https://github.com/liveshowy/webauthn_live_component/tree/%236_add_js_hooks" rel="noopener nofollow ugc">#6_add_js_hooks</a> (WIP)</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="258483" data-batch-url="/posts/batch_likers">
                        5
                      </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/implementing-webauthn-via-liveview/47131/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-258483" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="258483"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="258486" data-post-id="258486">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="type1fool" data-post="22" data-topic="47131">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/type1fool/48/26216_2.png" class="avatar"> type1fool:</div>
<blockquote>
<p>In order to release this as a package, I need to bundle the JS with the Elixir code. I haven’t found clear instructions for doing this in the <a href="https://hex.pm/docs/publish" rel="nofollow">Hex</a> or <a href="https://hexdocs.pm/mix/1.13/Mix.Project.html" rel="nofollow">Mix</a> docs.</p>
</blockquote>
</aside>
<p>Neither of those are directly involved, other than making sure your <code>package.json</code> file winds up in the Hex package along with the desired JS. For instance, here’s the config from <code>phoenix_html</code>:</p>
<p><a href="https://github.com/phoenixframework/phoenix_html/blob/master/mix.exs#L45" class="onebox" target="_blank" rel="noopener nofollow">https://github.com/phoenixframework/phoenix_html/blob/master/mix.exs#L45</a></p>
<p>The other half of the setup is in the generated esbuild config in any Phoenix app:</p>
<p><a href="https://github.com/phoenixframework/phoenix/blob/f256e80e852d516852b4a8e2c1a94801689721e4/installer/templates/phx_single/config/config.exs#L38" class="onebox" target="_blank" rel="noopener nofollow">https://github.com/phoenixframework/phoenix/blob/f256e80e852d516852b4a8e2c1a94801689721e4/installer/templates/phx_single/config/config.exs#L38</a></p>
<p>Setting <a href="https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders" rel="nofollow"><code>NODE_PATH</code> to <code>../deps</code> means</a> that <em>any</em> Hex package in <code>deps</code> that also quacks like an Node package (ie, has a <code>package.json</code>) will work. For instance, that’s how you can say <code>import "phoenix_html"</code> in <code>app.js</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="258486" data-batch-url="/posts/batch_likers">
                        3
                      </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/implementing-webauthn-via-liveview/47131/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-258486" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="258486"
                     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 #22"></div>
  </section>
</div>
    <div class="postbit" id="258575" data-post-id="258575">
  <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">
								<aside class="quote no-group quote-modified" data-username="al2o3cr" data-post="23" data-topic="47131">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/al2o3cr/48/3457_2.png" class="avatar"> al2o3cr:</div>
<blockquote>
<p><code>env: %{"NODE_PATH" =&gt; Path.expand("../deps", __DIR__)}</code></p>
</blockquote>
</aside>
<p>Thank you, Matt! <img src="https://forum.elixirforum.com/images/emoji/apple/beers.png?v=15" title=":beers:" class="emoji" alt=":beers:" loading="lazy" width="20" height="20"> The <code>phoenix_html</code> example was very helpful. The only other hurdle was that I had been using the component via a local path instead of GitHub or Hex, so the JS wasn’t being pulled in. Now that I’m using the (currently private) Hex package, everything is in its right place <img src="https://forum.elixirforum.com/images/emoji/apple/musical_note.png?v=15" title=":musical_note:" class="emoji" alt=":musical_note:" 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="258575" 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/implementing-webauthn-via-liveview/47131/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-258575" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="258575"
                     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 #23"></div>
  </section>
</div>
    <div class="postbit" id="267373" data-post-id="267373">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is awesome.</p>
<p>I was frantically searching for a Fido implementation, because I want to make use of <a href="https://developer.apple.com/passkeys/" rel="noopener nofollow ugc">Passkeys</a> after updating my Mac &amp; related devices, but I may not be able to implement it from scratch like you did!!</p>
<p>Perhaps you can add a demo like this:</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://www.passkeys.io">
  <header class="source">
      <img src="https://cdn.prod.website-files.com/624e9fd04b88a0ef6aa9c286/6358eac6bf1bca1f882b56f8_Favicon_passkey_32x32px.png" class="site-icon" alt="" width="32" height="32">

      <a href="https://www.passkeys.io" target="_blank" rel="noopener nofollow ugc">passkeys.io</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/330;"><img src="https://cdn.prod.website-files.com/624e9fd04b88a0ef6aa9c286/631e406d94d7efa8c925e571_Thumbnail.png" class="thumbnail" alt="" width="690" height="330"></div>

<h3><a href="https://www.passkeys.io" target="_blank" rel="noopener nofollow ugc">Passkeys.io – A Real-World Passkey Demo &amp; Info Page</a></h3>

  <p>Try a Realistic Passkey Demo Login and User Profile. Browse the Passkey Directory and Find Websites With Passkey Support. Learn About Device Compatibility and Technical Details.</p>


  </article>

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

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

<p>Thank You.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="267373" 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/implementing-webauthn-via-liveview/47131/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-267373" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="267373"
                     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 #24"></div>
  </section>
</div>
    <div class="postbit" id="267429" data-post-id="267429">
  <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>Hey <a class="mention" href="/u/derpycoder" rel="nofollow">@derpycoder</a>! At ElixirConf, I released an early alpha WebAuthnLiveComponent on Hex. It’s not ready for production, but you can find more details in the <a href="https://forum.elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941" rel="nofollow">forum thread</a> dedicated to the new package. Now that LiveView 0.18 is out, I am planning to update the component, add tests and docs, and get it ready for beta testing before the end of the year.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="267429" data-batch-url="/posts/batch_likers">
                        3
                      </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/implementing-webauthn-via-liveview/47131/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-267429" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="267429"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>