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:

   exportconstname: string="";// Application nameexportconstownerid: string="";// Owner IDexportconsturl: 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.fdback.io

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 componentconst{ login, loading, error }=useAuth();consthandleLogin=async()=>{awaitlogin(username,password);};

License Key Authentication

Direct authentication with license keys:

const{ licenseAuth }=useAuth();consthandleLicenseLogin=async()=>{awaitlicenseAuth(licenseKey);};

Two-Factor Authentication (2FA)

Enable 2FA

const{ enable2FA }=useAuth();// This returns a QR code URL for the user to scanconstresult=awaitenable2FA();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();consthandleVerify2FA=async(code: string)=>{awaitloginWith2FA(username,password,code);};

Disable 2FA

const{ disable2FA }=useAuth();consthandleDisable2FA=async()=>{awaitdisable2FA();};

User Registration

const{ register }=useAuth();consthandleRegister=async()=>{awaitregister(username,password,licenseKey);};

Account Upgrade

Users can upgrade their accounts with additional license keys:

const{ upgrade }=useAuth();consthandleUpgrade=async()=>{constresult=awaitupgrade(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 dataconstappData=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 validconstisValid=awaitkeyauth?.check();// Logout userlogout();

Security Features

Blacklist Check

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

Ban User

const{ keyauth }=useAuth();// Ban current user (must be logged in)awaitkeyauth?.ban();

Logging

Send logs to KeyAuth dashboard:

const{ keyauth }=useAuth();awaitkeyauth?.log("User performed action X");

Variables

Application Variables

const{ keyauth }=useAuth();constvalue=awaitkeyauth?.var("variableName");

User Variables

const{ keyauth }=useAuth();// Get user variableconstuserValue=awaitkeyauth?.getvar("varName");// Set user variableawaitkeyauth?.setvar("varName","varValue");

File Downloads

const{ keyauth }=useAuth();constfileBytes=awaitkeyauth?.file("fileId");// Handle file bytes as needed

Chat System

Get Chat Messages

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

Send Chat Message

const{ keyauth }=useAuth();awaitkeyauth?.chatSend("Hello everyone!","channelName");

Webhooks

Send secure server-side requests:

const{ keyauth }=useAuth();// GET requestconstresponse1=awaitkeyauth?.webhook("webhookId","&param=value");// POST with form dataconstresponse2=awaitkeyauth?.webhook("webhookId","","key=value&key2=value2","application/x-www-form-urlencoded");// POST with JSONconstresponse3=awaitkeyauth?.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';exportdefaultfunctionRootLayout({
children,}: {children: React.ReactNode;}){return(<htmllang="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