fix: session and siwf result ui

This commit is contained in:
Shreyaschorge 2025-07-02 14:10:30 +05:30
parent 4fbcbdba6f
commit e6654a5e5b
No known key found for this signature in database
2 changed files with 21 additions and 21 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@neynar/create-farcaster-mini-app", "name": "@neynar/create-farcaster-mini-app",
"version": "1.2.5", "version": "1.5.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@neynar/create-farcaster-mini-app", "name": "@neynar/create-farcaster-mini-app",
"version": "1.2.5", "version": "1.5.2",
"dependencies": { "dependencies": {
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"inquirer": "^12.4.3", "inquirer": "^12.4.3",

View File

@ -8,17 +8,17 @@ import { Button } from "../Button";
/** /**
* SignIn component handles Farcaster authentication using Sign-In with Farcaster (SIWF). * SignIn component handles Farcaster authentication using Sign-In with Farcaster (SIWF).
* *
* This component provides a complete authentication flow for Farcaster users: * This component provides a complete authentication flow for Farcaster users:
* - Generates nonces for secure authentication * - Generates nonces for secure authentication
* - Handles the SIWF flow using the Farcaster SDK * - Handles the SIWF flow using the Farcaster SDK
* - Manages NextAuth session state * - Manages NextAuth session state
* - Provides sign-out functionality * - Provides sign-out functionality
* - Displays authentication status and results * - Displays authentication status and results
* *
* The component integrates with both the Farcaster Frame SDK and NextAuth * The component integrates with both the Farcaster Frame SDK and NextAuth
* to provide seamless authentication within mini apps. * to provide seamless authentication within mini apps.
* *
* @example * @example
* ```tsx * ```tsx
* <SignIn /> * <SignIn />
@ -45,11 +45,11 @@ export function SignIn() {
// --- Handlers --- // --- Handlers ---
/** /**
* Generates a nonce for the sign-in process. * Generates a nonce for the sign-in process.
* *
* This function retrieves a CSRF token from NextAuth to use as a nonce * This function retrieves a CSRF token from NextAuth to use as a nonce
* for the SIWF authentication flow. The nonce ensures the authentication * for the SIWF authentication flow. The nonce ensures the authentication
* request is fresh and prevents replay attacks. * request is fresh and prevents replay attacks.
* *
* @returns Promise<string> - The generated nonce token * @returns Promise<string> - The generated nonce token
* @throws Error if unable to generate nonce * @throws Error if unable to generate nonce
*/ */
@ -61,13 +61,13 @@ export function SignIn() {
/** /**
* Handles the sign-in process using Farcaster SDK. * Handles the sign-in process using Farcaster SDK.
* *
* This function orchestrates the complete SIWF flow: * This function orchestrates the complete SIWF flow:
* 1. Generates a nonce for security * 1. Generates a nonce for security
* 2. Calls the Farcaster SDK to initiate sign-in * 2. Calls the Farcaster SDK to initiate sign-in
* 3. Submits the result to NextAuth for session management * 3. Submits the result to NextAuth for session management
* 4. Handles various error conditions including user rejection * 4. Handles various error conditions including user rejection
* *
* @returns Promise<void> * @returns Promise<void>
*/ */
const handleSignIn = useCallback(async () => { const handleSignIn = useCallback(async () => {
@ -95,10 +95,10 @@ export function SignIn() {
/** /**
* Handles the sign-out process. * Handles the sign-out process.
* *
* This function clears the NextAuth session and resets the local * This function clears the NextAuth session and resets the local
* sign-in result state to complete the sign-out flow. * sign-in result state to complete the sign-out flow.
* *
* @returns Promise<void> * @returns Promise<void>
*/ */
const handleSignOut = useCallback(async () => { const handleSignOut = useCallback(async () => {
@ -128,9 +128,9 @@ export function SignIn() {
{/* Session Information */} {/* Session Information */}
{session && ( {session && (
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono"> <div className='my-2 p-2 text-xs overflow-x-scroll bg-secondary rounded-lg font-mono border border-primary-100'>
<div className="font-semibold text-gray-500 mb-1">Session</div> <div className='font-semibold text-gray-500 mb-1'>Session</div>
<div className="whitespace-pre"> <div className='whitespace-pre'>
{JSON.stringify(session, null, 2)} {JSON.stringify(session, null, 2)}
</div> </div>
</div> </div>
@ -138,21 +138,21 @@ export function SignIn() {
{/* Error Display */} {/* Error Display */}
{signInFailure && !authState.signingIn && ( {signInFailure && !authState.signingIn && (
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono"> <div className='my-2 p-2 text-xs overflow-x-scroll bg-secondary rounded-lg font-mono border border-primary-100'>
<div className="font-semibold text-gray-500 mb-1">SIWF Result</div> <div className='font-semibold text-gray-500 mb-1'>SIWF Result</div>
<div className="whitespace-pre">{signInFailure}</div> <div className='whitespace-pre'>{signInFailure}</div>
</div> </div>
)} )}
{/* Success Result Display */} {/* Success Result Display */}
{signInResult && !authState.signingIn && ( {signInResult && !authState.signingIn && (
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono"> <div className='my-2 p-2 text-xs overflow-x-scroll bg-secondary rounded-lg font-mono border border-primary-100'>
<div className="font-semibold text-gray-500 mb-1">SIWF Result</div> <div className='font-semibold text-gray-500 mb-1'>SIWF Result</div>
<div className="whitespace-pre"> <div className='whitespace-pre'>
{JSON.stringify(signInResult, null, 2)} {JSON.stringify(signInResult, null, 2)}
</div> </div>
</div> </div>
)} )}
</> </>
); );
} }