Strivacity Vue.js SDK client

📘

The SDK supports Vue version 3 and above.

Install

npm install @strivacity/sdk-vue

Usage

Add this to your main file:

import { createApp } from 'vue';
import App from './App.vue';
import { createStrivacitySDK } from '@strivacity/sdk-vue';

const app = createApp(AppComponent);
const sdk = createStrivacitySDK({
	issuer: 'https://<YOUR_DOMAIN>',
	scopes: ['openid', 'profile'],
	clientId: '<YOUR_CLIENT_ID>',
	redirectUri: '<YOUR_REDIRECT_URI>',
});

app.use(sdk);
app.mount('#app');

How to use the SDK in your components:

<script setup>
import { computed } from 'vue';
import { useStrivacity } from '@strivacity/sdk-vue';

const { isAuthenticated, idTokenClaims, login, logout } = useStrivacity();
const name = computed(() => `${idTokenClaims.value?.given_name} ${idTokenClaims.value?.family_name}`);
</script>

<template>
	<template v-if="isAuthenticated">
		<div>Welcome, {{ name }}!</div>
		<button @click="logout()">Logout</button>
	</template>

	<template v-else>
		<div>Not logged in</div>
		<button @click="login()">Log in</button>
	</template>
</template>

API documentation

useStrivacity hook

useStrivacity\<T extends PopupContext | RedirectContext>(): T;

You can choose between PopupContext or RedirectContext with the mode option when you configure the SDK options.

Properties

• loading: boolean: Indicates if the session is being loaded.
• isAuthenticated: boolean: Indicates whether the user is authenticated.
• idTokenClaims: IdTokenClaims | null: Claims from the ID token or null if not available.
• accessToken: string | null: The access token or null if not available.
• refreshToken: string | null: The refresh token or null if not available.
• accessTokenExpired: boolean: Indicates if the access token has expired.
• accessTokenExpirationDate: number | null: The expiration date of the access token or null if not set.

Type: RedirectContext Represents the available methods for Redirect-based interactions.

• login(options?: LoginOptions): Promise<void>: Initiates the login process by redirecting the user to the identity provider.
  • options (optional): Configuration options for login.
• register(options?: RegisterOptions): Promise<void>: Registers a new user using a redirect flow.
  • options (optional): Configuration options for registration.
• refresh(): Promise<void>: Refreshes the user's session using a redirect flow.
• revoke(): Promise<void>: Revokes the current session tokens using a redirect flow.
• logout(options?: LogoutOptions): Promise<void>: Logs out the user by redirecting to the logout page.
  • options (optional): Configuration options for logout.
• handleCallback(url?: string): Promise<void>: Handles the callback after a redirect-based authentication or token exchange.
  • url (optional): The URL to handle for the callback.

Type: PopupContext Represents the available methods for Popup-based interactions.

• login(options?: LoginOptions): Promise<void>: Initiates the login process using a popup window.
  • options (optional): Configuration options for login.
• register(options?: RegisterOptions): Promise<void>: Registers a new user using a popup flow.
  • options (optional): Configuration options for registration.
• refresh(): Promise<void>: Refreshes the user's session using a popup.
• revoke(): Promise<void>: Revokes the current session tokens using a popup flow.
• logout(options?: LogoutOptions): Promise<void>: Logs out the user using a popup window.
  • options (optional): Configuration options for logout.
• handleCallback(url?: string): Promise<void>: Handles the callback after a popup-based authentication or token exchange.
  • url (optional): The URL to handle for the callback.

Links

Example app