Vue.js SDK for Asgardeo

# Using npm
npm install @asgardeo/vue

# or using pnpm
pnpm add @asgardeo/vue

# or using yarn
yarn add @asgardeo/vue

1. Configure the authentication plugin:

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

const app = createApp(App)

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

app.mount('#app')

2. Use in your components:

<template>
  <div>
    <div v-if="auth.isSignedIn">
      <p>Welcome, {{ auth.user?.username }}</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>

• useAsgardeo(): Main composable that provides:

  • isSignedIn: 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
  • getUser(): Function to get basic user information

• useAuthContext(): Composable to access the raw authentication context

• useIsAuthenticated(): Composable to check authentication status

1. Install dependencies:

pnpm install

2. Build:

pnpm build

3. Run tests:

pnpm test

4. Run development server:

pnpm dev

Apache License, Version 2.0 - see LICENSE for details.