Skip to content
ByteAuth

Installation

Next.js SDK Installation

Section titled “Next.js SDK Installation”

The ByteAuth Next.js SDK provides React components, API route handlers, and NextAuth.js integration for seamless passwordless authentication.

Requirements

Section titled “Requirements”
  • Node.js 18.x or higher
  • Next.js 13.x or 14.x (App Router supported)
  • React 18.x
  • TypeScript (recommended)

Installation

Section titled “Installation”

  1. Install via npm/yarn/pnpm

    Terminal window
    npm install @bytefederal/byteauth-nextjs

  2. Configure Environment Variables

    Create or update .env.local:

    BYTEAUTH_DOMAIN=yourdomain.com
    BYTEAUTH_API_KEY=your_api_key_here
    BYTEAUTH_WEBHOOK_SECRET=your_webhook_secret
    

    # For NextAuth.js integration
    NEXTAUTH_URL=http://localhost:3000
    NEXTAUTH_SECRET=your_nextauth_secret

  3. Create API Route Handler

    App Router (app/api/byteauth/[...byteauth]/route.ts):

    import { ByteAuthHandler } from '@bytefederal/byteauth-nextjs';
    

    export const { GET, POST } = ByteAuthHandler();

    Pages Router (pages/api/byteauth/[...byteauth].ts):

    import { ByteAuthHandler } from '@bytefederal/byteauth-nextjs';
    

    export default ByteAuthHandler();

  4. Add Type Definitions (TypeScript)

    The SDK includes TypeScript definitions. For enhanced type safety, add to tsconfig.json:

    {
      "compilerOptions": {
        "types": ["@bytefederal/byteauth-nextjs"]
      }
    }

Environment Variables

Section titled “Environment Variables”
VariableDescriptionRequired
BYTEAUTH_DOMAINYour registered domain nameYes
BYTEAUTH_API_KEYAPI key from developer portalYes
BYTEAUTH_WEBHOOK_SECRETSecret for webhook verificationRecommended
NEXTAUTH_URLYour app’s base URLYes (for NextAuth)
NEXTAUTH_SECRETRandom secret for session encryptionYes (for NextAuth)

Quick Start

Section titled “Quick Start”

Add the QR component to your login page:

app/login/page.tsx
import { ByteAuthQR } from '@bytefederal/byteauth-nextjs/client';


export default function LoginPage() {
  return (
    <main>
      <h1>Login</h1>
      <ByteAuthQR
        onSuccess={() => {
          window.location.href = '/dashboard';
        }}
      />
    </main>
  );
}

NextAuth.js Integration

Section titled “NextAuth.js Integration”

For full session management, integrate with NextAuth.js:

  1. Install NextAuth

    Terminal window
    npm install next-auth

  2. Create Auth Configuration

    app/api/auth/[...nextauth]/route.ts:

    import NextAuth from 'next-auth';
    import { ByteAuthProvider } from '@bytefederal/byteauth-nextjs/providers';
    

    const handler = NextAuth({
      providers: [
        ByteAuthProvider({
          domain: process.env.BYTEAUTH_DOMAIN!,
          apiKey: process.env.BYTEAUTH_API_KEY!,
        }),
      ],
      callbacks: {
        async jwt({ token, user }) {
          if (user) {
            token.publicKey = user.publicKey;
          }
          return token;
        },
        async session({ session, token }) {
          session.user.publicKey = token.publicKey as string;
          return session;
        },
      },
    });
    

    export { handler as GET, handler as POST };

  3. Wrap App with Session Provider

    app/providers.tsx:

    'use client';
    

    import { SessionProvider } from 'next-auth/react';
    

    export function Providers({ children }: { children: React.ReactNode }) {
      return <SessionProvider>{children}</SessionProvider>;
    }

    app/layout.tsx:

    import { Providers } from './providers';
    

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html>
          <body>
            <Providers>{children}</Providers>
          </body>
        </html>
      );
    }

Verify Installation

Section titled “Verify Installation”

Start your development server and test:

Terminal window
npm run dev

Navigate to your login page. You should see the ByteAuth QR code.

Troubleshooting

Section titled “Troubleshooting”

Next Steps

Section titled “Next Steps”