In this guide, we’ll take a look at how to implement sign-in with neynar in a React app. For this guide, I am going to be using next.js but the same would work for CRA, remix, or anything based on react!
@neynar/react
layout.tsx
file and wrap your app in a NeynarContextProvider
like this:
clientId
, defaultTheme
and eventsCallbacks
.
clientId
: This is going to be the client ID you get from your neynar, add it to your .env.local
file as NEXT_PUBLIC_NEYNAR_CLIENT_ID
.defaultTheme
: default theme lets you change the theme of your sign-in button, currently, we have only light mode but dark mode is going to be live soon.eventsCallbacks
: This allows you to perform certain actions when the user signs out or auth is successful.page.tsx
file like this:
page.tsx
file access the user data using the useNeynarContext
hook like this:
handlePublishCast
function but we have not yet created it. So, let’s create that and also add the text
useState that we are using in the textarea:
/api/cast
route with the signer uuid and text.
Finally, we need to create the api route which will create casts. Create a new file api/cast/route.ts
in the app
folder and add the following: