nuxt-auth

name	nuxt-auth
description	Authentication with Keycloak and permission-based authorization. Use when implementing login/logout, protecting pages with permissions, checking permissions in components, or understanding the auth flow.

Nuxt Authentication & Authorization

Keycloak OIDC authentication with permission-based access control.

Core Concepts

auth.md - Complete auth patterns, permissions, page protection

Keycloak Setup

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      keycloak: {
        url: process.env.NUXT_PUBLIC_KEYCLOAK_URL,
        realm: process.env.NUXT_PUBLIC_KEYCLOAK_REALM,
        clientId: process.env.NUXT_PUBLIC_KEYCLOAK_CLIENT_ID,
      },
    },
  },
})

Auth Composable

const { user, isAuthenticated, login, logout, token } = useKeycloakAuth()

// Login (redirects to Keycloak)
await login()

// Logout (redirects to Keycloak)
await logout()

// Check auth
if (isAuthenticated.value) { /* ... */ }

// Get current token for API calls
const bearerToken = token.value

Permission Checking

const { can, cannot } = usePermissions()

// Single permission
if (can('leads.create')) { /* ... */ }

<!-- In templates -->
<script setup>
import { Button } from '~/components/ui/button'
const { can } = usePermissions()
</script>

<template>
  <Button v-if="can('leads.create')" @click="createLead">Create</Button>
</template>

Page Protection

definePageMeta({
  permissions: 'leads.list',
})