zudoku 0.0.0-fd8f8ad → 0.0.0-feda542

package/src/lib/authentication/providers/clerk.tsx

@@ -1,6 +1,6 @@
 import type { Clerk } from "@clerk/clerk-js";
-import { ClerkAuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
+import { type ClerkAuthenticationConfig } from "../../../config/config.js";
+import { type AuthenticationProviderInitializer } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { useAuthState } from "../state.js";
 
@@ -16,16 +16,24 @@ class ClerkAuthPlugin extends AuthenticationPlugin {
     }
 
     if (clerk.session) {
+      const verifiedEmail = clerk.session.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
       useAuthState.setState({
         isAuthenticated: true,
         isPending: false,
         profile: {
           sub: clerk.session.user.id,
           name: clerk.session.user.fullName ?? undefined,
-          email: clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: false, // TODO: Check this
+          email:
+            verifiedEmail?.emailAddress ??
+            clerk.session.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
           pictureUrl: clerk.session.user.imageUrl,
         },
+        providerData: {
+          user: clerk.session.user,
+        },
       });
     } else {
       useAuthState.setState({
@@ -45,19 +53,48 @@ const clerkAuth: AuthenticationProviderInitializer<
   redirectToAfterSignUp = "/",
   redirectToAfterSignIn = "/",
 }) => {
-  let clerkApi: Clerk;
+  let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
     const { Clerk } = await import("@clerk/clerk-js");
     clerkApi = new Clerk(clerkPubKey);
 
     await clerkApi.load();
+
+    if (clerkApi.user) {
+      const verifiedEmail = clerkApi.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
+        profile: {
+          sub: clerkApi.user.id,
+          name: clerkApi.user.fullName ?? undefined,
+          email:
+            verifiedEmail?.emailAddress ??
+            clerkApi.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
+          pictureUrl: clerkApi.user.imageUrl,
+        },
+        providerData: {
+          user: {
+            publicMetadata: clerkApi.user.publicMetadata,
+            id: clerkApi.user.id,
+            emailAddresses: clerkApi.user.emailAddresses,
+            imageUrl: clerkApi.user.imageUrl,
+            fullName: clerkApi.user.fullName,
+          },
+        },
+      });
+    }
+
     return clerkApi;
   })();
 
   async function getAccessToken() {
     await ensureLoaded;
-    if (!clerkApi.session) {
+    if (!clerkApi?.session) {
       throw new Error("No session available");
     }
     const response = await clerkApi.session.getToken();
@@ -67,26 +104,44 @@ const clerkAuth: AuthenticationProviderInitializer<
     return response;
   }
 
+  async function signRequest(request: Request): Promise<Request> {
+    const response = await getAccessToken();
+    request.headers.set("Authorization", `Bearer ${response}`);
+    return request;
+  }
+
   return {
+    clerk: clerkApi,
     getAccessToken,
+    signRequest,
     signOut: async () => {
       await ensureLoaded;
-      await clerkApi.signOut({
+      await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
+      useAuthState.setState({
+        isAuthenticated: false,
+        isPending: false,
+        profile: null,
+        providerData: null,
+      });
     },
-    signIn: async () => {
+    signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
-      await clerkApi.redirectToSignIn({
-        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      await clerkApi?.redirectToSignIn({
+        signInForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignUp,
       });
     },
-    signUp: async () => {
+    signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
-      await clerkApi.redirectToSignUp({
-        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      await clerkApi?.redirectToSignUp({
+        signInForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignUp,
       });
     },
     getAuthenticationPlugin() {

package/src/lib/authentication/providers/openid.tsx

@@ -1,19 +1,23 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import {
-  AuthenticationProvider,
-  AuthenticationProviderInitializer,
+  type AuthenticationProvider,
+  type AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
-import { useAuthState, UserProfile } from "../state.js";
+import { useAuthState, type UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
 
-interface TokenState {
+export interface OpenIdProviderData {
   accessToken: string;
+  idToken?: string;
   refreshToken?: string;
   expiresOn: Date;
   tokenType: string;
@@ -31,7 +35,11 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
       ...super.getRoutes(),
       {
         path: this.callbackUrlPath,
-        element: <CallbackHandler handleCallback={this.handleCallback} />,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
       },
     ];
   }
@@ -43,8 +51,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
-  protected callbackUrlPath = "/oauth/callback";
-  protected logoutRedirectUrlPath = "/";
+  protected callbackUrlPath: string;
+  protected logoutRedirectUrlPath: string;
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
@@ -53,6 +61,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   private readonly redirectToAfterSignIn: string;
   private readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
+  private readonly scopes: string[];
 
   constructor({
     issuer,
@@ -61,6 +70,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignUp,
     redirectToAfterSignIn,
     redirectToAfterSignOut,
+    basePath,
+    scopes,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -68,9 +79,15 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
+    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    this.scopes = scopes ?? ["openid", "profile", "email"];
+
+    const root = joinUrl(basePath, "/");
+
+    this.logoutRedirectUrlPath = root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
   }
 
   protected async getAuthServer() {
@@ -101,13 +118,17 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       throw new AuthorizationError("No expires_in in response");
     }
 
-    const tokens: TokenState = {
+    const tokens: OpenIdProviderData = {
       accessToken: response.access_token,
       refreshToken: response.refresh_token,
+      idToken: response.id_token,
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
-    sessionStorage.setItem("token-state", JSON.stringify(tokens));
+
+    useAuthState.setState({
+      providerData: tokens,
+    });
   }
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
@@ -152,7 +173,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       authorizationServer.authorization_endpoint,
     );
 
-    sessionStorage.setItem("redirect-to", redirectTo);
+    const finalRedirect = redirectTo.startsWith(window.location.origin)
+      ? redirectTo.slice(window.location.origin.length)
+      : redirectTo;
+
+    sessionStorage.setItem("redirect-to", finalRedirect);
 
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
@@ -161,7 +186,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     authorizationUrl.searchParams.set("client_id", this.client.client_id);
     authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
     authorizationUrl.searchParams.set("response_type", "code");
-    authorizationUrl.searchParams.set("scope", "openid profile email");
+    authorizationUrl.searchParams.set("scope", this.scopes.join(" "));
     authorizationUrl.searchParams.set("code_challenge", codeChallenge);
     authorizationUrl.searchParams.set(
       "code_challenge_method",
@@ -177,16 +202,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
 
     /**
-     * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
-     * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
+     * The state parameter is used to prevent CSRF attacks and should be used in all authorization requests.
+     * It is independent of PKCE and should be used regardless of PKCE support.
      */
-    if (
-      authorizationServer.code_challenge_methods_supported?.includes("S256") !==
-      true
-    ) {
-      const state = oauth.generateRandomState();
-      authorizationUrl.searchParams.set("state", state);
-    }
+    const state = oauth.generateRandomState();
+    sessionStorage.setItem(STATE_KEY, state);
+    authorizationUrl.searchParams.set("state", state);
 
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
@@ -194,22 +215,27 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
-    const tokenState = sessionStorage.getItem("token-state");
-    if (!tokenState) {
+    const { providerData } = useAuthState.getState();
+    if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
+    const tokenState = providerData as OpenIdProviderData;
 
-    const state = JSON.parse(tokenState) as TokenState;
-    if (state.expiresOn < new Date()) {
-      if (!state.refreshToken) {
-        await this.signIn();
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
         return "";
       }
 
       const request = await oauth.refreshTokenGrantRequest(
         as,
         this.client,
-        state.refreshToken,
+        tokenState.refreshToken,
       );
       const response = await oauth.processRefreshTokenResponse(
         as,
@@ -225,17 +251,23 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
       return response.access_token.toString();
     } else {
-      return state.accessToken;
+      return tokenState.accessToken;
     }
   }
 
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
   signOut = async () => {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
+      providerData: undefined,
     });
-    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -266,6 +298,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
+    const storedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+
+    if (state !== storedState) {
+      throw new AuthorizationError("Invalid state parameter");
+    }
 
     // one eternity later, the user lands back on the redirect_uri
     // Authorization Code Grant Request & Response
@@ -292,7 +330,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.redirectToAfterSignIn;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
@@ -342,32 +380,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    sessionStorage.setItem(
-      "profile-state",
-      JSON.stringify(useAuthState.getState().profile),
-    );
-
     const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
     sessionStorage.removeItem("redirect-to");
     return redirectTo;
   };
 
-  pageLoad(): void {
-    const profileState = sessionStorage.getItem("profile-state");
-    if (profileState) {
-      try {
-        const profile = JSON.parse(profileState);
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-        });
-      } catch (err) {
-        logger.error("Error parsing auth state", err);
-      }
-    }
-  }
-
   getAuthenticationPlugin() {
     // TODO: This API is a bit messy, we need to refactor auth plugins/providers
     // to remove the extra layers of abstraction.

package/src/lib/authentication/providers/supabase.tsx

@@ -0,0 +1,157 @@
+import {
+  createClient,
+  type Provider,
+  type Session,
+  type SupabaseClient,
+} from "@supabase/supabase-js";
+import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
+import {
+  type AuthenticationProvider,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { AuthorizationError } from "../errors.js";
+import { useAuthState, type UserProfile } from "../state.js";
+
+class SupabaseAuthPlugin extends AuthenticationPlugin {}
+
+class SupabaseAuthenticationProvider implements AuthenticationProvider {
+  private readonly client: SupabaseClient;
+  private readonly provider: Provider;
+  private readonly redirectToAfterSignUp: string;
+  private readonly redirectToAfterSignIn: string;
+  private readonly redirectToAfterSignOut: string;
+
+  constructor({
+    supabaseUrl,
+    supabaseKey,
+    provider,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut,
+    basePath,
+  }: SupabaseAuthenticationConfig) {
+    this.provider = provider;
+    this.client = createClient(supabaseUrl, supabaseKey, {
+      auth: {
+        autoRefreshToken: true,
+        persistSession: true,
+      },
+    });
+
+    const root = basePath ?? "/";
+
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+
+    this.client.auth.onAuthStateChange(async (event, session) => {
+      if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
+        await this.updateUserState(session);
+      } else if (event === "SIGNED_OUT") {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: undefined,
+          providerData: undefined,
+        });
+      }
+    });
+  }
+
+  private async updateUserState(session: Session) {
+    const { user } = session;
+
+    const profile: UserProfile = {
+      sub: user.id,
+      email: user.email,
+      name: user.user_metadata.full_name || user.user_metadata.name,
+      emailVerified: user.email_confirmed_at != null,
+      pictureUrl: user.user_metadata.avatar_url,
+    };
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile,
+      providerData: { session },
+    });
+  }
+
+  async getAccessToken(): Promise<string> {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (error || !data.session) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+
+    return data.session.access_token;
+  }
+
+  async signRequest(request: Request): Promise<Request> {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  }
+
+  signUp = async ({ redirectTo }: { redirectTo?: string }) => {
+    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignUp;
+
+    // Open Supabase Auth UI in a new window
+    await this.client.auth.signInWithOAuth({
+      provider: this.provider,
+      options: {
+        redirectTo: window.location.origin + finalRedirectTo,
+      },
+    });
+  };
+
+  signIn = async ({ redirectTo }: { redirectTo?: string }) => {
+    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignIn;
+
+    await this.client.auth.signInWithOAuth({
+      provider: this.provider,
+      options: {
+        redirectTo: window.location.origin + finalRedirectTo,
+        queryParams: {
+          access_type: "offline",
+          prompt: "consent",
+        },
+      },
+    });
+  };
+
+  signOut = async () => {
+    await new Promise<void>((resolve) => {
+      const { data } = this.client.auth.onAuthStateChange(async (event) => {
+        if (event !== "SIGNED_OUT") return;
+        data.subscription.unsubscribe();
+        resolve();
+      });
+      void this.client.auth.signOut();
+    });
+
+    useAuthState.setState({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+      providerData: undefined,
+    });
+  };
+
+  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
+
+  onPageLoad = async () => {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (!error && data.session) {
+      await this.updateUserState(data.session);
+    }
+  };
+}
+
+const supabaseAuth: AuthenticationProviderInitializer<
+  SupabaseAuthenticationConfig
+> = (options) => new SupabaseAuthenticationProvider(options);
+
+export default supabaseAuth;

package/src/lib/authentication/state.ts

@@ -1,24 +1,64 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { shared } from "./use-broadcast/shared.js";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
 }
 
-export const useAuthState = create<AuthState>(
-  shared(
-    (_) => ({
+export class Authentication {
+  async setLoggedIn(isLoggedIn: boolean) {}
+  async setProfile() {}
+  async setPersistentProviderData() {}
+}
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
+  const storageEventCallback = (e: StorageEvent) => {
+    if (e.key === store.persist.getOptions().name && e.newValue) {
+      void store.persist.rehydrate();
+    }
+  };
+
+  window.addEventListener("storage", storageEventCallback);
+
+  return () => {
+    window.removeEventListener("storage", storageEventCallback);
+  };
+};
+
+export const useAuthState = create<AuthState>()(
+  persist(
+    (state) => ({
       isAuthenticated: false,
-      isPending: false,
-      profile: undefined,
+      isPending: true,
+      profile: null,
+      providerData: null,
     }),
-    { name: "auth-state" },
+    {
+      merge: (persistedState, currentState) => {
+        return {
+          ...currentState,
+          isPending: false,
+          ...(typeof persistedState === "object" ? persistedState : {}),
+        };
+      },
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+    },
   ),
 );
 
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
+}
+
 export interface UserProfile {
   sub: string;
   email: string | undefined;
@@ -27,19 +67,3 @@ export interface UserProfile {
   pictureUrl: string | undefined;
   [key: string]: string | boolean | undefined;
 }
-
-interface SelectedServerState {
-  selectedServer?: string;
-  setSelectedServer: (newServer: string) => void;
-}
-
-export const useSelectedServerStore = create<SelectedServerState>()(
-  persist(
-    (set) => ({
-      selectedServer: undefined,
-      setSelectedServer: (newServer: string) =>
-        set({ selectedServer: newServer }),
-    }),
-    { name: "zudoku-selected-server" },
-  ),
-);

package/src/lib/components/AnchorLink.tsx

@@ -1,19 +1,24 @@
-import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
+import { type MouseEvent } from "react";
+import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
+import { useScrollToHash } from "../util/useScrollToAnchor.js";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.
  */
-export const AnchorLink = (props: LinkProps) => {
+export const AnchorLink = (props: NavLinkProps) => {
   const location = useLocation();
-  const hash = typeof props.to === "string" ? props.to : props.to.hash;
+  const scrollToHash = useScrollToHash();
+  const href = useHref(props.to);
+  const [pathname, hash] = href.split("#");
 
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!hash?.startsWith("#") || hash !== location.hash) return;
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    props.onClick?.(event);
+    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
+      return;
 
     event.preventDefault();
-    document.getElementById(hash.slice(1))?.scrollIntoView();
+    scrollToHash(hash);
   };
 
-  return <Link onClick={handleClick} {...props} />;
+  return <NavLink {...props} onClick={handleClick} />;
 };