{"_id":"@bytefederal/byteauth-nextjs","_rev":"3-ecf29b35d98a905a0cd62fd81e8edf82","name":"@bytefederal/byteauth-nextjs","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.1":{"name":"@bytefederal/byteauth-nextjs","version":"0.1.1","keywords":["auth","authentication","nextjs","nextauth","bitcoin","wallet","crypto","biometric","passwordless","byteauth","bytefederal"],"author":{"name":"ByteFederal"},"license":"MIT","_id":"@bytefederal/byteauth-nextjs@0.1.1","maintainers":[{"name":"bytefederal","email":"lennart@bytefederal.com"}],"homepage":"https://fast.bytefederal.com","bugs":{"url":"https://github.com/bytefederal/byteauth-nextjs/issues"},"dist":{"shasum":"7aefb4be2802cc10a979dd94b619a0298a61c719","tarball":"https://registry.npmjs.org/@bytefederal/byteauth-nextjs/-/byteauth-nextjs-0.1.1.tgz","fileCount":24,"integrity":"sha512-qbbdQpB4FUS25ytXMFF03ATXxt33ZAODLhzRAzqsZkCwk2H+hd9x1m4/eF5UZPwT5NfZQF08AIzg5Fu2+08o9Q==","signatures":[{"sig":"MEUCIQD9TlOKVabcPX6EgKJH+JIDRqDkUtRYy2Ie6skBBTGY4gIgdjsitXZnlyGlwdlw+YEdJNy58A+WpQInn46kRfsJNYQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":234609},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"66403dc929488c16e6a5428b92a843ff15034bc4","scripts":{"dev":"next dev","lint":"eslint \"src/**/*.{ts,tsx}\"","test":"jest","build":"node build.js","clean":"rimraf dist","start":"next start","prepare":"echo 'Skipping build for initial publish'","build:next":"next build","test:watch":"jest --watch","postinstall":"node install.js","prepublishOnly":"echo 'Skipping lint for initial publish'"},"_npmUser":{"name":"bytefederal","email":"lennart@bytefederal.com"},"repository":{"url":"git+https://github.com/bytefederal/byteauth-nextjs.git","type":"git"},"_npmVersion":"9.8.1","description":"A NextJS plugin for ByteAuth's biometric authentication system using crypto wallets","directories":{},"_nodeVersion":"16.16.0","dependencies":{"axios":"^1.6.2","zustand":"^4.4.6","qrcode.react":"^3.1.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","next":"^14.0.0","react":"^18.2.0","eslint":"^8.53.0","rimraf":"^5.0.5","ts-jest":"^29.1.1","next-auth":"^4.24.5","react-dom":"^18.2.0","typescript":"^5.2.2","@types/jest":"^29.5.7","@types/node":"^20.9.0","@types/react":"^18.2.37","eslint-plugin-react":"^7.33.2","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^6.10.0","eslint-plugin-react-hooks":"^4.6.0","@typescript-eslint/eslint-plugin":"^6.10.0"},"peerDependencies":{"next":"^13.0.0 || ^14.0.0","react":"^17.0.0 || ^18.0.0","next-auth":"^4.20.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/byteauth-nextjs_0.1.1_1743854670298_0.2807078648783772","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bytefederal/byteauth-nextjs","version":"0.1.2","keywords":["auth","authentication","nextjs","nextauth","bitcoin","wallet","crypto","biometric","passwordless","byteauth","bytefederal"],"author":{"name":"ByteFederal"},"license":"MIT","_id":"@bytefederal/byteauth-nextjs@0.1.2","maintainers":[{"name":"bytefederal","email":"lennart@bytefederal.com"}],"homepage":"https://fast.bytefederal.com","bugs":{"url":"https://github.com/bytefederal/byteauth-nextjs/issues"},"dist":{"shasum":"9b4982565342769c2d3742e020875d2f30a19878","tarball":"https://registry.npmjs.org/@bytefederal/byteauth-nextjs/-/byteauth-nextjs-0.1.2.tgz","fileCount":24,"integrity":"sha512-UtrzRPzkXJ4BmF5COkajf1c6o73XWWVfMU9cYMJNYnTnzXvVyYRxvWylk+k7vu9oSMp8JMSDPrFfyuEajXE4Tg==","signatures":[{"sig":"MEQCIDJywRHWJUSXxZnx3bea3iASRid93nSx9Sjcl6jKHm7VAiAogBJl8yEQlapxUWoMcAuwmLyAQtCN5fSxQ9NNvsiFVQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":237035},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a8195e66ceac0b470e354ed4e01ef6eb972baf24","scripts":{"dev":"next dev","lint":"eslint \"src/**/*.{ts,tsx}\"","test":"jest","build":"node build.js","clean":"rimraf dist","start":"next start","prepare":"echo 'Skipping build for initial publish'","build:next":"next build","test:watch":"jest --watch","postinstall":"node install.js","prepublishOnly":"echo 'Skipping lint for initial publish'"},"_npmUser":{"name":"bytefederal","email":"lennart@bytefederal.com"},"repository":{"url":"git+https://github.com/bytefederal/byteauth-nextjs.git","type":"git"},"_npmVersion":"9.8.1","description":"A NextJS plugin for ByteAuth's biometric authentication system using crypto wallets","directories":{},"_nodeVersion":"16.16.0","dependencies":{"axios":"^1.6.2","zustand":"^4.4.6","qrcode.react":"^3.1.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","next":"^14.0.0","react":"^18.2.0","eslint":"^8.53.0","rimraf":"^5.0.5","ts-jest":"^29.1.1","next-auth":"^4.24.5","react-dom":"^18.2.0","typescript":"^5.2.2","@types/jest":"^29.5.7","@types/node":"^20.9.0","@types/react":"^18.2.37","eslint-plugin-react":"^7.33.2","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^6.10.0","eslint-plugin-react-hooks":"^4.6.0","@typescript-eslint/eslint-plugin":"^6.10.0"},"peerDependencies":{"next":"^13.0.0 || ^14.0.0","react":"^17.0.0 || ^18.0.0","next-auth":"^4.20.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/byteauth-nextjs_0.1.2_1743855206963_0.5650683504194558","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@bytefederal/byteauth-nextjs","version":"0.1.3","description":"A NextJS plugin for ByteAuth's biometric authentication system using crypto wallets","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"next dev","build:next":"next build","build":"node build.js","start":"next start","lint":"eslint \"src/**/*.{ts,tsx}\"","clean":"rimraf dist","prepare":"echo 'Skipping build for initial publish'","prepublishOnly":"echo 'Skipping lint for initial publish'","postinstall":"node install.js","test":"jest","test:watch":"jest --watch"},"keywords":["auth","authentication","nextjs","nextauth","bitcoin","wallet","crypto","biometric","passwordless","byteauth","bytefederal"],"author":{"name":"ByteFederal"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bytefederal/byteauth-nextjs.git"},"homepage":"https://fast.bytefederal.com","bugs":{"url":"https://github.com/bytefederal/byteauth-nextjs/issues"},"dependencies":{"axios":"^1.6.2","qrcode.react":"^3.1.0","zustand":"^4.4.6"},"peerDependencies":{"next":"^13.0.0 || ^14.0.0","next-auth":"^4.20.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@types/jest":"^29.5.7","@types/node":"^20.9.0","@types/react":"^18.2.37","@typescript-eslint/eslint-plugin":"^6.10.0","@typescript-eslint/parser":"^6.10.0","eslint":"^8.53.0","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","next":"^14.0.0","next-auth":"^4.24.5","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^5.0.5","ts-jest":"^29.1.1","typescript":"^5.2.2"},"_id":"@bytefederal/byteauth-nextjs@0.1.3","gitHead":"0b2040436fa1c4d3d8b5beb417be13b5bc1329d1","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-h5wNy2c4CtWd3fF5I98mXtoDjha++lYJuojUtXP6cmEJ03Gs0EhfofSp5bikcr/f06oczr0aqqPxntlUyvOU/g==","shasum":"d2008245ebbe1392e6a130f7fdfaa8acff0efcac","tarball":"https://registry.npmjs.org/@bytefederal/byteauth-nextjs/-/byteauth-nextjs-0.1.3.tgz","fileCount":24,"unpackedSize":237394,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAwV5rpsoNEo00Z0aGOyLFVYcc0OKgz+IF248fyQ2AEeAiBAHBcy7Mw90kPDigFJBzlHBFyR8aFAzfogH45pAv90aA=="}]},"_npmUser":{"name":"bytefederal","email":"lennart@bytefederal.com"},"directories":{},"maintainers":[{"name":"bytefederal","email":"lennart@bytefederal.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/byteauth-nextjs_0.1.3_1788206859668_0.5105680029282564"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-05T12:04:30.184Z","modified":"2026-08-31T20:07:40.020Z","0.1.1":"2025-04-05T12:04:30.602Z","0.1.2":"2025-04-05T12:15:34.471Z","0.1.3":"2026-08-31T20:07:39.843Z"},"bugs":{"url":"https://github.com/bytefederal/byteauth-nextjs/issues"},"author":{"name":"ByteFederal"},"license":"MIT","homepage":"https://fast.bytefederal.com","keywords":["auth","authentication","nextjs","nextauth","bitcoin","wallet","crypto","biometric","passwordless","byteauth","bytefederal"],"repository":{"type":"git","url":"git+https://github.com/bytefederal/byteauth-nextjs.git"},"description":"A NextJS plugin for ByteAuth's biometric authentication system using crypto wallets","maintainers":[{"name":"bytefederal","email":"lennart@bytefederal.com"}],"readme":"# ByteAuth NextJS\n\n![ByteAuth NextJS](byteauth-nextjs.png)\n\n## Introduction\n\nByteAuth NextJS is a plug-and-play NextJS package that integrates Byte Federal's fast authentication system into your application, leveraging Bitcoin cryptographic (ECDSA/SHA256) standards. This advanced authentication solution offers a seamless way to onboard users and enable secure sign-in functionalities, similar to the WebAuthn standard, but with several groundbreaking features:\n\n- **Enhanced Security**: Cryptographic keys are backed up for added security\n- **Device Independence**: Operates independently of the user's operating system, using a smartphone as a universal access key\n- **Identity Verification**: Incorporates a user identity check to thwart fraudulent access including a liveness check to verify the presence of real human beings during authentication\n- **Wallet Functionality**: Provides users with a wallet that supports Lightning and Bitcoin transactions, enhancing the overall user experience (LNUrl, micropayments, etc.)\n\nBy integrating ByteAuth NextJS, you can easily implement a state-of-the-art, comprehensive authentication system in your NextJS projects, harnessing the robustness and security of Bitcoin's cryptographic infrastructure.\n\n## Philosophy & Reasoning\n\n### Why Passwordless Authentication?\n\nTraditional password-based authentication suffers from numerous limitations:\n\n1. **Security Vulnerabilities**: Passwords can be weak, reused, or stolen\n2. **User Experience Issues**: Users forget passwords, leading to frustrating recovery processes\n3. **Management Overhead**: Password management systems add complexity and cost\n\nByteAuth leverages public-private key cryptography and biometric verification to create a more secure and user-friendly authentication experience. Users never have to remember a password, lose a password, or worry about username theft.\n\n### Why Crypto Wallets?\n\nCrypto wallets provide several advantages as authentication devices:\n\n1. **Cryptographic Security**: Built on Bitcoin's battle-tested cryptographic standards\n2. **Biometric Protection**: Modern smartphone wallets require biometric verification\n3. **Universal Access**: Works across multiple devices and platforms\n4. **Recovery Options**: Private keys can be backed up securely\n5. **Additional Functionality**: Enables crypto transactions and other web3 features\n\n## Features\n\n- **Two Integration Modes**:\n  - **Tab Mode**: Adds a crypto wallet authentication tab to existing login forms\n  - **Standalone Mode**: Creates a dedicated crypto wallet authentication page\n- **QR Code Authentication**: Simple scanning process for users\n- **NextAuth.js Integration**: Works alongside NextAuth.js for comprehensive authentication options\n- **Webhook Support**: Handles registration and login callbacks from ByteAuth servers\n- **Responsive Design**: Works on mobile and desktop devices\n- **Typescript Support**: Fully typed for better developer experience\n- **Session Management**: Integrates with NextAuth's session system\n\n## Installation\n\n```bash\nnpm install byteauth-nextjs\n# or\nyarn add byteauth-nextjs\n```\n\n### Dependencies\n\nByteAuth NextJS requires the following dependencies:\n\n```json\n{\n  \"next\": \"^14.0.0\",\n  \"next-auth\": \"^4.24.5\",\n  \"react\": \"^18.2.0\",\n  \"react-dom\": \"^18.2.0\",\n  \"qrcode.react\": \"^3.1.0\",\n  \"axios\": \"^1.6.2\",\n  \"zustand\": \"^4.4.6\"\n}\n```\n\nMost of these should already be in your NextJS project. If not, install any missing dependencies:\n\n```bash\nnpm install next-auth qrcode.react axios zustand\n# or\nyarn add next-auth qrcode.react axios zustand\n```\n\n## Getting Started\n\n### 1. Configuration\n\nCreate an environment file (`.env.local`) with your ByteAuth configuration:\n\n```\nNEXT_PUBLIC_BYTEAUTH_DOMAIN=your-domain.com\nBYTEAUTH_API_KEY=your-api-key\nNEXT_PUBLIC_BYTEAUTH_HOME_REDIRECT=/dashboard\n```\n\n### 2. Register Your Domain\n\nRegister your domain in the API section [on ByteFederal](https://wallet.bytefederal.com/web/login) to get your API key.\n\n### 3. Add API Endpoints\n\nCreate the necessary API endpoints in your NextJS application. You can copy these files from the package's source:\n\n```\npages/api/byteauth/webhook/registration.ts\npages/api/byteauth/webhook/login.ts\npages/api/byteauth/check.ts\npages/api/auth/[...nextauth].ts\n```\n\n> **Security notice — if you copied these files before v0.1.3, re-copy them.**\n>\n> Versions up to and including 0.1.2 contained a session-verification weakness\n> in `login.ts` and `registration.ts`. Because these handlers are copied into\n> your own codebase rather than imported, **upgrading the package alone does not\n> remediate it** — you must re-copy both files, or apply the equivalent change.\n>\n> The `verifySession` helper exported from `useByteAuth` is deprecated as of\n> v0.1.3 and now always returns false. Verify sessions server-side only.\n\nFor session storage, we recommend using Redis. Install the Redis client:\n\n```bash\nnpm install redis\n# or\nyarn add redis\n```\n\nUpdate the mock functions in the API endpoints to use Redis:\n\n```typescript\n// Example Redis implementation for storing authenticated SIDs\nimport { createClient } from 'redis';\n\nconst redis = createClient({\n  url: process.env.REDIS_URL\n});\n\nasync function storeAuthenticatedSid(sid: string, userId: string): Promise<void> {\n  await redis.connect();\n  await redis.set(`authenticated_sid_${sid}`, userId, {\n    EX: 600 // 10 minutes expiry\n  });\n  await redis.disconnect();\n}\n```\n\n### 4. Set Up NextAuth.js\n\nConfigure NextAuth.js to work with ByteAuth by creating or updating `pages/api/auth/[...nextauth].ts`:\n\n```typescript\nimport NextAuth, { NextAuthOptions } from 'next-auth';\nimport CredentialsProvider from 'next-auth/providers/credentials';\nimport { createClient } from 'redis';\n\n// Redis client for session storage\nconst redis = createClient({\n  url: process.env.REDIS_URL\n});\n\nexport const authOptions: NextAuthOptions = {\n  providers: [\n    CredentialsProvider({\n      // The name to display on the sign-in form\n      name: 'ByteAuth',\n      \n      // Define what fields are available in the credentials object\n      credentials: {\n        sid: { label: \"Session ID\", type: \"text\" }\n      },\n      \n      // This function verifies the ByteAuth session ID and retrieves the user\n      async authorize(credentials) {\n        if (!credentials?.sid) {\n          return null;\n        }\n\n        try {\n          // Connect to Redis\n          await redis.connect();\n          \n          // Check if this SID exists in Redis cache (set by webhook endpoints)\n          const userId = await redis.get(`authenticated_sid_${credentials.sid}`);\n          \n          if (!userId) {\n            return null;\n          }\n          \n          // Get user data from your database\n          const user = await getUserById(userId); // Implement this function\n          \n          if (!user) {\n            return null;\n          }\n          \n          // Clear SID from Redis to prevent reuse\n          await redis.del(`authenticated_sid_${credentials.sid}`);\n          await redis.disconnect();\n          \n          // Return user object which will be stored in the JWT\n          return {\n            id: user.id,\n            email: user.email,\n            name: user.name,\n          };\n        } catch (error) {\n          console.error('Error in ByteAuth authorize:', error);\n          return null;\n        }\n      }\n    }),\n    // Add other providers as needed\n  ],\n  \n  // JWT configuration\n  session: {\n    strategy: 'jwt',\n    maxAge: 30 * 24 * 60 * 60, // 30 days\n  },\n  \n  callbacks: {\n    async jwt({ token, user }) {\n      if (user) {\n        token.userId = user.id;\n      }\n      return token;\n    },\n    async session({ session, token }) {\n      if (token && session.user) {\n        session.user.id = token.userId as string;\n      }\n      return session;\n    },\n  },\n  \n  pages: {\n    signIn: '/login',\n    error: '/auth/error',\n  },\n};\n\n// Helper function to get user by ID (implement based on your database)\nasync function getUserById(userId: string) {\n  // Example with Prisma:\n  // return prisma.user.findUnique({ where: { id: userId } });\n  \n  // Replace with your actual database query\n  return {\n    id: userId,\n    email: 'user@example.com',\n    name: 'Sample User',\n  };\n}\n\nexport default NextAuth(authOptions);\n```\n\n**Note:** You'll need to customize the `getUserById` function to work with your specific database.\n\n### 5. Implement the UI Components\n\n#### Tab Mode (alongside existing login form)\n\n```jsx\nimport { ByteAuth } from 'byteauth-nextjs';\n\nconst LoginPage = () => {\n  return (\n    <div className=\"login-page\">\n      <h1>Sign In</h1>\n      \n      {/* This adds a tab interface with both Email and Crypto Wallet options */}\n      <ByteAuth \n        mode=\"tab\" \n        onAuthSuccess={(user) => {\n          console.log('User authenticated:', user);\n          // Redirect or update UI\n        }} \n      />\n      \n      {/* Your existing email login form remains visible when the Email tab is selected */}\n      <form>\n        {/* Your existing email login form fields */}\n      </form>\n    </div>\n  );\n};\n```\n\n#### Standalone Mode (dedicated crypto login page)\n\n```jsx\nimport { ByteAuth } from 'byteauth-nextjs';\n\nconst CryptoLoginPage = () => {\n  return (\n    <div className=\"crypto-login-page\">\n      <h1>Sign In with ByteWallet</h1>\n      \n      {/* This shows only the QR code for ByteWallet authentication */}\n      <ByteAuth \n        mode=\"standalone\" \n        onAuthSuccess={(user) => {\n          console.log('User authenticated:', user);\n          // Redirect or update UI\n        }} \n      />\n    </div>\n  );\n};\n```\n\n## How It Works\n\n### Authentication Flow\n\n1. **QR Code Generation**:\n   - When the login page loads, ByteAuth generates a unique session ID (SID)\n   - A QR code containing this SID is displayed to the user\n\n2. **User Authentication**:\n   - User scans the QR code with their ByteWallet app\n   - ByteWallet verifies the user's identity with biometrics\n   - User approves the authentication request\n\n3. **Server Validation**:\n   - ByteAuth server calls your webhook endpoints with the user information\n   - Your application verifies the SID against the ByteAuth API\n   - Your application creates or finds the user in your database\n\n4. **Session Establishment**:\n   - Your application stores the authenticated SID with the user ID\n   - The frontend polls the server to check if the SID has been authenticated\n   - When authenticated, the user is redirected to the dashboard or home page\n\n### Component Architecture\n\n```\nByteAuth NextJS\n├── components/\n│   ├── ByteAuth.tsx - Main component with tab and standalone modes\n│   └── QRLogin.tsx - Handles QR code generation and display\n├── hooks/\n│   ├── useByteAuth.ts - Custom hook for authentication process\n│   └── useByteAuthStore.ts - State management using Zustand\n├── config/\n│   └── byteauth.ts - Configuration for API endpoints\n└── pages/api/byteauth/ - API endpoints for authentication\n    ├── webhook/\n    │   ├── registration.ts - Handles user registration\n    │   └── login.ts - Handles user login\n    ├── check.ts - Checks authentication status\n    └── auth.ts - Handles authentication redirection\n```\n\n## Advanced Usage\n\n### Custom Styling\n\nYou can customize the appearance of the ByteAuth components by providing custom CSS:\n\n```jsx\n<ByteAuth\n  mode=\"standalone\"\n  onAuthSuccess={handleAuthSuccess}\n  className=\"my-custom-byteauth\"\n/>\n```\n\nThen define your custom styles:\n\n```css\n.my-custom-byteauth .byteauth-qrcode-container {\n  background-color: #f0f0f0;\n  border-radius: 16px;\n  padding: 24px;\n}\n```\n\n### Handling Authentication Events\n\n```jsx\nimport { useByteAuth } from 'byteauth-nextjs';\n\nconst LoginPage = () => {\n  const { \n    isAuthenticated, \n    user, \n    loading, \n    error, \n    checkAuthStatus \n  } = useByteAuth({\n    redirectOnAuth: true,\n    redirectPath: '/dashboard',\n    pollingInterval: 3000, // Check every 3 seconds\n  });\n\n  // Custom event handling\n  React.useEffect(() => {\n    if (isAuthenticated) {\n      // Custom logic when authenticated\n      console.log('User authenticated:', user);\n      analytics.track('User Login', { method: 'ByteAuth' });\n    }\n  }, [isAuthenticated, user]);\n\n  return (\n    <div>\n      {/* Your login UI */}\n    </div>\n  );\n};\n```\n\n### Integration with Existing Auth Systems\n\nByteAuth can work alongside your existing authentication system:\n\n```jsx\nimport { useSession } from 'next-auth/react';\nimport { ByteAuth, useByteAuth } from 'byteauth-nextjs';\n\nconst LoginPage = () => {\n  const { data: session } = useSession();\n  const { isAuthenticated: isByteAuthenticated } = useByteAuth();\n\n  // Check either authentication method\n  const isAuthenticated = session || isByteAuthenticated;\n\n  if (isAuthenticated) {\n    // User is authenticated via either method\n    return <redirect to=\"/dashboard\" />;\n  }\n\n  return (\n    <div>\n      {/* Traditional login form */}\n      <form>...</form>\n      \n      {/* Or ByteAuth */}\n      <div className=\"byteauth-section\">\n        <h3>Or login with your crypto wallet</h3>\n        <ByteAuth mode=\"standalone\" />\n      </div>\n    </div>\n  );\n};\n```\n\n## Security Considerations\n\nByteAuth uses Bitcoin's cryptographic standards (ECDSA/SHA256) for authentication, providing a high level of security. However, proper implementation is crucial:\n\n1. **API Key Security**: Keep your ByteAuth API key secure and never expose it to the client\n2. **HTTPS Required**: Always use HTTPS for all endpoints\n3. **Session Validation**: Always verify session integrity with the ByteAuth API\n4. **SID Storage**: Use secure storage like Redis with appropriate TTL for SIDs\n5. **CORS Configuration**: Configure CORS correctly for your webhook endpoints\n\n## Troubleshooting\n\n### QR Code Not Displaying\n\nMake sure your environment variables are correctly set:\n\n```\nNEXT_PUBLIC_BYTEAUTH_DOMAIN=your-domain.com\nBYTEAUTH_API_KEY=your-api-key\n```\n\n### Authentication Not Working\n\n1. Check your API endpoints are correctly set up\n2. Verify your domain is registered with ByteAuth\n3. Check server logs for any errors in the webhook endpoints\n4. Ensure Redis or your chosen session storage is working correctly\n\n### ByteWallet App Issues\n\nMake sure users have the latest version of the ByteWallet app installed from:\n- [iOS App Store](https://apps.apple.com/us/app/bytewallet/id1569062610)\n- [Google Play Store](https://play.google.com/store/apps/details?id=io.bytewallet.bytewallet)\n\n## Implementation Complexity\n\nThe implementation complexity of ByteAuth NextJS can be broken down as follows:\n\n### Frontend Components (Low-Medium Complexity)\n- QR code generation and display\n- Tab interface for integration with existing forms\n- Polling mechanism for authentication status checks\n\n### API Endpoints (Medium Complexity)\n- Webhook handlers for registration and login\n- Session verification and management\n- Integration with NextAuth.js\n\n### Session Storage (Medium Complexity)\n- Redis or similar storage for SIDs\n- Secure session management\n- Proper expiration and cleanup\n\n### User Management (Varies)\n- Integration with your existing user database\n- User creation and lookup logic\n- Session establishment with your auth system\n\nThe overall implementation is designed to be as straightforward as possible, with most of the cryptographic complexity handled by the ByteAuth server and ByteWallet app.\n\n## Future Development\n\n- **Multi-language Support**: Add internationalization for the UI components\n- **Advanced Theming**: Enhanced customization options\n- **Analytics Integration**: Built-in tracking for authentication events\n- **Multi-tenant Support**: For applications serving multiple domains\n- **Server-side Rendering Optimizations**: For improved performance\n\n## Learn More\n\n- [Learn more about ByteAuth / Fast Login](https://fast.bytefederal.com)\n- [Learn more about ByteWallet](https://www.bytefederal.com/bytewallet)\n- [ByteAuth API Documentation](https://fast.bytefederal.com/docs)\n\n## Support\n\nFor support with ByteAuth NextJS:\n- [GitHub Issues](https://github.com/bytefederal/byteauth-nextjs/issues)\n- [Email Support](mailto:support@bytefederal.com)\n\n## License\n\nByteAuth NextJS is open-sourced software licensed under the MIT license.\n","readmeFilename":"README.md"}