feat(frontend): server-side Zitadel OIDC auth (part 2)
Add Authorization Code + PKCE login/logout against Zitadel, handled entirely server-side with an httpOnly signed session cookie: - $lib/server/auth: openid-client discovery (config cached), jose-signed session encode/decode, cookie/name constants - routes: /login (builds the authorize URL with PKCE/state/nonce, ?mode=register -> prompt=create), /auth/callback (code exchange + session cookie), /logout (clears session + Zitadel end_session) - hooks.server populates locals.user/accessToken from the session - +layout.server exposes the user; Navbar shows the signed-in user + Salir, or Iniciar sesión / Registrarse - switch to adapter-node; env-driven config (.env gitignored, .env.example committed) with issuer http://host.docker.internal:8080 Verified: svelte-check + build clean; dev smoke test shows the landing in the logged-out state and /login issuing a 302 to Zitadel's authorize endpoint with PKCE/state/nonce (discovery reachable). Real client id/secret still needed to complete the token exchange.
This commit is contained in:
@@ -1,4 +1,12 @@
|
||||
<script lang="ts">
|
||||
import type { SessionUser } from '$lib/types';
|
||||
|
||||
interface Props {
|
||||
user: SessionUser | null;
|
||||
}
|
||||
|
||||
let { user }: Props = $props();
|
||||
|
||||
const links = [
|
||||
{ href: '/', label: 'Inicio' },
|
||||
{ href: '/explore', label: 'Explorar' }
|
||||
@@ -19,15 +27,37 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="/login" class="text-sm font-medium text-neutral-300 transition hover:text-white">
|
||||
Iniciar sesión
|
||||
</a>
|
||||
<a
|
||||
href="/login"
|
||||
class="rounded-full bg-emerald-500 px-4 py-2 text-sm font-semibold text-neutral-950 transition hover:bg-emerald-400"
|
||||
>
|
||||
Registrarse
|
||||
</a>
|
||||
{#if user}
|
||||
<a href="/explore" class="flex items-center gap-2 text-sm text-neutral-200">
|
||||
{#if user.picture}
|
||||
<img src={user.picture} alt="" class="h-7 w-7 rounded-full object-cover" />
|
||||
{:else}
|
||||
<span
|
||||
class="grid h-7 w-7 place-items-center rounded-full bg-neutral-700 text-xs font-semibold uppercase"
|
||||
>
|
||||
{(user.name ?? user.email ?? '?').charAt(0)}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="hidden sm:inline">{user.name ?? user.email}</span>
|
||||
</a>
|
||||
<form method="POST" action="/logout">
|
||||
<button
|
||||
class="rounded-full border border-white/15 px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/5"
|
||||
>
|
||||
Salir
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<a href="/login" class="text-sm font-medium text-neutral-300 transition hover:text-white">
|
||||
Iniciar sesión
|
||||
</a>
|
||||
<a
|
||||
href="/login?mode=register"
|
||||
class="rounded-full bg-emerald-500 px-4 py-2 text-sm font-semibold text-neutral-950 transition hover:bg-emerald-400"
|
||||
>
|
||||
Registrarse
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import * as client from 'openid-client';
|
||||
import { SignJWT, jwtVerify } from 'jose';
|
||||
import { env } from '$env/dynamic/private';
|
||||
import type { SessionUser } from '$lib/types';
|
||||
|
||||
export const SESSION_COOKIE = 'mf_session';
|
||||
export const STATE_COOKIE = 'mf_oidc_state';
|
||||
export const VERIFIER_COOKIE = 'mf_oidc_verifier';
|
||||
export const NONCE_COOKIE = 'mf_oidc_nonce';
|
||||
export const RETURN_COOKIE = 'mf_oidc_return';
|
||||
|
||||
export interface Session extends SessionUser {
|
||||
accessToken: string;
|
||||
refreshToken?: string;
|
||||
idToken?: string;
|
||||
expiresAt: number;
|
||||
}
|
||||
|
||||
export const OIDC_SCOPE = 'openid profile email offline_access';
|
||||
|
||||
let configPromise: Promise<client.Configuration> | null = null;
|
||||
|
||||
export function getOidcConfig(): Promise<client.Configuration> {
|
||||
configPromise ??= (async () => {
|
||||
const issuer = new URL(env.ZITADEL_ISSUER);
|
||||
const options =
|
||||
issuer.protocol === 'http:' ? { execute: [client.allowInsecureRequests] } : undefined;
|
||||
return client.discovery(
|
||||
issuer,
|
||||
env.ZITADEL_CLIENT_ID,
|
||||
env.ZITADEL_CLIENT_SECRET,
|
||||
undefined,
|
||||
options
|
||||
);
|
||||
})();
|
||||
return configPromise;
|
||||
}
|
||||
|
||||
export const authConfig = {
|
||||
get redirectUri() {
|
||||
return env.AUTH_REDIRECT_URI;
|
||||
},
|
||||
get postLogoutUri() {
|
||||
return env.AUTH_POST_LOGOUT_URI;
|
||||
}
|
||||
};
|
||||
|
||||
const sessionKey = () => new TextEncoder().encode(env.SESSION_SECRET);
|
||||
|
||||
export async function encodeSession(session: Session): Promise<string> {
|
||||
return new SignJWT({ ...session })
|
||||
.setProtectedHeader({ alg: 'HS256' })
|
||||
.setIssuedAt()
|
||||
.setExpirationTime('7d')
|
||||
.sign(sessionKey());
|
||||
}
|
||||
|
||||
export async function decodeSession(token: string | undefined): Promise<Session | null> {
|
||||
if (!token) return null;
|
||||
try {
|
||||
const { payload } = await jwtVerify(token, sessionKey());
|
||||
return payload as unknown as Session;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface SessionUser {
|
||||
sub: string;
|
||||
name?: string;
|
||||
email?: string;
|
||||
picture?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user