KeyAuth React Example : Please star 🌟

KeyAuth React/Next.js TypeScript example application with full 2FA support for https://keyauth.cc license key API auth.

Built with Next.js 14, React 18, TypeScript, and Tailwind CSS

Uses bun runtime for optimal performance - highly recommended over npm/yarn.

Features

• 🔐 Complete Authentication System - Login with username/password or license key
• 🛡️ Two-Factor Authentication (2FA) - Full 2FA support with QR code setup
• 🎨 Modern UI - Clean, responsive design matching KeyAuth branding
• ⚡ Next.js 14 - Latest Next.js with App Router and server components
• 🔒 Secure Session Management - Cookie-based authentication with context
• 📱 Mobile Responsive - Works seamlessly on all device sizes
• 🚀 TypeScript - Full type safety throughout the application

Installation & Setup

1. Clone the repository

   git clone https://github.com/KeyAuth/KeyAuth-React-Example.git
   cd KeyAuth-React-Example

2. Install dependencies

   bun install

3. Configure your KeyAuth application

   Edit src/credentials.ts with your KeyAuth application details:

    export const name: string = ""; // Application name
    export const ownerid: string = ""; // Owner ID
    export const url: string = "https://keyauth.win/api/1.3/"; // API URL (change if self-hosted)

4. Run the development server

   bun dev

5. Open your browser

   Navigate to http://localhost:3000

Bugs

If you are using our example with no significant changes and having problems, please report bugs here: https://keyauth.cc/app/?page=forms

However, we do NOT provide support for adding KeyAuth to your project. If you can't figure this out, use Google or YouTube to learn more about React/Next.js development.

Application Structure

src/
├── app/
│   ├── page.tsx              # Main login page
│   ├── dashboard/
│   │   └── page.tsx          # User dashboard
│   ├── layout.tsx            # Root layout
│   └── globals.css           # Global styles
├── components/
│   ├── Login.tsx             # Login component with 2FA support
│   ├── TwoFALogin.tsx        # 2FA verification component
│   └── TwoFASetup.tsx        # 2FA setup/disable modal
├── contexts/
│   └── AuthContext.tsx       # Authentication context provider
├── lib/
│   ├── keyauth.ts            # KeyAuth API client
│   └── cookies.ts            # Cookie management utilities
└── credentials.ts            # Application credentials

Authentication Features

Standard Login

Users can authenticate using username/password:

// In your component
const { login, loading, error } = useAuth();

const handleLogin = async () => {
  await login(username, password);
};

License Key Authentication

Direct authentication with license keys:

const { licenseAuth } = useAuth();

const handleLicenseLogin = async () => {
  await licenseAuth(licenseKey);
};

Two-Factor Authentication (2FA)

Enable 2FA

const { enable2FA } = useAuth();

// This returns a QR code URL for the user to scan
const result = await enable2FA();
if (result.success) {
  // Show QR code: result.qr
}

Login with 2FA

When 2FA is enabled, the login flow automatically detects and redirects to 2FA verification:

const { loginWith2FA } = useAuth();

const handleVerify2FA = async (code: string) => {
  await loginWith2FA(username, password, code);
};

Disable 2FA

const { disable2FA } = useAuth();

const handleDisable2FA = async () => {
  await disable2FA();
};

User Registration

const { register } = useAuth();

const handleRegister = async () => {
  await register(username, password, licenseKey);
};

Account Upgrade

Users can upgrade their accounts with additional license keys:

const { upgrade } = useAuth();

const handleUpgrade = async () => {
  const result = await upgrade(username, licenseKey);
  if (result.success) {
    // Show success message
  } else {
    // Show error: result.message
  }
};

User Data Access

Access current user information through the context:

const { user, isLoggedIn } = useAuth();

// User object contains:
console.log({
  username: user?.username,
  email: user?.email,
  ip: user?.ip,
  hwid: user?.hwid,
  expires: user?.expires,
  subscriptions: user?.subscriptions,
  createdate: user?.createdate,
  lastlogin: user?.lastlogin
});

Application Information

Display app statistics:

const { keyauth } = useAuth();

// Access app data
const appData = keyauth?.app_data;

console.log({
  numUsers: appData?.numUsers,
  onlineUsers: appData?.onlineUsers,
  numKeys: appData?.numKeys,
  version: appData?.app_ver,
  customerPanel: appData?.customer_panel
});

