Seperate SIWN and SIWF

src/components/ui/NeynarAuthButton/index.tsx

@@ -13,9 +13,18 @@ import { useMiniApp } from '@neynar/react';
 import {
   signIn as backendSignIn,
   signOut as backendSignOut,
+  useSession,
 } from 'next-auth/react';
 import sdk, { SignIn as SignInCore } from '@farcaster/frame-sdk';
 
+type User = {
+  fid: number;
+  username: string;
+  display_name: string;
+  pfp_url: string;
+  // Add other user properties as needed
+};
+
 const STORAGE_KEY = 'neynar_authenticated_user';
 const FARCASTER_FID = 9152;
 
@@ -90,6 +99,7 @@ export function NeynarAuthButton() {
   const [storedAuth, setStoredAuth] = useState<StoredAuthState | null>(null);
   const [signersLoading, setSignersLoading] = useState(false);
   const { context } = useMiniApp();
+  const { data: session } = useSession();
   // New state for unified dialog flow
   const [showDialog, setShowDialog] = useState(false);
   const [dialogStep, setDialogStep] = useState<'signin' | 'access' | 'loading'>(
@@ -468,7 +478,7 @@ export function NeynarAuthButton() {
         nonce: nonce,
       };
 
-      const nextAuthResult = await backendSignIn('credentials', signInData);
+      const nextAuthResult = await backendSignIn('neynar', signInData);
       if (nextAuthResult?.ok) {
         setMessage(result.message);
         setSignature(result.signature);
@@ -503,7 +513,10 @@ export function NeynarAuthButton() {
       setSignersLoading(true);
 
       if (useBackendFlow) {
-        await backendSignOut({ redirect: false });
+        // Only sign out from NextAuth if the current session is from Neynar provider
+        if (session?.user?.provider === 'neynar') {
+          await backendSignOut({ redirect: false });
+        }
       } else {
         frontendSignOut();
       }
@@ -528,7 +541,7 @@ export function NeynarAuthButton() {
     } finally {
       setSignersLoading(false);
     }
-  }, [useBackendFlow, frontendSignOut, pollingInterval]);
+  }, [useBackendFlow, frontendSignOut, pollingInterval, session]);
 
   // The key fix: match the original library's authentication logic exactly
   const authenticated =

src/components/ui/wallet/SignIn.tsx

@@ -77,7 +77,7 @@ export function SignIn() {
       const nonce = await getNonce();
       const result = await sdk.actions.signIn({ nonce });
       setSignInResult(result);
-      await signIn('credentials', {
+      await signIn('farcaster', {
         message: result.message,
         signature: result.signature,
         redirect: false,
@@ -96,41 +96,46 @@ export function SignIn() {
   /**
    * Handles the sign-out process.
    *
-   * This function clears the NextAuth session and resets the local
-   * sign-in result state to complete the sign-out flow.
+   * This function clears the NextAuth session only if the current session
+   * is using the Farcaster provider, and resets the local sign-in result state.
    *
    * @returns Promise<void>
    */
   const handleSignOut = useCallback(async () => {
     try {
       setAuthState((prev) => ({ ...prev, signingOut: true }));
-      await signOut({ redirect: false });
+      // Only sign out if the current session is from Farcaster provider
+      if (session?.user?.provider === 'farcaster') {
+        await signOut({ redirect: false });
+      }
       setSignInResult(undefined);
     } finally {
       setAuthState((prev) => ({ ...prev, signingOut: false }));
     }
-  }, []);
+  }, [session]);
 
   // --- Render ---
   return (
     <>
       {/* Authentication Buttons */}
-      {status !== 'authenticated' && (
+      {(status !== 'authenticated' ||
+        session?.user?.provider !== 'farcaster') && (
         <Button onClick={handleSignIn} disabled={authState.signingIn}>
           Sign In with Farcaster
         </Button>
       )}
-      {status === 'authenticated' && (
-        <Button onClick={handleSignOut} disabled={authState.signingOut}>
-          Sign out
-        </Button>
-      )}
+      {status === 'authenticated' &&
+        session?.user?.provider === 'farcaster' && (
+          <Button onClick={handleSignOut} disabled={authState.signingOut}>
+            Sign out
+          </Button>
+        )}
 
       {/* Session Information */}
       {session && (
-        <div className='my-2 p-2 text-xs overflow-x-scroll rounded-lg font-mono border border-secondary-100'>
-          <div className='font-semibold text-gray-500 mb-1'>Session</div>
-          <div className='whitespace-pre'>
+        <div className="my-2 p-2 text-xs overflow-x-scroll rounded-lg font-mono border border-secondary-100">
+          <div className="font-semibold text-gray-500 mb-1">Session</div>
+          <div className="whitespace-pre">
             {JSON.stringify(session, null, 2)}
           </div>
         </div>
@@ -138,17 +143,17 @@ export function SignIn() {
 
       {/* Error Display */}
       {signInFailure && !authState.signingIn && (
-        <div className='my-2 p-2 text-xs overflow-x-scroll rounded-lg font-mono border border-secondary-100'>
-          <div className='font-semibold text-gray-500 mb-1'>SIWF Result</div>
-          <div className='whitespace-pre'>{signInFailure}</div>
+        <div className="my-2 p-2 text-xs overflow-x-scroll rounded-lg font-mono border border-secondary-100">
+          <div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
+          <div className="whitespace-pre">{signInFailure}</div>
         </div>
       )}
 
       {/* Success Result Display */}
       {signInResult && !authState.signingIn && (
-        <div className='my-2 p-2 text-xs overflow-x-scroll rounded-lg font-mono border border-secondary-100'>
-          <div className='font-semibold text-gray-500 mb-1'>SIWF Result</div>
-          <div className='whitespace-pre'>
+        <div className="my-2 p-2 text-xs overflow-x-scroll rounded-lg font-mono border border-secondary-100">
+          <div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
+          <div className="whitespace-pre">
             {JSON.stringify(signInResult, null, 2)}
           </div>
         </div>