@aerogel/plugin-solid 0.0.1-next.33c058471a47b828f174aca4d2b5aeadfeb2c627

package/src/auth/Authenticator.ts

@@ -0,0 +1,123 @@
+import { PromisedValue, arr, fail } from '@noeldemartin/utils';
+import { SolidEngine } from 'soukai-solid';
+import type { Closure, FluentArray, GetClosureArgs } from '@noeldemartin/utils';
+import type { Engine } from 'soukai';
+import type { Fetch } from 'soukai-solid';
+import type { SolidUserProfile } from '@noeldemartin/solid-utils';
+import type { ErrorSource } from '@aerogel/core';
+
+import type { AuthenticatorName } from '@/auth';
+
+type ListenerEvent = keyof AuthenticatorListener;
+type ListenerEventPayload<
+    Event extends ListenerEvent,
+    Callback = AuthenticatorListener[Event]
+> = Callback extends Closure ? GetClosureArgs<Callback> : never;
+
+export interface AuthSession {
+    user: SolidUserProfile;
+    loginUrl: string;
+    authenticator: Authenticator;
+}
+
+export interface AuthenticatorListener {
+    onSessionStarted?: (session: AuthSession) => Promise<void> | void;
+    onSessionFailed?: (loginUrl: string, error: ErrorSource) => Promise<void> | void;
+    onSessionEnded?: () => Promise<void> | void;
+    onAuthenticatedFetchReady?: (fetch: Fetch) => Promise<void> | void;
+}
+
+export default abstract class Authenticator {
+
+    public name!: AuthenticatorName;
+
+    private authenticatedFetch?: Fetch;
+    private booted?: PromisedValue<void>;
+    private listeners: FluentArray<AuthenticatorListener> = arr<AuthenticatorListener>([]);
+    private _engine?: SolidEngine;
+
+    public abstract login(loginUrl: string, user?: SolidUserProfile): Promise<AuthSession>;
+
+    public abstract logout(): Promise<void>;
+
+    public get engine(): Engine {
+        this._engine = this._engine ?? new SolidEngine(this.requireAuthenticatedFetch());
+
+        return this._engine;
+    }
+
+    public getAuthenticatedFetch(): Fetch | null {
+        return this.authenticatedFetch ?? null;
+    }
+
+    public requireAuthenticatedFetch(): Fetch {
+        return this.authenticatedFetch ?? fail('Authenticated fetch is not ready');
+    }
+
+    public addListener(listener: AuthenticatorListener): () => void {
+        if (!this.listeners.includes(listener)) this.listeners.push(listener);
+
+        return () => {
+            this.removeListener(listener);
+        };
+    }
+
+    public removeListener(listener: AuthenticatorListener): void {
+        if (!this.listeners.includes(listener)) return;
+
+        this.listeners.remove(listener);
+    }
+
+    public async boot(): Promise<void> {
+        if (this.booted) {
+            return this.booted;
+        }
+
+        this.booted = new PromisedValue();
+
+        await this.restoreSession();
+
+        this.booted.resolve();
+    }
+
+    protected abstract restoreSession(): Promise<void>;
+
+    protected async initAuthenticatedFetch(fetch: Fetch): Promise<void> {
+        this.authenticatedFetch = fetch;
+
+        await this.notifyListeners('onAuthenticatedFetchReady', fetch);
+    }
+
+    protected async startSession(sessionData: Omit<AuthSession, 'authenticator'>): Promise<AuthSession> {
+        const session: AuthSession = {
+            authenticator: this,
+            ...sessionData,
+        };
+
+        await this.notifyListeners('onSessionStarted', session);
+
+        return session;
+    }
+
+    protected async failSession(loginUrl: string, error: ErrorSource): Promise<void> {
+        await this.notifyListeners('onSessionFailed', loginUrl, error);
+    }
+
+    protected async endSession(): Promise<void> {
+        await this.notifyListeners('onSessionEnded');
+    }
+
+    protected async notifyListeners<Event extends ListenerEvent>(
+        event: Event,
+        ...payload: ListenerEventPayload<Event>
+    ): Promise<void> {
+        await Promise.all(
+            this.listeners.toArray().map(async (listener) => {
+                const callback = listener[event] as Closure | undefined;
+
+                await callback?.(...payload);
+            }),
+        );
+    }
+
+}

