Overview

This Vue SDK plugin provides an easy integration with the Zesty.io App SDK. It includes features like SSO authentication, request handling, and state management for Vue.js applications.

Features

• SSO Authentication: Supports Google, GitHub, and Azure for Single Sign-On.
• State Management: Reactive state management using Vue's composition API.
• Request Handling: Simplified API request mechanism.
• Token Management: Automatic handling of authentication tokens.

Installation

1. Install the package:

npm install @zesty-io/vue-app-loader

2. Import the plugin in your Vue application.

Usage

Initializing the App Loader

import { createApp } from 'vue'

import {createAppLoader} from '@zesty-io/vue-app-loader';

const app = createApp(App);

app.use(createAppLoader, {
  authServiceUrl: 'YOUR_AUTH_SERVICE_URL',
  authCookie: 'YOUR_AUTH_COOKIE_NAME',
  token: 'OPTIONAL_INITIAL_TOKEN',
});

app.mount('#app')

Using SDK in Components

<script setup lang="ts">
import { useSDK } from "@zesty-io/vue-app-loader"; 
const {isAuthenticated, isAuthenticating, token, logout, initiateSSOAuthentication} = useSDK();
</script>

<template>
  <div v-if="isAuthenticated">
    <p>Token: {{ token }}</p>
    <button @click="logout">Logout</button>
  </div>
  <div v-else>
    <p>User is not authenticated</p>
    <button @click="initiateSSOAuthentication('google')">Log in with google</button>
  </div>
</template>

API

useSDK()

Provides access to SDK state and functions within a Vue component.

createAppLoader(app, options)

Initializes the SDK within the Vue application context.

• app: Vue application instance.
• options: Configuration options for SDK initialization.

Options

• authServiceUrl: URL to the authentication service.
• token (optional): Initial token for authentication.
• authCookie (optional): Name of the cookie to retrieve SSO token from.

Methods

• logout(): Logs the user out of the application.
• request(url, data): Makes an API request.
• initiateSSOAuthentication(service): Initiates SSO authentication.

States

• token: Current authentication token.
• isAuthenticated: Boolean indicating if the user is authenticated.
• messages: Array of messages received from the SDK via postMessage.
• isAuthenticating: Boolean indicating if the authentication is in progress.
• ssoErrorMessage: Error message related to SSO authentication.