zudoku 0.0.0-fabd0c1 → 0.0.0-fb5b775d

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

@@ -1,16 +1,24 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { OpenIDAuthenticationConfig } from "../../../config/config.js";
-import {
-  AuthenticationProvider,
+import { ErrorBoundary } from "react-error-boundary";
+import type { NavigateFunction } from "react-router";
+import type { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthActionContext,
+  AuthActionOptions,
+  AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
+import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
-import { useAuthState, UserProfile } from "../state.js";
+import { type UserProfile, useAuthState } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
 
 export interface OpenIdProviderData {
   accessToken: string;
@@ -20,40 +28,28 @@ export interface OpenIdProviderData {
   tokenType: string;
 }
 
-class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(
-    private callbackUrlPath: string,
-    private handleCallback: () => Promise<string>,
-  ) {
-    super();
-  }
-  getRoutes() {
-    return [
-      ...super.getRoutes(),
-      {
-        path: this.callbackUrlPath,
-        element: <CallbackHandler handleCallback={this.handleCallback} />,
-      },
-    ];
-  }
-}
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
 
-export class OpenIDAuthenticationProvider implements AuthenticationProvider {
+export class OpenIDAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   protected client: oauth.Client;
   protected issuer: string;
-
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
-  protected callbackUrlPath = "/oauth/callback";
-  protected logoutRedirectUrlPath = "/";
+  protected callbackUrlPath: string;
+
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
   ) => void;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  private readonly redirectToAfterSignOut: string;
+
+  protected readonly redirectToAfterSignUp: string | undefined;
+  protected readonly redirectToAfterSignIn: string | undefined;
+  protected readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
+  private readonly scopes: string[];
 
   constructor({
     issuer,
@@ -61,17 +57,24 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
-    redirectToAfterSignOut,
+    redirectToAfterSignOut = "/",
+    basePath,
+    scopes,
   }: OpenIDAuthenticationConfig) {
+    super();
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
+    // This is the callback URL for the OAuth provider. So it needs the base path.
+    this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
+    this.scopes = scopes ?? ["openid", "profile", "email"];
+
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   protected async getAuthServer() {
@@ -115,25 +118,41 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp(
+    _: { navigate: NavigateFunction },
+    {
+      redirectTo,
+      replace = false,
+    }: {
+      redirectTo?: string;
+      replace?: boolean;
+    } = {},
+  ) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
       isSignUp: true,
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo, replace = false }: AuthActionOptions,
+  ) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
     });
   }
 
   private async authorize({
     redirectTo,
     isSignUp = false,
+    replace = false,
   }: {
     redirectTo: string;
     isSignUp?: boolean;
+    replace?: boolean;
   }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -162,11 +181,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
+    redirectUrl.hash = "";
 
     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",
@@ -182,19 +202,18 @@ 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;
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
   }
 
   async getAccessToken(): Promise<string> {
@@ -239,7 +258,13 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   }
 
-  signOut = async () => {
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
+  signOut = async (_: AuthActionContext) => {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
@@ -252,7 +277,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const redirectUrl = new URL(
       window.location.origin + this.redirectToAfterSignOut,
     );
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
 
     let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
@@ -273,9 +298,68 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   };
 
+  onPageLoad = async () => {
+    const { providerData } = useAuthState.getState();
+
+    if (!providerData) {
+      useAuthState.setState({ isPending: false });
+      return;
+    }
+
+    const tokenState = providerData as OpenIdProviderData;
+
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+
+      try {
+        const as = await this.getAuthServer();
+        const request = await oauth.refreshTokenGrantRequest(
+          as,
+          this.client,
+          tokenState.refreshToken,
+        );
+        const response = await oauth.processRefreshTokenResponse(
+          as,
+          this.client,
+          request,
+        );
+
+        if (!response.access_token) {
+          throw new AuthorizationError("No access token in response");
+        }
+
+        this.setTokensFromResponse(response);
+      } catch {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+    }
+
+    useAuthState.setState({ isPending: false });
+  };
+
   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
@@ -302,8 +386,9 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.redirectToAfterSignIn;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
+    redirectUrl.hash = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
       authServer,
@@ -357,10 +442,22 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return redirectTo;
   };
 
-  getAuthenticationPlugin() {
-    // TODO: This API is a bit messy, we need to refactor auth plugins/providers
-    // to remove the extra layers of abstraction.
-    return new OpenIdAuthPlugin(this.callbackUrlPath, this.handleCallback);
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: OPENID_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <ErrorBoundary
+              fallbackRender={({ error }) => <OAuthErrorPage error={error} />}
+            >
+              <CallbackHandler handleCallback={this.handleCallback} />
+            </ErrorBoundary>
+          </ClientOnly>
+        ),
+      },
+    ];
   }
 }
 

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

