
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
steem-auth-vue
Advanced tools
A Vue 3 authentication component for Steem blockchain and Echelon sidechain
This project provides a Vue 3 authentication and transaction component library for the Steem blockchain, supporting multi-account management, secure PIN-based encryption, and a user-friendly UI/UX.
src/index.ts
— main entry point for the componentsrc/components
— Vue component definitions (including SteemAuth.vue
, SteemTransactions.vue
, PinModal.vue
)src/services
— services for interacting with the Steem blockchainsrc/utils
— utility functionssrc/types
— TypeScript type definitionsdist/
— built component files (after running npm run build
)test/
— test application for testing the componentPinModal.vue
)dsteem
, steem
, steemlogin
Run:
npm run build
This will create the following files in the dist
directory:
steem-auth-vue.es.js
— ES module versionsteem-auth-vue.umd.js
— UMD version for browsersstyle.css
— Component stylesImport the component and styles in your app:
import { SteemAuth } from '../dist/steem-auth-vue.es.js';
import '../dist/style.css';
import { useAuthStore } from '../dist/steem-auth-vue.es.js';
Register and use the component in your template:
<template>
<SteemAuth :appName="'MyApp'" :callbackURL="'http://localhost:3000/callback'" />
<SteemTransactions />
</template>
<script setup>
import { SteemAuth } from '../dist/steem-auth-vue.es.js';
import { SteemTransactions } from '../dist/steem-auth-vue.es.js';
</script>
PinModal
component is used for secure PIN entry and confirmation during login and transaction flows.If you use dynamic forms or async data, always guard against undefined objects:
<form v-if="inputValues[operation.type]">
<!-- form fields -->
</form>
v-for
, use _
instead of a named variable (e.g., (_, idx) in items
)._
(e.g., function handler(_e) { ... }
).v-for
variables or function parameters and fix them as shown in PinModal.vue
.Error Example:
error TS6133: 'digit' is declared but its value is never read.
Solution:
v-for
with _
._
.If you see errors like Cannot read properties of undefined (reading 'from')
or similar, ensure you are guarding against undefined objects in your templates (e.g., use v-if
to check objects exist before accessing their properties). For dynamic or async data, always check that required objects/arrays are initialized before rendering components or forms.
If you use modals or dynamic components, always ensure required props are present and valid when the component is rendered. Use defensive v-if
checks as needed.
For more details, see the code comments and the PinModal.vue
example for best practices.
npm install steem-auth-vue
<template>
<div>
<SteemAuth />
</div>
</template>
<script setup>
import { SteemAuth } from 'steem-auth-vue';
import 'steem-auth-vue/dist/style.css'; // Import styles
</script>
You can customize which authentication methods are available by passing props to the SteemAuth component:
<template>
<div>
<!-- Only enable SteemLogin (disable Keychain and direct login) -->
<SteemAuth
:enableSteemLogin="true"
:enableKeychain="false"
:enableDirectLogin="false"
/>
<!-- Only enable Keychain authentication -->
<SteemAuth
:enableSteemLogin="false"
:enableKeychain="true"
:enableDirectLogin="false"
/>
<!-- Only enable direct login with posting key -->
<SteemAuth
:enableSteemLogin="false"
:enableKeychain="false"
:enableDirectLogin="true"
/>
</div>
</template>
<script setup>
import { SteemAuth } from 'steem-auth-vue';
import 'steem-auth-vue/dist/style.css'; // Import styles
</script>
The component supports both light and dark themes. Users can toggle between themes using the built-in theme toggle button. You can also set the default theme:
<template>
<div>
<!-- Start with dark theme by default -->
<SteemAuth :defaultDarkMode="true" @theme-change="handleThemeChange" />
</div>
</template>
<script setup>
import { SteemAuth } from 'steem-auth-vue';
import 'steem-auth-vue/dist/style.css'; // Import styles
const handleThemeChange = (isDark) => {
console.log('Theme changed:', isDark ? 'dark' : 'light');
// You can apply additional theme changes to your app based on this event
};
</script>
Access the authentication state in your components:
<template>
<div>
<p v-if="authStore.state.isAuthenticated">
Logged in as: {{ authStore.state.username }}
</p>
<p v-else>
Not logged in
</p>
</div>
</template>
<script setup>
import { useAuthStore } from 'steem-auth-vue';
const authStore = useAuthStore();
</script>
Use the transaction components to send operations to the Steem blockchain or Echelon sidechain:
<template>
<div>
<SteemAuth />
<!-- For Steem blockchain transactions -->
<SteemTransactions v-if="authStore.state.isAuthenticated" />
<!-- For Echelon sidechain transactions -->
<EchelonTransactions v-if="authStore.state.isAuthenticated" />
</div>
</template>
<script setup>
import { SteemAuth, SteemTransactions, EchelonTransactions, useAuthStore } from 'steem-auth-vue';
import 'steem-auth-vue/dist/style.css'; // Import styles
const authStore = useAuthStore();
</script>
This component supports Echelon, a next generation sidechain for the Steem blockchain that provides advanced features like tokens, NFTs, markets, and staking.
If you need more flexibility than the provided components, you can use the TransactionService directly:
<template>
<div>
<button @click="sendTransfer" :disabled="!authStore.state.isAuthenticated">
Send 0.001 STEEM to recipient
</button>
<div v-if="result">Transaction ID: {{ result }}</div>
<div v-if="error" class="error">{{ error }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useAuthStore, TransactionService } from 'steem-auth-vue';
const authStore = useAuthStore();
const result = ref('');
const error = ref('');
async function sendTransfer() {
try {
// Clear previous results
result.value = '';
error.value = '';
// Set up transaction data
const tx = {
from: authStore.state.username,
to: 'recipient-username',
amount: '0.001 STEEM',
memo: 'Payment for services'
};
// Send the transaction
const response = await TransactionService.send('transfer', tx, {
requiredAuth: 'active' // 'active' or 'posting' depending on operation type
});
// Handle the response
result.value = response.id || response.result?.id;
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to send transaction';
}
}
</script>
<template>
<div>
<button @click="approveNode" :disabled="!authStore.state.isAuthenticated">
Approve Node
</button>
<div v-if="result">Transaction ID: {{ result }}</div>
<div v-if="error" class="error">{{ error }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useAuthStore, TransactionService } from 'steem-auth-vue';
const authStore = useAuthStore();
const result = ref('');
const error = ref('');
async function approveNode() {
try {
// Clear previous results
result.value = '';
error.value = '';
// Create the custom_json payload for an Echelon operation
const payload = {
required_auths: [authStore.state.username],
required_posting_auths: [],
id: 'sidechain',
json: JSON.stringify({
contract: 'approve_node',
payload: {
target: 'node-account-name'
}
})
};
// Send the transaction
const response = await TransactionService.send('custom_json', payload, {
requiredAuth: 'active'
});
// Handle the response
result.value = response.id || response.result?.id;
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to send transaction';
}
}
</script>
For detailed documentation on all available operations:
MIT
Steem Keychain
SteemLogin
Direct Posting Key
Create a .env
file in your project root:
VITE_APP_NAME=your-app-name
# Install dependencies
npm install
# Build the component
npm run build
# Test the component
cd test
npm run dev
Contributions are welcome! Please feel free to submit a Pull Request.
FAQs
A Vue 3 authentication component for Steem blockchain and Echelon sidechain
The npm package steem-auth-vue receives a total of 7 weekly downloads. As such, steem-auth-vue popularity was classified as not popular.
We found that steem-auth-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.