Add Authentik OAuth/OIDC SSO, email change, and setup docs

Phase 18 changes:

OAuth/OIDC SSO (Authorization Code + PKCE):
- alembic/versions/0015_add_oauth_fields.py: add oauth_sub UNIQUE column,
  drop NOT NULL on password_hash
- src/fabledassistant/services/oauth.py: OIDC discovery (cached), build_auth_url,
  exchange_code, get_userinfo, find_or_create_oauth_user (sub→email auto-link→create)
- src/fabledassistant/routes/auth.py: GET /api/auth/oauth/login and
  GET /api/auth/oauth/callback; LOCAL_AUTH_ENABLED guards on login/register;
  /api/auth/status now returns oauth_enabled + local_auth_enabled
- src/fabledassistant/config.py: OIDC_ISSUER, OIDC_CLIENT_ID, OIDC_CLIENT_SECRET,
  OIDC_SCOPES, LOCAL_AUTH_ENABLED, oidc_enabled() classmethod
- src/fabledassistant/models/user.py: password_hash nullable, oauth_sub field,
  has_password bool in to_dict()
- src/fabledassistant/services/auth.py: create_user accepts password=None +
  oauth_sub kwarg; authenticate returns None for OAuth-only users;
  add get_user_by_oauth_sub, link_oauth_sub, update_user_email
- frontend: AuthStatus + User types updated; auth store exposes oauthEnabled +
  localAuthEnabled; LoginView shows SSO button / hides password form accordingly

Email change:
- PUT /api/auth/email: requires password confirmation for local-auth users,
  skips check for OAuth-only users; enforces email uniqueness
- SettingsView.vue: new Email Address section pre-filled with current email,
  updates authStore.user in-place on success

Docs:
- docs/oauth-setup.md: step-by-step Authentik provider setup, example
  docker-compose env vars, account linking explanation, per-provider issuer URL table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-25 20:12:13 -05:00
parent c3b05046b7
commit b37e15d59a
12 changed files with 578 additions and 31 deletions
+59 -4
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import AppLogo from "@/components/AppLogo.vue";
@@ -13,8 +13,13 @@ const password = ref("");
const error = ref("");
const submitting = ref(false);
const oauthError = computed(() => route.query.error === "oauth");
onMounted(async () => {
await authStore.checkHasUsers();
if (oauthError.value) {
error.value = "SSO login failed. Please try again.";
}
});
async function handleSubmit() {
@@ -35,6 +40,10 @@ async function handleSubmit() {
submitting.value = false;
}
}
function loginWithOAuth() {
window.location.href = "/api/auth/oauth/login";
}
</script>
<template>
@@ -46,7 +55,10 @@ async function handleSubmit() {
<router-link to="/register">Create the first account</router-link>
to get started.
</p>
<form @submit.prevent="handleSubmit">
<p v-if="error" class="error-msg">{{ error }}</p>
<form v-if="authStore.localAuthEnabled" @submit.prevent="handleSubmit">
<div class="field">
<label for="username">Username</label>
<input
@@ -72,12 +84,27 @@ async function handleSubmit() {
<p class="forgot-link">
<router-link to="/forgot-password">Forgot your password?</router-link>
</p>
<p v-if="error" class="error-msg">{{ error }}</p>
<button type="submit" class="btn-submit" :disabled="submitting">
{{ submitting ? "Signing in..." : "Sign In" }}
</button>
</form>
<p class="auth-footer">
<div
v-if="authStore.localAuthEnabled && authStore.oauthEnabled"
class="divider"
>
<span>or</span>
</div>
<button
v-if="authStore.oauthEnabled"
class="btn-oauth"
@click="loginWithOAuth"
>
Login with Authentik
</button>
<p v-if="authStore.localAuthEnabled" class="auth-footer">
Don't have an account?
<router-link to="/register">Register</router-link>
</p>
@@ -167,6 +194,34 @@ async function handleSubmit() {
.btn-submit:hover:not(:disabled) {
opacity: 0.9;
}
.divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.25rem 0;
color: var(--color-text-secondary);
font-size: 0.85rem;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
border-top: 1px solid var(--color-border);
}
.btn-oauth {
width: 100%;
padding: 0.6rem;
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
}
.btn-oauth:hover {
background: var(--color-bg-hover, var(--color-border));
}
.auth-footer {
text-align: center;
font-size: 0.9rem;