Types
Complete TypeScript type definitions for KeycloakVue.
Core Types
KeycloakConfig
Configuration for connecting to Keycloak server.
typescript
interface KeycloakConfig {
url: string // Keycloak server URL
realm: string // Realm name
clientId: string // Client ID
}KeycloakInitOptions
Options for initializing Keycloak.
typescript
interface KeycloakInitOptions {
useNonce?: boolean
onLoad?: 'login-required' | 'check-sso'
token?: string
refreshToken?: string
idToken?: string
timeSkew?: number
checkLoginIframe?: boolean
checkLoginIframeInterval?: number
responseMode?: 'query' | 'fragment'
flow?: 'standard' | 'implicit' | 'hybrid'
pkceMethod?: 'S256' | false
redirectUri?: string
silentCheckSsoRedirectUri?: string
silentCheckSsoFallback?: boolean
scope?: string
enableLogging?: boolean
messageReceiveTimeout?: number
locale?: string
adapter?: 'default' | 'cordova' | 'cordova-native' | KeycloakAdapter
}KeycloakLoginOptions
Options for login redirect.
typescript
interface KeycloakLoginOptions {
redirectUri?: string
prompt?: 'none' | 'login' | 'consent' | 'select_account'
action?: 'register' | string
loginHint?: string
idpHint?: string
locale?: string
scope?: string
maxAge?: number
acrValues?: string
acr?: {
values: string[]
essential: boolean
}
}KeycloakLogoutOptions
Options for logout.
typescript
interface KeycloakLogoutOptions {
redirectUri?: string
}KeycloakRegisterOptions
Options for registration redirect.
typescript
interface KeycloakRegisterOptions {
redirectUri?: string
locale?: string
}KeycloakAccountOptions
Options for account management.
typescript
interface KeycloakAccountOptions {
redirectUri?: string
}Token Types
KeycloakTokenParsed
Parsed JWT token.
typescript
interface KeycloakTokenParsed {
exp?: number // Expiration time
iat?: number // Issued at time
auth_time?: number // Authentication time
jti?: string // JWT ID
iss?: string // Issuer
aud?: string | string[] // Audience
sub?: string // Subject
typ?: string // Token type
azp?: string // Authorized party
session_state?: string // Session state
acr?: string // Authentication context class reference
'allowed-origins'?: string[] // Allowed origins
realm_access?: KeycloakRoles // Realm roles
resource_access?: KeycloakResourceAccess // Resource roles
scope?: string // Scopes
email_verified?: boolean // Email verification status
name?: string // Full name
preferred_username?: string // Username
given_name?: string // First name
family_name?: string // Last name
email?: string // Email address
[key: string]: unknown // Additional custom claims
}KeycloakRoles
Role information.
typescript
interface KeycloakRoles {
roles: string[]
}KeycloakResourceAccess
Resource-specific role assignments.
typescript
interface KeycloakResourceAccess {
[resource: string]: KeycloakRoles
}Profile Types
KeycloakProfile
User profile information.
typescript
interface KeycloakProfile {
id?: string
username?: string
email?: string
firstName?: string
lastName?: string
enabled?: boolean
emailVerified?: boolean
totp?: boolean
createdTimestamp?: number
attributes?: { [key: string]: string[] }
}Plugin Types
KeycloakPluginOptions
Options for creating the Keycloak plugin.
typescript
interface KeycloakPluginOptions {
config: KeycloakConfig
initOptions?: KeycloakInitOptions
callbacks?: KeycloakCallbacks
}KeycloakCallbacks
Event callbacks.
typescript
interface KeycloakCallbacks {
onReady?: (authenticated: boolean) => void
onAuthSuccess?: () => void
onAuthError?: (error: unknown) => void
onAuthRefreshSuccess?: () => void
onAuthRefreshError?: () => void
onAuthLogout?: () => void
onTokenExpired?: () => void
}Composable Types
UseKeycloakReturn
Return type of useKeycloak() composable.
typescript
interface UseKeycloakReturn {
// State
instance: Readonly<Ref<Keycloak | undefined>>
isAuthenticated: Readonly<Ref<boolean>>
isReady: Readonly<Ref<boolean>>
isLoading: Readonly<Ref<boolean>>
token: Readonly<Ref<string | undefined>>
tokenParsed: Readonly<Ref<KeycloakTokenParsed | undefined>>
idToken: Readonly<Ref<string | undefined>>
idTokenParsed: Readonly<Ref<KeycloakTokenParsed | undefined>>
refreshToken: Readonly<Ref<string | undefined>>
subject: Readonly<Ref<string | undefined>>
profile: Readonly<Ref<KeycloakProfile | undefined>>
realmAccess: Readonly<Ref<KeycloakRoles | undefined>>
resourceAccess: Readonly<Ref<KeycloakResourceAccess | undefined>>
error: Readonly<Ref<unknown>>
// Computed
isTokenExpired: ComputedRef<boolean>
username: ComputedRef<string | undefined>
email: ComputedRef<string | undefined>
fullName: ComputedRef<string | undefined>
firstName: ComputedRef<string | undefined>
lastName: ComputedRef<string | undefined>
realmRoles: ComputedRef<string[]>
// Methods
init: (options?: KeycloakInitOptions) => Promise<boolean>
login: (options?: KeycloakLoginOptions) => Promise<void>
logout: (options?: KeycloakLogoutOptions) => Promise<void>
register: (options?: KeycloakRegisterOptions) => Promise<void>
accountManagement: (options?: KeycloakAccountOptions) => Promise<void>
updateToken: (minValidity?: number) => Promise<boolean>
loadUserProfile: () => Promise<KeycloakProfile>
clearToken: () => void
hasRealmRole: (role: string) => boolean
hasResourceRole: (role: string, resource?: string) => boolean
createLoginUrl: (options?: KeycloakLoginOptions) => string
createLogoutUrl: (options?: KeycloakLogoutOptions) => string
createRegisterUrl: (options?: KeycloakRegisterOptions) => string
createAccountUrl: (options?: KeycloakAccountOptions) => string
}Adapter Types
KeycloakAdapter
Custom adapter interface.
typescript
interface KeycloakAdapter {
login: (options?: KeycloakLoginOptions) => Promise<void>
logout: (options?: KeycloakLogoutOptions) => Promise<void>
register: (options?: KeycloakRegisterOptions) => Promise<void>
accountManagement: () => Promise<void>
redirectUri: (options: { redirectUri?: string }, encodeHash: boolean) => string
}Type Guards
isTokenExpired
Check if token is expired.
typescript
function isTokenExpired(tokenParsed?: KeycloakTokenParsed, minValidity: number = 0): boolean {
if (!tokenParsed?.exp) return true
const expiresIn = tokenParsed.exp - Math.ceil(Date.now() / 1000)
return expiresIn < minValidity
}Usage Examples
Type-safe Configuration
typescript
import type { KeycloakPluginOptions } from 'keycloak-vue'
const options: KeycloakPluginOptions = {
config: {
url: 'http://localhost:8080',
realm: 'my-realm',
clientId: 'my-app'
},
initOptions: {
onLoad: 'check-sso',
checkLoginIframe: false
}
}
app.use(createKeycloakPlugin(options))Type-safe Composable
typescript
import type { UseKeycloakReturn } from 'keycloak-vue'
import { useKeycloak } from 'keycloak-vue'
const keycloak: UseKeycloakReturn = useKeycloak()Type-safe Token Parsing
typescript
import type { KeycloakTokenParsed } from 'keycloak-vue'
import { useKeycloak } from 'keycloak-vue'
const { tokenParsed } = useKeycloak()
if (tokenParsed.value) {
const token: KeycloakTokenParsed = tokenParsed.value
console.log('Username:', token.preferred_username)
console.log('Email:', token.email)
console.log('Roles:', token.realm_access?.roles)
}Type-safe Profile
typescript
import type { KeycloakProfile } from 'keycloak-vue'
import { useKeycloak } from 'keycloak-vue'
const { profile, loadUserProfile } = useKeycloak()
await loadUserProfile()
if (profile.value) {
const userProfile: KeycloakProfile = profile.value
console.log('Name:', userProfile.firstName, userProfile.lastName)
console.log('Email:', userProfile.email)
}Generic Types
With Custom Claims
Extend token types with custom claims:
typescript
interface CustomTokenParsed extends KeycloakTokenParsed {
organization?: string
department?: string
roles?: string[]
}
const { tokenParsed } = useKeycloak()
const customToken = tokenParsed.value as CustomTokenParsed
console.log('Organization:', customToken.organization)
console.log('Department:', customToken.department)Next Steps
- Explore Enums
- Check Constants
- See Usage Examples
