skills.rest
omakei
omakeiCOMMUNITY
Explore all skills by this author →
Website𝕏@djomakeiGitHub

nuxt-auth

Authenticate users and enforce permission-based access control in Nuxt 4 with Keycloak.

2|1|Updated Mar 16, 2026
Search Tags:#authorization#security#authentication#permissions#vue3#keycloak#nuxt
One-click install
npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-auth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-auth
Source: https://github.com/omakei/adonisjs-architecture-skill/tree/main/nuxt/skills/nuxt-auth
Command: npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-auth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Nuxt-auth provides a complete solution to authenticate users and enforce permission-based access control in Nuxt apps via Keycloak, removing manual session handling and scattered auth logic.

Core Features & Use Cases

  • Keycloak-based authentication integration for Nuxt 4
  • Composables and utilities for login, logout, and permission checks
  • Page- and component-level authorization with definePageMeta and usePermissions

Quick Start

Configure Keycloak in nuxt.config.ts, initialize authentication with the useKeycloakAuth composable, and protect pages by setting permissions in definePageMeta.

Frequently Asked Questions about nuxt-auth

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I authenticate users in a Nuxt 4 app using Keycloak?▼

Authenticate users in Nuxt 4 by integrating Keycloak via runtime config endpoints and using the useKeycloakAuth composable to manage login flows and session state.

How do I enforce permission-based access control on Nuxt pages?▼

Enforce permission-based access control in Nuxt by defining required permissions within the definePageMeta macro and validating them at runtime using the usePermissions composable.

Can I use Keycloak for component-level authorization in Vue3?▼

Yes, you can implement component-level authorization in Vue3 by applying runtime permission checks through the usePermissions utility to conditionally render protected UI elements.

How do I configure Keycloak endpoints for a Nuxt authentication setup?▼

Configure Keycloak endpoints for Nuxt authentication by defining your server URLs and realm details inside the runtime config section of your nuxt.config.ts file.

Does Nuxt authentication with Keycloak handle logout flows automatically?▼

Yes, Keycloak-based authentication for Nuxt provides dedicated composables that handle both login and logout flows, removing the need for manual session termination logic.

Related Skills

Explore More Software Engineering Skills→
wilfriedagowilfriedago
2

keycloak-administration

Configure Keycloak realms, clients, and authentication flows for SSO.

Community
Advanced
InAI-TeamInAI-Team

inai-react-sdk

Provide client-side authentication in React apps using the InAI React SDK.

Official
Intermediate
clerkclerk
66

clerk-nuxt-patterns

Protects Nuxt 3 apps with Clerk authentication middleware and Nitro server route guards.

Official
Intermediate
sunilaicoesunilaicoe

convex-setup-auth

Automate authentication and access control setup in Convex applications.

Community
Intermediate