package/src/auth/authenticators/InruptAuthenticator.lazy.ts

@@ -0,0 +1 @@
+export { fetch, handleIncomingRedirect, login, logout } from '@inrupt/solid-client-authn-browser';

package/src/auth/authenticators/InruptAuthenticator.ts

@@ -0,0 +1,74 @@
+import { Storage, after, fail } from '@noeldemartin/utils';
+import type { Fetch } from 'soukai-solid';
+import type { handleIncomingRedirect, login, logout } from '@inrupt/solid-client-authn-browser';
+
+import Authenticator from '@/auth/Authenticator';
+import type { AuthSession } from '@/auth/Authenticator';
+
+const STORAGE_KEY = 'inrupt-authenticator';
+
+export default class InruptAuthenticator extends Authenticator {
+
+    private _fetch!: Fetch;
+    private _login!: typeof login;
+    private _logout!: typeof logout;
+    private _handleIncomingRedirect!: typeof handleIncomingRedirect;
+
+    public async login(loginUrl: string): Promise<AuthSession> {
+        Storage.set<boolean>(STORAGE_KEY, true);
+
+        await this._login({
+            oidcIssuer: loginUrl,
+            // TODO clientId, clientName, and redirectUrl
+        });
+
+        // Browser should redirect, so just make it wait for a while.
+        await after({ seconds: 60 });
+
+        return fail('Browser should have redirected, but it didn\'t');
+    }
+
+    public async logout(): Promise<void> {
+        await this._logout();
+        await this.endSession();
+    }
+
+    protected async restoreSession(): Promise<void> {
+        const { fetch, handleIncomingRedirect, login, logout } = await import('./InruptAuthenticator.lazy');
+
+        this._fetch = fetch;
+        this._login = login;
+        this._logout = logout;
+        this._handleIncomingRedirect = handleIncomingRedirect;
+
+        await this.loginFromRedirect();
+    }
+
+    protected async loginFromRedirect(): Promise<void> {
+        if (!Storage.has(STORAGE_KEY)) {
+            return;
+        }
+
+        const session = await this._handleIncomingRedirect(window.location.href);
+
+        Storage.remove(STORAGE_KEY);
+
+        if (session?.isLoggedIn && session.webId) {
+            await this.initSession(session.webId);
+        }
+    }
+
+    protected async initSession(webId: string): Promise<void> {
+        await this.initAuthenticatedFetch(this._fetch);
+
+        try {
+            const { default: Solid } = await import('@/services/Solid');
+            const user = await Solid.requireUserProfile(webId);
+
+            await this.startSession({ user, loginUrl: webId });
+        } catch (error) {
+            await this.failSession(webId, error);
+        }
+    }
+
+}

package/src/auth/index.ts

@@ -0,0 +1,38 @@
+import InruptAuthenticator from './authenticators/InruptAuthenticator';
+import type Authenticator from './Authenticator';
+
+const _authenticators = {} as Authenticators;
+
+type BaseAuthenticators = typeof authenticators;
+
+export * from './Authenticator';
+export { Authenticator };
+
+export const authenticators = {
+    inrupt: new InruptAuthenticator(),
+};
+
+export function setDefaultAuthenticator(authenticator: Authenticator): void {
+    _authenticators.default = authenticator;
+}
+
+export function getAuthenticator<T extends AuthenticatorName>(name: T): Authenticators[T] {
+    return _authenticators[name];
+}
+
+export function registerAuthenticators(customAuthenticators: Record<string, Authenticator>): void {
+    Object.entries(customAuthenticators).forEach(([name, authenticator]) =>
+        registerAuthenticator(name as AuthenticatorName, authenticator));
+}
+
+export function registerAuthenticator<T extends AuthenticatorName>(name: T, authenticator: Authenticators[T]): void {
+    _authenticators[name] = authenticator;
+
+    authenticator.name = authenticator.name ?? name;
+}
+
+export type AuthenticatorName = keyof Authenticators;
+
+export interface Authenticators extends BaseAuthenticators {
+    default: Authenticator;
+}

