javascript

@asgardeo/vue

Vue.js SDK for Asgardeo

Overview

The Asgardeo Vue SDK provides a streamlined way to integrate secure authentication and user management into your Vue.js applications. Built for Vue 3, it offers a comprehensive set of composables, components, and utilities to handle authentication flows, user profiles, and multi-tenancy features.

Key Features

Easy Integration: Simple setup with the AsgardeoPlugin and provider components
Composable API: Vue 3 composables for reactive authentication state management
Pre-built Components: Ready-to-use components for sign-in, sign-up, user profiles, and more
Multi-Tenancy Support: Built-in organization/workspace management capabilities
Customizable UI: Primitive components and styling options for seamless integration
International Support: Multi-language support with easy localization
Type-Safe: Full TypeScript support for better developer experience

Quick Start

Get started with Asgardeo in your Vue application in minutes. Follow our Vue Quick Start Guide for step-by-step instructions on integrating authentication into your app.

Installation

# Using npm
npm install @asgardeo/vue

# Using pnpm
pnpm add @asgardeo/vue

# Using yarn
yarn add @asgardeo/vue

Basic Usage

<script setup lang="ts">
import { useUser } from '@asgardeo/vue'

const { user, isLoading } = useUser()
</script>

<template>
  <div>
    <p v-if="isLoading">Loading...</p>
    <p v-else-if="user">Welcome, </p>
    <p v-else>Not signed in</p>
  </div>
</template>

API Documentation

For complete API documentation including all components, composables, and customization options, see the Vue SDK Documentation.

Supported Features

Composables

useAsgardeo() - Main SDK client access
useUser() - User profile and authentication state
useOrganization() - Organization/workspace management
useI18n() - Internationalization
useTheme() - Theme customization
useBranding() - Branding customization
useFlow() - Authentication flow control
useFlowMeta() - Flow metadata access

Components

Control

SignedIn - Renders children only when user is authenticated
SignedOut - Renders children only when user is not authenticated
Loading - Renders children while authentication state is loading
UserComponent - Access user information with scoped slot pattern
OrganizationComponent - Access organization context with scoped slot pattern

Actions

SignInButton / BaseSignInButton - Sign-in button (styled and unstyled)
SignOutButton / BaseSignOutButton - Sign-out button (styled and unstyled)
SignUpButton / BaseSignUpButton - Sign-up button (styled and unstyled)

Presentation

SignIn / BaseSignIn - Embedded sign-in form
SignUp / BaseSignUp - Embedded sign-up form
UserProfileComponent / BaseUserProfile - User profile display
UserDropdown / BaseUserDropdown - User menu dropdown
OrganizationList / BaseOrganizationList - Organization listing
OrganizationSwitcher / BaseOrganizationSwitcher - Organization switcher
OrganizationProfile / BaseOrganizationProfile - Organization profile
CreateOrganization / BaseCreateOrganization - Organization creation form
AcceptInvite / BaseAcceptInvite - Invitation acceptance
InviteUser / BaseInviteUser - User invitation form
LanguageSwitcher / BaseLanguageSwitcher - Language selection

Auth Flow

Callback - Handle OAuth callback redirect

GoogleButton - Sign in with Google
FacebookButton - Sign in with Facebook
GitHubButton - Sign in with GitHub
MicrosoftButton - Sign in with Microsoft

Primitives

Button, Card, Alert, TextField, PasswordField, Select, Checkbox, DatePicker, OtpField, Typography, Divider, Logo, Spinner

Utilities

createAsgardeoGuard - Vue Router navigation guard for protected routes
createCallbackRoute - Generate a callback route record for Vue Router
handleWebAuthnAuthentication - WebAuthn/passkey support
hasAuthParamsInUrl - Detect OAuth parameters in URL
navigate - Programmatic navigation helper
http - HTTP client with token management

Examples

Check out our example applications to see the Vue SDK in action:

Vue SDK Playground - Example application

Documentation

Support

For support and questions:

Contributing

We welcome contributions! Please see our Contributing Guidelines for more details.

License

Licenses this source under the Apache License, Version 2.0 LICENSE, You may not use this file except in compliance with the License.

This site is open source. Improve this page.