Solid Helper for Vue

A Vue 3 helper library for developing SoLiD (Social Linked Data) applications with seamless Pinia integration.

Features

• Session Management via Pinia Store (useSessionStore)

  • Reactive session state and authentication status
  • Login/logout functionality with customizable identity providers
  • Automatic redirect handling and session restoration
  • Maintains reactivity using custom store state (unlike direct Session object usage)

• SessionProvider Component

  • Vue provider component for dependency injection (similar to React Context)
  • Automatically handles authentication redirects and silent session restoration on page load
  • Configurable via restorePreviousSession and redirectUrl props
  • Injects KEYS.SESSION, KEYS.SESSION_INFO, KEYS.LOGIN, and KEYS.LOGOUT

Quick Start

Using Pinia Store

import { useSessionStore } from 'solid-helper-vue';

const sessionStore = useSessionStore();

// Login
await sessionStore.login(identityProvider, redirectUrl, clientName);

// Handle redirect after login (call on every page load)
// Passing window.location.href lets the library detect the OAuth callback params.
// restorePreviousSession: true enables silent re-login on subsequent page loads.
await sessionStore.handleRedirectAfterLogin(window.location.href, true);

// Access session info
if (sessionStore.isLoggedIn) {
  console.log(sessionStore.webid); // Current user's WebID
}

// Logout
await sessionStore.logout();

Using Provider Component

<template>
  <!-- restorePreviousSession defaults to true (silent re-login on page load) -->
  <!-- redirectUrl defaults to window.location.href at mount time -->
  <session-provider>
    <your-app />
  </session-provider>
</template>

<script setup lang="ts">
import { SessionProvider } from 'solid-helper-vue';
</script>

To opt out of silent re-login, or to specify a fixed callback URL:

<session-provider :restore-previous-session="false" redirect-url="https://myapp.example/callback">
  <your-app />
</session-provider>

Inject session data in child components:

import { inject } from 'vue';
import { KEYS } from 'solid-helper-vue';

const session = inject(KEYS.SESSION);          // Session object from @inrupt/solid-client-authn-browser
const sessionInfo = inject(KEYS.SESSION_INFO); // Reactive session info
const login = inject(KEYS.LOGIN);              // Login function
const logout = inject(KEYS.LOGOUT);            // Logout function

Testing

Comprehensive test coverage includes:

• Unit Tests (src/__tests__)

  • Store actions and state management
  • Provider component functionality
  • Utility functions and types
  • Vue injection keys

• Integration Tests (through complete apps) (integration-projects/vite-vue-spa)

  • Full application integration using Playwright
  • Real-world usage scenarios
  • Component rendering and key injection verification

Run tests:

npm run test              # Watch mode
npm run test:run         # Single run
npm run test:coverage    # Coverage report
npm run test:integration # Playwright integration tests
npm run test:all         # All tests

Installation

npm install solid-helper-vue

Peer dependencies: Vue 3 and Pinia

License

Apache-2.0