KeyAuth Vue Example : Please star 🌟

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

Built with Vue 3, Vue Router, TypeScript, Vite, and Tailwind CSS

Uses npm or bun for package management.

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
• ⚡ Vue 3 Composition API - Modern Vue with script setup and composables
• 🔒 Secure Session Management - Cookie-based authentication with composables
• 📱 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-Vue-Example.git
   cd KeyAuth-Vue-Example

2. Install dependencies

   npm install
   # or
   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

   npm run dev
   # or
   bun dev

5. Open your browser

   Navigate to http://localhost:5173

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 Vue development.

Application Structure

src/
├── views/
│ ├── Home.vue # Main login page
│ └── Dashboard.vue # User dashboard
├── components/
│ ├── Login.vue # Login component with 2FA support
│ ├── TwoFALogin.vue # 2FA verification component
│ └── TwoFASetup.vue # 2FA setup/disable modal
├── composables/
│ └── useAuth.ts # Authentication composable
├── router/
│ └── index.ts # Vue Router configuration
├── lib/
│ ├── keyauth.ts # KeyAuth API client
│ └── cookies.ts # Cookie management utilities
├── assets/
│ ├── main.css # Main styles
│ └── base.css # Base/Tailwind styles
├── App.vue # Root component
├── main.js # Application entry point
└── credentials.ts # Application credentials

Authentication Features

Standard Login

Users can authenticate using username/password:

// In your componentconst{ login, loading }=useAuth();consthandleLogin=async()=>{constresult=awaitlogin(username.value,password.value);if(result.success){router.push('/dashboard');}};

License Key Authentication

Direct authentication with license keys:

const{ licenseAuth }=useAuth();consthandleLicenseLogin=async()=>{constresult=awaitlicenseAuth(licenseKey.value);if(result.success){router.push('/dashboard');}};

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.qrCode// Secret code: result.secret}

Login with 2FA

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

const{ loginWith2FA }=useAuth();consthandleVerify2FA=async(code: string)=>{constresult=awaitloginWith2FA(username.value,password.value,code);if(result.success){router.push('/dashboard');}};

Disable 2FA

const{ disable2FA }=useAuth();consthandleDisable2FA=async(code: string)=>{constresult=awaitdisable2FA(code);if(result.success){// 2FA disabled successfully}};

User Registration

const{ register }=useAuth();consthandleRegister=async()=>{constresult=awaitregister(username.value,password.value,licenseKey.value);if(result.success){router.push('/dashboard');}};

Account Upgrade

Users can upgrade their accounts with additional license keys:

const{ upgrade }=useAuth();consthandleUpgrade=async()=>{constresult=awaitupgrade(username.value,licenseKey.value);if(result.success){// Show success message}else{// Show error: result.message}};

User Data Access

Access current user information through the composable:

const{ user, isAuthenticated }=useAuth();// User object contains:console.log({username: user.value?.username,ip: user.value?.ip,hwid: user.value?.hwid,expires: user.value?.expires,subscriptions: user.value?.subscriptions,createdate: user.value?.createdate,lastlogin: user.value?.lastlogin,subscription: user.value?.subscription});

Application Information

Display app statistics:

const{ keyauth }=useAuth();// Access app dataconstappData=keyauth.value?.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.value?.check();// Logout userlogout();router.push('/');

Security Features

Blacklist Check

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

Ban User

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

Logging

Send logs to KeyAuth dashboard:

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

Variables

Application Variables

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

User Variables

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

File Downloads

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

Chat System

Get Chat Messages

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

Send Chat Message

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

Webhooks

Send secure server-side requests:

const{ keyauth }=useAuth();// GET requestconstresponse1=awaitkeyauth.value?.webhook("webhookId","&param=value");// POST with form dataconstresponse2=awaitkeyauth.value?.webhook("webhookId","","key=value&key2=value2","application/x-www-form-urlencoded");// POST with JSONconstresponse3=awaitkeyauth.value?.webhook("webhookId","",JSON.stringify({message: "Hello"}),"application/json");

Environment Configuration

Development

npm run dev
# or
bun dev

Production Build

npm run build
npm run preview
# or
bun run build
bun run preview

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 */ }
.bg-custom-back-lbl { /* Label background */ }
/* Custom border */
.border-custom { /* Dark border */ }

Authentication Composable

The useAuth composable provides all authentication state and methods. It's automatically initialized when imported:

<scriptsetuplang="ts">import{useAuth}from'@/composables/useAuth';const{ isAuthenticated, user, keyauth, loading }=useAuth();// Access user dataconstusername=computed(()=>user.value?.username);// Call auth methodsconsthandleLogin=async()=>{constresult=awaitlogin(username.value,password.value);// Handle result};</script>

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