mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-16 08:08:56 -05:00
fix: session and siwf result ui
This commit is contained in:
parent
4fbcbdba6f
commit
e6654a5e5b
4
package-lock.json
generated
4
package-lock.json
generated
@ -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",
|
||||||
|
|||||||
@ -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>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user