oidc-auth-frontend

Port backend-driven OIDC login/linking flows into the Vue frontend

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/briandenicola/drinks-and-desserts --skill oidc-auth-frontend

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

Validate the Vue frontend in project mode on Windows

name	oidc-auth-frontend
description	Port backend-driven OIDC login/linking flows into the Vue frontend
domain	frontend-auth
confidence	medium
source	observed
tools	[{"name":"powershell","description":"Runs Vue project-mode typechecking","when":"Validate changed auth views and TypeScript services"}]

Use this pattern when adding dynamic OIDC providers such as Entra ID or Pocket ID to this Vue frontend.

Keep existing local/MSAL login flows intact; add backend-driven OIDC providers as an alternate sign-in section.
Load public providers from /api/auth/oidc/providers.
Start login with /api/auth/oidc/{providerId}/start and callback path /auth/oidc/callback/{providerId}.
Complete login callbacks in a dedicated route and call auth.applyAuthResponse() to store returned tokens.
Put account linking in ProfileView.vue; start link with /api/auth/oidc/{providerId}/link/start and callback path /profile/oidc/link/callback/{providerId}.
Use /api/users/me/oidc-identities for linked identity list/delete because this app uses /users/me for account-scoped APIs.
Put admin provider management in AdminView.vue unless admin architecture is later split into components.

Set-Location -Path 'C:\Users\brian.denicolafamily\Code\whiskeys-and-smokes\src\web'
npm.cmd exec -- vue-tsc -b