package/src/components/AGSolidStatus.ts

@@ -0,0 +1,5 @@
+import type { AuthSession } from '@/auth/Authenticator';
+
+export interface IAGSolidStatusLoggedInSlotProps {
+    session: AuthSession;
+}

package/src/components/AGSolidStatus.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <slot v-if="$solid.loginStale" name="login-stale">
+            <AGMarkdown :text="$td('solid.loginStale', 'This is taking too long...')" />
+        </slot>
+
+        <slot v-if="$solid.loginOngoing" name="login-ongoing">
+            <AGMarkdown :text="$td('ui.loading', 'Loading...')" />
+        </slot>
+
+        <slot v-else-if="$solid.isLoggedIn()" name="logged-in" :session="$solid.session">
+            <div class="flex flex-col gap-3">
+                <AGMarkdown
+                    :text="
+                        $td(
+                            'solid.loggedIn',
+                            {
+                                userName: $solid.user.name ?? $solid.user.webId,
+                                userWebId: $solid.user.webId,
+                            },
+                            'You are logged in as [{userName}]({userWebId})'
+                        )
+                    "
+                />
+                <AGButton @click="$solid.logout()">
+                    {{ $td('solid.logout', 'Logout') }}
+                </AGButton>
+            </div>
+        </slot>
+
+        <slot v-else name="logged-out">
+            <div class="flex flex-col">
+                <AGForm :form="form" class="flex" @submit="$solid.login(form.url)">
+                    <AGInput
+                        name="url"
+                        :aria-label="$td('solid.url', 'Login url')"
+                        :placeholder="$td('solid.placeholder', 'https://...')"
+                    />
+                    <AGButton submit>
+                        {{ $td('solid.login', 'Login') }}
+                    </AGButton>
+                </AGForm>
+                <AGButton v-if="$solid.wasLoggedIn" class="mt-3" @click="$solid.reconnect({ force: true })">
+                    {{ $td('solid.reconnect', 'Reconnect') }}
+                </AGButton>
+                <AGMarkdown
+                    v-if="$solid.previousSession?.error"
+                    class="mt-1 self-center text-sm text-red-800"
+                    :text="$td('solid.previousLoginError', 'Previous login attempt failed')"
+                />
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { AGButton, AGForm, AGInput, AGMarkdown, requiredStringInput, useForm } from '@aerogel/core';
+
+const form = useForm({ url: requiredStringInput() });
+</script>

package/src/components/index.ts

@@ -0,0 +1,4 @@
+import AGSolidStatus from './AGSolidStatus.vue';
+import { IAGSolidStatusLoggedInSlotProps } from './AGSolidStatus';
+
+export { AGSolidStatus, IAGSolidStatusLoggedInSlotProps };

package/src/errors/AuthenticationCancelledError.ts

@@ -0,0 +1,3 @@
+import { JSError } from '@noeldemartin/utils';
+
+export default class AuthenticationCancelledError extends JSError {}

package/src/errors/ContainerAlreadyInUse.ts

@@ -0,0 +1,11 @@
+import { JSError } from '@noeldemartin/utils';
+import type { JSErrorOptions } from '@noeldemartin/utils';
+import type { SolidContainer } from 'soukai-solid';
+
+export default class ContainerAlreadyInUse extends JSError {
+
+    constructor(container: SolidContainer, options?: JSErrorOptions) {
+        super(`Container at ${container.url} is already in use`, options);
+    }
+
+}

