Components

React Components

The ByteAuth Next.js SDK provides React components for displaying QR codes and handling authentication.

ByteAuthQR

The main component for displaying the authentication QR code.

Basic Usage

'use client';

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

export default function LoginPage() {
  return (
    <ByteAuthQR
      onSuccess={(user) => {
        console.log('Authenticated:', user);
        window.location.href = '/dashboard';
      }}
    />
  );
}

Note

This is a Client Component. Add 'use client' at the top of your file.

Props

Prop	Type	Default	Description
mode	'login' | 'register'	'login'	Authentication mode
size	number	200	QR code size in pixels
refreshInterval	number	30	QR refresh interval (seconds)
pollInterval	number	5	Status polling interval (seconds)
showInstructions	boolean	true	Show instruction text
onSuccess	(user: User) => void	-	Called on successful auth
onError	(error: Error) => void	-	Called on error
onRefresh	() => void	-	Called when QR refreshes
className	string	-	CSS class for container

Full Example

'use client';

import { useState } from 'react';
import { ByteAuthQR } from '@bytefederal/byteauth-nextjs/client';

export default function LoginPage() {
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div className="login-container">
      <h1>Login with ByteVault</h1>

      {error && (
        <div className="error-message">{error}</div>
      )}

      <ByteAuthQR
        mode="login"
        size={250}
        refreshInterval={30}
        pollInterval={5}
        showInstructions={true}
        className="qr-wrapper"
        onSuccess={(user) => {
          setIsLoading(true);
          // Redirect to dashboard
          window.location.href = '/dashboard';
        }}
        onError={(error) => {
          setError(error.message);
          setIsLoading(false);
        }}
        onRefresh={() => {
          console.log('QR code refreshed');
        }}
      />

      {isLoading && <p>Redirecting...</p>}

      <p>
        Don't have ByteVault?{' '}
        <a href="https://bytefederal.com/bytevault">Download it here</a>
      </p>
    </div>
  );
}

ByteAuthButton

A button that opens a modal with the QR code.

'use client';

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

export default function Navbar() {
  return (
    <nav>
      <ByteAuthButton
        mode="login"
        onSuccess={(user) => {
          window.location.href = '/dashboard';
        }}
      >
        Sign In with ByteVault
      </ByteAuthButton>
    </nav>
  );
}

Props

Prop	Type	Default	Description
mode	'login' | 'register'	'login'	Authentication mode
children	React.ReactNode	-	Button content
onSuccess	(user: User) => void	-	Success callback
onError	(error: Error) => void	-	Error callback
className	string	-	Button CSS class
modalClassName	string	-	Modal CSS class

ByteAuthProvider

Context provider for managing authentication state.

app/providers.tsx

'use client';

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ByteAuthProvider
      config={{
        apiEndpoint: '/api/byteauth',
        pollInterval: 5000,
      }}
    >
      {children}
    </ByteAuthProvider>
  );
}

useByteAuth Hook

Access authentication state with the hook:

'use client';

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

export default function UserProfile() {
  const { user, isAuthenticated, isLoading, logout } = useByteAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <div>Please log in</div>;
  }

  return (
    <div>
      <p>Public Key: {user.publicKey}</p>
      <button onClick={logout}>Log Out</button>
    </div>
  );
}

Hook Return Values

Property	Type	Description
user	User | null	Current user
isAuthenticated	boolean	Auth status
isLoading	boolean	Loading state
error	Error | null	Current error
login	() => void	Trigger login
logout	() => void	Log out user
refresh	() => void	Refresh session

Styling Components

CSS Custom Properties

:root {
  --byteauth-primary: #ec0401;
  --byteauth-bg: #ffffff;
  --byteauth-text: #1a1a1a;
  --byteauth-border: #e5e5e5;
  --byteauth-radius: 12px;
}

Tailwind CSS

<ByteAuthQR
  className="p-8 bg-white rounded-2xl shadow-xl"
/>

CSS Modules

import styles from './Login.module.css';

<ByteAuthQR className={styles.qrContainer} />

Styled Components

import styled from 'styled-components';
import { ByteAuthQR } from '@bytefederal/byteauth-nextjs/client';

const StyledQR = styled(ByteAuthQR)`
  padding: 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
`;

export default function Login() {
  return <StyledQR onSuccess={() => {}} />;
}

Custom QR Component

Build your own QR component using hooks:

'use client';

import { useByteAuthQR } from '@bytefederal/byteauth-nextjs/client';
import QRCode from 'qrcode.react';

export default function CustomQRLogin() {
  const {
    qrData,
    sessionId,
    status,
    error,
    refresh,
    timeUntilRefresh,
  } = useByteAuthQR({
    mode: 'login',
    onSuccess: (user) => {
      window.location.href = '/dashboard';
    },
  });

  if (error) {
    return (
      <div className="error">
        <p>{error.message}</p>
        <button onClick={refresh}>Try Again</button>
      </div>
    );
  }

  if (status === 'authenticated') {
    return <div className="success">Authenticated! Redirecting...</div>;
  }

  return (
    <div className="qr-container">
      {qrData ? (
        <>
          <QRCode
            value={qrData}
            size={200}
            level="M"
            fgColor="#000000"
            bgColor="#ffffff"
          />
          <p>Refreshes in {timeUntilRefresh}s</p>
        </>
      ) : (
        <div className="loading">Generating QR code...</div>
      )}
    </div>
  );
}

useByteAuthQR Hook

Return Value	Type	Description
qrData	string | null	QR code data URL
sessionId	string	Current session ID
status	'idle' | 'pending' | 'authenticated' | 'error'	Current status
error	Error | null	Current error
refresh	() => void	Manually refresh QR
timeUntilRefresh	number	Seconds until auto-refresh

Server Components

For server-side rendered pages:

// app/login/page.tsx (Server Component)
import { LoginClient } from './login-client';

export default function LoginPage() {
  return (
    <main>
      <h1>Login</h1>
      <LoginClient />
    </main>
  );
}

// app/login/login-client.tsx (Client Component)
'use client';

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

export function LoginClient() {
  return (
    <ByteAuthQR
      onSuccess={(user) => {
        window.location.href = '/dashboard';
      }}
    />
  );
}

Next Steps

• Configure API routes
• Review authentication flow
• Handle errors