@@ -0,0 +1,75 @@
+import { Auth } from "@supabase/auth-ui-react";
+import {
+  ThemeSupa,
+  type ThemeVariables,
+  type ViewType,
+} from "@supabase/auth-ui-shared";
+import type { SupabaseClient } from "@supabase/supabase-js";
+import { useSearchParams } from "react-router";
+import type { SupabaseAuthenticationConfig } from "../../../../config/config.js";
+import { Heading } from "../../../components/Heading.js";
+
+export const SupabaseAuthUI = ({
+  client,
+  config,
+  view = "sign_in",
+}: {
+  client: SupabaseClient;
+  config: SupabaseAuthenticationConfig;
+  view: ViewType;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const providers = config.provider ? [config.provider] : config.providers;
+  const root = config.basePath ?? "/";
+  const redirectToAfterSignUp =
+    redirectTo ?? config.redirectToAfterSignUp ?? root;
+  const redirectToAfterSignIn =
+    redirectTo ?? config.redirectToAfterSignIn ?? root;
+  const redirectToAfterSignOut =
+    redirectTo ?? config.redirectToAfterSignOut ?? root;
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="max-w-md w-full mt-10">
+        <Heading level={1}>
+          {view === "sign_in" ? "Sign in" : "Sign up"}
+        </Heading>
+        <Auth
+          view={view}
+          redirectToAfterSignIn={redirectToAfterSignIn}
+          redirectToAfterSignUp={redirectToAfterSignUp}
+          redirectToAfterSignOut={redirectToAfterSignOut}
+          supabaseClient={client}
+          onlyThirdPartyProviders={config.onlyThirdPartyProviders}
+          appearance={{
+            theme: ThemeSupa,
+            variables: {
+              default: {
+                colors: {
+                  dividerBackground: "var(--border)",
+                  brand: "var(--primary)",
+                  brandAccent: "hsla(from var(--primary) h s l / 0.8)",
+                  brandButtonText: "var(--primary-foreground)",
+                  defaultButtonBorder: "var(--border)",
+                  inputBorder: "var(--border)",
+                  inputText: "var(--foreground)",
+                  inputBorderHover: "var(--accent)",
+                  defaultButtonBackground: "var(--secondary)",
+                  defaultButtonBackgroundHover: "var(--accent)",
+                },
+                radii: {
+                  borderRadiusButton: "var(--radius)",
+                  buttonBorderRadius: "var(--radius)",
+                  inputBorderRadius: "var(--radius)",
+                },
+              } satisfies ThemeVariables,
+            },
+          }}
+          providers={providers}
+          redirectTo={config.redirectToAfterSignIn ?? "/"}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,162 @@
+import {
+  createClient,
+  type Session,
+  type SupabaseClient,
+} from "@supabase/supabase-js";
+import type { SupabaseAuthenticationConfig } from "../../../config/config.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthActionContext,
+  AuthActionOptions,
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { SignOut } from "../components/SignOut.js";
+import { AuthorizationError } from "../errors.js";
+import { type UserProfile, useAuthState } from "../state.js";
+import { SupabaseAuthUI } from "./supabase/SupabaseAuthUI.js";
+
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private readonly client: SupabaseClient;
+  private readonly config: SupabaseAuthenticationConfig;
+
+  constructor(config: SupabaseAuthenticationConfig) {
+    const { supabaseUrl, supabaseKey } = config;
+    super();
+
+    this.client = createClient(supabaseUrl, supabaseKey, {
+      auth: {
+        autoRefreshToken: true,
+        persistSession: true,
+      },
+    });
+    this.config = config;
+
+    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.getState().setLoggedOut();
+      }
+    });
+  }
+
+  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.getState().setLoggedIn({
+      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 (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signup`,
+    );
+  };
+
+  signIn = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signin?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signin`,
+    );
+  };
+
+  getRoutes = () => {
+    return [
+      {
+        path: "/signin",
+        element: (
+          <SupabaseAuthUI
+            view="sign_in"
+            client={this.client}
+            config={this.config}
+          />
+        ),
+      },
+      {
+        path: "/signup",
+        element: (
+          <SupabaseAuthUI
+            view="sign_up"
+            client={this.client}
+            config={this.config}
+          />
+        ),
+      },
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+    ];
+  };
+
+  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,
+    });
+  };
+
+  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,57 +1,73 @@
-import { create, type Mutate, type StoreApi } from "zustand";
+import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../util/syncZustandState.js";
 
 export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
   profile: UserProfile | null;
   providerData: ProviderData | null;
+  setAuthenticationPending: () => void;
+  setLoggedOut: () => void;
+  setLoggedIn: ({
+    profile,
+    providerData,
+  }: {
+    profile: UserProfile;
+    providerData: unknown;
+  }) => void;
 }
 
-export class Authentication {
-  async setLoggedIn(isLoggedIn: boolean) {}
-  async setProfile() {}
-  async setPersistentProviderData() {}
-}
-
-export type StoreWithPersist<T> = Mutate<
-  StoreApi<T>,
-  [["zustand/persist", unknown]]
->;
-
-export 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) => ({
+    (set) => ({
       isAuthenticated: false,
-      isPending: false,
+      isPending: true,
       profile: null,
       providerData: null,
+      setAuthenticationPending: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedOut: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedIn: ({
+        profile,
+        providerData,
+      }: {
+        profile: UserProfile;
+        providerData: unknown;
+      }) =>
+        set(() => ({
+          isAuthenticated: true,
+          isPending: false,
+          profile,
+          providerData,
+        })),
     }),
     {
+      merge: (persistedState, currentState) => {
+        return {
+          ...currentState,
+          isPending: false,
+          ...(typeof persistedState === "object" ? persistedState : {}),
+        };
+      },
       name: "auth-state",
       storage: createJSONStorage(() => localStorage),
-      // partialize: (s) => ({ state: s }),
     },
   ),
 );
 
-if (typeof window !== "undefined") {
-  withStorageDOMEvents(useAuthState);
-}
+syncZustandState(useAuthState);
 
 export interface UserProfile {
   sub: string;
@@ -61,19 +77,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" },
-  ),
-);