diff --git a/README.md b/README.md
index 8344b74..15ccb4e 100644
--- a/README.md
+++ b/README.md
@@ -74,13 +74,6 @@ export async function GET(request: Request) {
return new Response('signer_uuid query param is required', { status: 400 })
const signer = await neynarClient.getSigner(signerUuid)
- // If you also want the user's username + profile, or you can fetch separately
- // TODO: this is not currently supported by the types
- if (signer.status === 'approved') {
- const user = await neynarClient.getUserByFid(signer.fid)
- return NextResponse.json({ ...signer, user })
- }
-
return NextResponse.json(signer)
}
@@ -131,16 +124,25 @@ export default function LoginButton() {
const handleClick = useCallback(() => void signIn(), [signIn])
- if (isLoading || signer?.status === 'pending_approval')
- return // TODO: display QR code
- if (signer === null) return
- if (signer.status === 'approved')
- return
Signed in as FID {signer.fid}
- if (signer.status === 'revoked')
- return
-
- // This should never happen, unless the server fails while registering the signer
- throw new Error(`Unknown signer status: ${signer.status}`)
+ switch (signer?.status) {
+ case undefined:
+ return
+ case 'generated':
+ // This should never happen, unless the server fails while registering the signer
+ throw new Error('Unregistered signer')
+ case 'pending_approval':
+ return (
+ <>
+ {/* See below */}
+
+
+ >
+ )
+ case 'approved':
+ return
{data?.username}
+ case 'revoked':
+ return
+ }
}
```
@@ -165,6 +167,52 @@ export default function QRCodeModal() {
}
```
+### Fetch user
+
+After signing in, you'll likely want to fetch the user's profile so you can display their username and avatar. To do this, we need to create an API route and then fetch the user from the client:
+
+```ts
+type Props = {
+ params: {
+ fid: string
+ }
+}
+
+export async function GET(request: Request, { params }: Props) {
+ const fid = parseInt(params.fid)
+ if (!fid) return new Response('fid is invalid', { status: 400 })
+
+ const user = await neynarClient.getUserByFid(fid)
+ return NextResponse.json(signer)
+}
+
+export async function POST() {
+ const signer = await neynarClient.createSigner()
+ return NextResponse.json(signer)
+}
+```
+
+This library is agnostic of your client data fetching solution. The example uses [`swr`](https://swr.vercel.app), but you can use [`react-query`](https://tanstack.com/query/v3/) or plain `fetch` if you'd like.
+
+```tsx
+'use client'
+
+import { type User } from 'neynar-next/server'
+import useSWR from 'swr'
+
+export default function UserProfile() {
+ const { signer } = useSigner()
+
+ const { data } = useSWR(
+ signer?.status === 'approved' ? `/api/users/${signer.fid}` : null,
+ )
+
+ if (!data) return null
+
+ return
{data.username}
+}
+```
+
### Fetch feed
Add the API to your server:
@@ -184,7 +232,7 @@ export async function GET(request: Request) {
}
```
-Then, hit the API from your client. This library is agnostic of your data fetching solution. The example uses [`swr`](https://swr.vercel.app), but you can use [`react-query`](https://tanstack.com/query/v3/) or plain `fetch` if you'd like.
+Then, hit the API from your client:
```tsx
'use client'
diff --git a/src/server/NeynarClient.ts b/src/server/NeynarClient.ts
index ba6dce0..9e9b545 100644
--- a/src/server/NeynarClient.ts
+++ b/src/server/NeynarClient.ts
@@ -45,11 +45,12 @@ export default class NeynarClient {
}
async getUserByFid(fid: number) {
- return this.get<{ result: { user: User } }>(
+ const response = await this.get<{ result: { user: User } }>(
'user',
{ fid: fid.toString() },
1,
)
+ return response.result.user
}
async getFollowingFeed(fid: number, { cursor, limit }: Pagination = {}) {