web-ui-sdks

@asgardeo/vue

Vue.js SDK for Asgardeo

Installation

# Using npm
npm install @asgardeo/vue

# or using pnpm
pnpm add @asgardeo/vue

# or using yarn
yarn add @asgardeo/vue

Basic Setup

1. Configure the authentication plugin:

import { createApp } from 'vue'
import { AsgardeoAuth } from '@asgardeo/vue'

const app = createApp(App)

app.use(AsgardeoAuth, {
  signInRedirectURL: "http://localhost:3000",
  signOutRedirectURL: "http://localhost:3000",
  clientID: "<your-client-id>",
  baseUrl: "https://api.asgardeo.io/t/<org-name>",
  scope: ["openid", "profile"]
})

app.mount('#app')

1. Use in your components:

<template>
  <div>
    <div v-if="auth.isAuthenticated">
      <p>Welcome, </p>
      <button @click="auth.signOut">Sign Out</button>
    </div>
    <button v-else @click="auth.signIn">Sign In</button>
  </div>
</template>

<script setup>
import { useAsgardeo } from '@asgardeo/vue'

const auth = useAsgardeo()
</script>

Composables

• useAsgardeo(): Main composable that provides:
  • isAuthenticated: Boolean indicating authentication status
  • user: Current user information
  • signIn(): Function to initiate sign in
  • signOut(): Function to sign out
  • getAccessToken(): Function to get the current access token
  • getBasicUserInfo(): Function to get basic user information
• useAuthContext(): Composable to access the raw authentication context
• useIsAuthenticated(): Composable to check authentication status

Development

1. Install dependencies:

   pnpm install
   

2. Build:

   pnpm build
   

3. Run tests:

   pnpm test
   

4. Run development server:

   pnpm dev
   

License

Apache License, Version 2.0 - see LICENSE for details.

This site is open source. Improve this page.