Session Management

const { logout, keyauth } = useAuth();

// Check if session is valid
const isValid = await keyauth?.check();

// Logout user
logout();

Security Features

Blacklist Check

const { keyauth } = useAuth();

const isBlacklisted = await keyauth?.checkblacklist();
if (isBlacklisted) {
  // Handle blacklisted user
}

Ban User

const { keyauth } = useAuth();

// Ban current user (must be logged in)
await keyauth?.ban();

Logging

Send logs to KeyAuth dashboard:

const { keyauth } = useAuth();

await keyauth?.log("User performed action X");

Variables

Application Variables

const { keyauth } = useAuth();

const value = await keyauth?.var("variableName");

User Variables

const { keyauth } = useAuth();

// Get user variable
const userValue = await keyauth?.getvar("varName");

// Set user variable
await keyauth?.setvar("varName", "varValue");

File Downloads

const { keyauth } = useAuth();

const fileBytes = await keyauth?.file("fileId");
// Handle file bytes as needed

Chat System

Get Chat Messages

const { keyauth } = useAuth();

const messages = await keyauth?.chatGet("channelName");
messages?.forEach(msg => {
  console.log(`${msg.author}: ${msg.message}`);
});

Send Chat Message

const { keyauth } = useAuth();

await keyauth?.chatSend("Hello everyone!", "channelName");

Webhooks

Send secure server-side requests:

const { keyauth } = useAuth();

// GET request
const response1 = await keyauth?.webhook("webhookId", "&param=value");

// POST with form data
const response2 = await keyauth?.webhook(
  "webhookId", 
  "", 
  "key=value&key2=value2", 
  "application/x-www-form-urlencoded"
);

// POST with JSON
const response3 = await keyauth?.webhook(
  "webhookId",
  "",
  JSON.stringify({ message: "Hello" }),
  "application/json"
);

Environment Configuration

Development

bun dev

Production Build

bun run build
bun start

Type Checking

bun run type-check

Linting

bun run lint

Customization

Styling

The application uses Tailwind CSS with custom KeyAuth design tokens. Main colors:

/* Custom background colors */
.bg-custom-back { /* Dark background */ }
.bg-custom-back-1 { /* Darker background */ }

/* Custom hover effects */
.hover:bg-blue-700 { /* Button hovers */ }

Authentication Context

The AuthContext provides all authentication state and methods. Wrap your app with AuthProvider:

import { AuthProvider } from '@/contexts/AuthContext';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Customer Connection Issues

This is common amongst all authentication systems. Program obfuscation causes false positives in virus scanners, and with the scale of KeyAuth this is perceived as a malicious domain. So, keyauth.com and keyauth.win have been blocked by many internet providers. For dashboard, reseller panel, customer panel, use keyauth.cc.

For API, keyauth.cc will not work because it's purposefully blocked there so keyauth.cc doesn't get blocked also. You should create your own domain and follow this tutorial video: https://www.youtube.com/watch?v=a2SROFJ0eYc

What is KeyAuth?

KeyAuth is a powerful cloud-based authentication system designed to protect your software from piracy and unauthorized access. With KeyAuth, you can implement secure licensing, user management, and subscription systems in minutes. Client SDKs available for C#, C++, Python, Java, JavaScript, VB.NET, PHP, Rust, Go, Lua, Ruby, and Perl.

KeyAuth has several unique features such as memory streaming, webhook function where you can send requests to API without leaking the API, discord webhook notifications, ban the user securely through the application at your discretion. Feel free to join https://t.me/keyauth if you have questions or suggestions.

Copyright License

KeyAuth is licensed under Elastic License 2.0

• You may not provide the software to third parties as a hosted or managed service, where the service provides users with access to any substantial set of the features or functionality of the software.

• You may not move, change, disable, or circumvent the license key functionality in the software, and you may not remove or obscure any functionality in the software that is protected by the license key.

• You may not alter, remove, or obscure any licensing, copyright, or other notices of the licensor in the software. Any use of the licensor's trademarks is subject to applicable law.

Thank you for your compliance, we work hard on the development of KeyAuth and do not appreciate our copyright being infringed.

Support

• 📖 KeyAuth Documentation
• 💬 Telegram Community
• 🐛 Bug Reports
• 🌐 KeyAuth Dashboard