​
Introduction

This tutorial will help you enable Sign in with Farcaster in your application, as well as enabling write access to Farcaster on behalf of that user. We’ve partnered with the wonderful team at Neynar on this use case who have implemented Dynamic as part of Sign in with Neynar. This means three things for you:
  • it’s completely plug and play, drop in the code snippet and ship
  • warps are already sponsored by Neynar
  • you get the best of Dynamic and Neynar in one go

​
Video walkthrough

​
Live demo

You can see this flow in action on the Neynar demo: https://demo.neynar.com/. You can find the code for this demo here.

​
Step By Step Walkthrough

We recommend referring to the Neynar guide for the most up-to-date information.

​
Configure Neynar

Go to the Neynar Developer Portal settings tab and update the following: Name - Displayed to the user in Step 3. Logo URL - Displayed to the user in Step 3. Use a PNG or SVG format. Authorized origins - Authorized origins are the HTTP origins that host your web application. e.g. https://demo.neynar.com This is required to pass user credentials back to your application securely. This cannot contain wildcards or IP addresses.

​
Drop in the code snippet

Add the following code snippet to your html, replacing YOUR_NEYNAR_CLIENT_ID with your Neynar client ID. You can find this in the Neynar Developer Portal App tab: 
<html>
  <body>
    <div
      class="neynar_signin"
      data-client_id="YOUR_NEYNAR_CLIENT_ID"
      data-success-callback="onSignInSuccess"
      data-theme="dark"> <!-- defaults to light, unless specified -->
    </div>
		<script src="https://neynarxyz.github.io/siwn/raw/1.2.0/index.js" async></script>
		<script>
      // Define the onSignInSuccess callback function
      function onSignInSuccess(data) {
        console.log("Sign-in success with data:", data);
        // Your code to handle the sign-in data
      }
	   </script>
  </body>
</html>

​
Handle callback

Once the user is authenticated and a signer has been authorized by the user, the signer_uuid and fid will be passed in via the data object in the callback function. signer_uuid is unique to your app and is used to write to Farcaster on behalf of the user (same uuid format) fid: This is the unique Farcaster identifier for the user e.g. 6131 Store the signer_uuid securely on your backend or the browser’s local storage, it’s not meant to be exposed to the user or anyone other than you. Switch the app to the logged-in state for that Farcaster user.

​
Ship it!

You’re all set! The user is now logged in and you should use the fid for any read APIs and the signer_uuid to do any write actions on behalf of the user in your App.