Vue.js Client Auth SDK
An open source Vue.js SDK for integrating Wristband authentication and authorization features into Vue.js applications with the useWristbandStore() composable.
Authentication Flow
What is the Wristband Vue.js SDK?
The Wristband Vue.js SDK provides authentication and authorization functionality for Vue.js applications, allowing developers to easily integrate Wristband's identity and access management features into their projects.
The SDK provides a set of components, composables, and services that can be used to handle user authentication, manage user sessions, and enforce access control based on user roles and permissions that are defined in the Wristband platform.
It simplifies the process of implementing secure authentication flows, such as login, logout, and token refresh, while also providing features like multi-factor authentication and social login options.
By using the Wristband Vue.js SDK, developers can ensure that their applications are secure and compliant with industry standards for identity and access management. The SDK is designed to be easy to use and integrate, allowing developers to focus on building their applications while leveraging the robust authentication capabilities provided by Wristband.
Key Features
Composable-First API
Built with Vue 3 Composition API and Pinia for modern, reactive state management.
Type-Safe Authentication
Full TypeScript support with generic session metadata typing for custom data structures.
Secure Token Management
Automatic token caching, expiration detection, and refresh strategies with CSRF protection.
Session State Sync
Consistent authentication state across components with reactive updates.
Developer Experience
Minimal boilerplate with intuitive composables like useWristbandStore() and useWristbandSession().
Production Ready
Comprehensive error handling, retry logic, and enterprise-grade security standards.
Example App Configuration
Here is an example of the initialization code for the Wristband Vue.js SDK to configure authentication settings for a Vue.js application. This code sets up the SDK with the necessary configuration options, such as the login URL, session URL, and token URL.
import { createApp } from "vue";
import { createPinia } from "pinia";
import { WristbandAuthStore } from "@wristband/vue-client-auth"
import { router } from "./router";
import App from "./App.vue";
import './css/style.css';
const init = async () => {
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.use(router);
app.mount('#app');
const wristbandAuth = WristbandAuthStore(pinia);
await wristbandAuth.setConfig({
loginUrl: '/api/auth/login',
sessionUrl: '/api/v1/session',
tokenUrl: '/api/v1/token',
});
await wristbandAuth.fetchSession();
};
init();
The Client Data Store
The SDK includes a client-side data store using Pinia for state management which manages the user session. It contains a baseline set of properties that are used to track the authentication state of the user, such as whether they are logged in or not, their access token, and their refresh token.
Store Features
- Auth Status Lifecycle: LOADING → AUTHENTICATED/UNAUTHENTICATED
- Session State: userId, tenantId, metadata
- Token Management: caching, TTL validation, refresh logic
- Configuration: URLs, CSRF settings, callbacks
- Error State: Centralized error tracking
const WristbandAuthStore = defineStore('wristbandAuth', () => {
// State
const authError = ref<WristbandError | null>(null)
const isAuthenticated = ref(false)
const isLoading = ref(true)
const userId = ref('')
const tenantId = ref('')
const metadata = ref<Record<string, unknown>>({})
const accessToken = ref('')
const accessTokenExpiresAt = ref<number>(0)
// Derived
const authStatus = computed(() =>
isLoading.value
? AuthStatus.LOADING
: isAuthenticated.value
? AuthStatus.AUTHENTICATED
: AuthStatus.UNAUTHENTICATED
)
// Actions
async function getToken(): Promise<string> {
// Check if we have a valid cached token (with 30 second buffer)
if (
accessToken.value &&
accessTokenExpiresAt.value > Date.now() + 30000
) {
return accessToken.value
}
// Token acquisition logic with retry...
}
return {
isAuthenticated,
isLoading,
userId,
tenantId,
metadata,
authStatus,
getToken,
fetchSession,
// ...
}
})
Learn More
Explore the full documentation, installation instructions, configuration options, and usage examples.