package/src/errors/index.ts

@@ -0,0 +1,4 @@
+import AuthenticationCancelledError from '@/errors/AuthenticationCancelledError';
+import ContainerAlreadyInUse from '@/errors/ContainerAlreadyInUse';
+
+export { AuthenticationCancelledError, ContainerAlreadyInUse };

package/src/main.ts

@@ -0,0 +1,43 @@
+import { bootServices } from '@aerogel/core';
+import { bootSolidModels } from 'soukai-solid';
+import type { Plugin } from '@aerogel/core';
+
+import Solid from '@/services/Solid';
+import {
+    authenticators as baseAuthenticators,
+    getAuthenticator,
+    registerAuthenticators,
+    setDefaultAuthenticator,
+} from '@/auth';
+import type Authenticator from '@/auth/Authenticator';
+import type { AuthenticatorName } from '@/auth';
+
+const services = { $solid: Solid };
+
+export { Solid };
+export * from './auth';
+export * from './components';
+export * from './errors';
+
+export interface Options {
+    authenticators?: Record<string, Authenticator>;
+    defaultAuthenticator?: AuthenticatorName;
+}
+
+export type SolidServices = typeof services;
+
+export default function solid(options: Options = {}): Plugin {
+    return {
+        async install(app) {
+            bootSolidModels();
+            registerAuthenticators({ ...baseAuthenticators, ...(options.authenticators ?? {}) });
+            setDefaultAuthenticator(getAuthenticator(options.defaultAuthenticator ?? 'inrupt'));
+
+            await bootServices(app, services);
+        },
+    };
+}
+
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties extends SolidServices {}
+}

package/src/services/Solid.state.ts

@@ -0,0 +1,60 @@
+import { defineServiceState } from '@aerogel/core';
+import type { ErrorSource } from '@aerogel/core';
+import type { Fetch, SolidUserProfile } from '@noeldemartin/solid-utils';
+
+import type { AuthSession } from '@/auth/Authenticator';
+import type { AuthenticatorName } from '@/auth';
+
+export default defineServiceState({
+    name: 'solid',
+    persist: ['autoReconnect', 'dismissed', 'previousSession', 'profiles', 'staleProfiles'],
+    initialState: {
+        autoReconnect: false,
+        dismissed: false,
+        ignorePreviousSessionError: false,
+        loginStartupError: null as ErrorSource | null,
+        loginOngoing: false,
+        preferredAuthenticator: null as AuthenticatorName | null,
+        previousSession: null as {
+            authenticator: AuthenticatorName;
+            loginUrl: string;
+            avatarUrl?: string;
+            error: ErrorSource | null;
+        } | null,
+        profiles: {} as Record<string, SolidUserProfile>,
+        session: null as AuthSession | null,
+        loginStale: false,
+        staleProfiles: [] as string[],
+    },
+    serialize(state) {
+        if (state.previousSession?.error instanceof Error) {
+            state.previousSession.error = state.previousSession.error.message;
+        }
+
+        return state;
+    },
+    computed: {
+        loggedIn: (state) => !!state.session,
+        user: (state) => state.session?.user ?? null,
+        userAvatarUrl: (state) => state.session?.user?.avatarUrl ?? state.previousSession?.avatarUrl ?? null,
+        wasLoggedIn: (state) => !!state.previousSession?.loginUrl,
+        authenticator: (state) => state.session?.authenticator ?? null,
+        hasLoggedIn(): boolean {
+            return this.loggedIn || this.wasLoggedIn;
+        },
+        fetch(): Fetch {
+            return this.authenticator?.getAuthenticatedFetch() ?? window.fetch.bind(window);
+        },
+        error(state): ErrorSource | null {
+            if (state.loginStartupError) {
+                return state.loginStartupError ?? null;
+            }
+
+            if (state.ignorePreviousSessionError) {
+                return null;
+            }
+
+            return state.previousSession?.error ?? null;
+        },
+    },
+});