zudoku 0.0.0-e2c0b54 → 0.0.0-e2ed43a

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,18 +1,28 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
+import { useZudoku } from "zudoku/components";
 import { ZudokuError } from "../../util/invariant.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { normalizeRedirectUrl } from "../../util/url.js";
 
 export function CallbackHandler({
   handleCallback,
 }: {
   handleCallback: () => Promise<string>;
 }) {
+  const { options } = useZudoku();
   const executeCallback = useSuspenseQuery({
     retry: false,
     queryKey: ["oauth-callback"],
     queryFn: async () => {
       try {
-        return await handleCallback();
+        return joinUrl(
+          normalizeRedirectUrl(
+            await handleCallback(),
+            window.location.origin,
+            options.basePath,
+          ),
+        );
       } catch (error) {
         throw new ZudokuError("Could not validate user", {
           cause: error,

package/src/lib/authentication/components/SignIn.tsx

@@ -1,5 +1,13 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {
@@ -11,5 +19,30 @@ export const SignIn = () => {
     });
   }, [context.authentication, search]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign in</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign-in process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Login
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/authentication/components/SignOut.tsx

@@ -1,13 +1,14 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignOut = () => {
   const context = useZudoku();
   const navigate = useNavigate();
+
   useEffect(() => {
     void context.authentication?.signOut().then(() => navigate("/"));
-  }, [navigate, context.authentication]);
+  }, []);
 
   return null;
 };

package/src/lib/authentication/components/SignUp.tsx

@@ -1,11 +1,45 @@
 import { useEffect } from "react";
+import { Button, Link } from "zudoku/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignUp = () => {
   const context = useZudoku();
+
   useEffect(() => {
     void (context.authentication?.signUp() ?? context.authentication?.signIn());
   }, [context.authentication]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign up</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign up process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Register
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/authentication/hook.ts

@@ -15,7 +15,9 @@ export const useAuth = () => {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signIn();
+      await authentication.signIn({
+        redirectTo: window.location.href,
+      });
     },
 
     logout: async () => {
@@ -28,5 +30,14 @@ export const useAuth = () => {
       // Redirect to home
       window.location.href = "/";
     },
+
+    signup: async () => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      await authentication.signUp({
+        redirectTo: window.location.href,
+      });
+    },
   };
 };

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

@@ -1,9 +1,15 @@
-import { Auth0AuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
+import { type Auth0AuthenticationConfig } from "../../../config/config.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
-class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
+class Auth0AuthenticationProvider
+  extends OpenIDAuthenticationProvider
+  implements AuthenticationPlugin
+{
   constructor(config: Auth0AuthenticationConfig) {
     super({
       ...config,
@@ -11,6 +17,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       issuer: `https://${config.domain}`,
       clientId: config.clientId,
       audience: config.audience,
+      scopes: config.scopes,
     });
   }
 
@@ -35,11 +42,8 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       providerData: null,
     });
 
-    const redirectUrl = new URL(
-      window.location.origin + this.logoutRedirectUrlPath,
-    );
-
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    const redirectUrl = new URL(window.location.origin);
+    redirectUrl.pathname = this.redirectToAfterSignOut;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
     // For Auth0 tenants created on or after 14 November 2023, RP-Initiated

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

@@ -1,63 +1,66 @@
 import type { Clerk } from "@clerk/clerk-js";
-import { ClerkAuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { LogOutIcon } from "lucide-react";
+import { type ZudokuPlugin } from "zudoku/plugins";
+import { type ClerkAuthenticationConfig } from "../../../config/config.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { SignIn } from "../components/SignIn.js";
+import { SignOut } from "../components/SignOut.js";
+import { SignUp } from "../components/SignUp.js";
 import { useAuthState } from "../state.js";
 
-class ClerkAuthPlugin extends AuthenticationPlugin {
-  constructor(private clerk: Promise<Clerk | undefined>) {
-    super();
-  }
-  initialize = async () => {
-    const clerk = await this.clerk;
-
-    if (!clerk) {
-      return;
-    }
-
-    if (clerk.session) {
-      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
-          pictureUrl: clerk.session.user.imageUrl,
-        },
-      });
-    } else {
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: undefined,
-      });
-    }
-  };
-}
-
 const clerkAuth: AuthenticationProviderInitializer<
   ClerkAuthenticationConfig
 > = ({
   clerkPubKey,
   redirectToAfterSignOut = "/",
-  redirectToAfterSignUp = "/",
-  redirectToAfterSignIn = "/",
-}) => {
-  let clerkApi: Clerk;
+  redirectToAfterSignUp,
+  redirectToAfterSignIn,
+}): AuthenticationPlugin & ZudokuPlugin => {
+  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,31 +70,111 @@ 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 {
+    getRoutes: () => {
+      return [
+        {
+          path: "/signout",
+          element: <SignOut />,
+        },
+        {
+          path: "/signin",
+          element: <SignIn />,
+        },
+        {
+          path: "/signup",
+          element: <SignUp />,
+        },
+      ];
+    },
+
+    getProfileMenuItems() {
+      return [
+        {
+          label: "Logout",
+          path: "/signout",
+          category: "bottom",
+          icon: LogOutIcon,
+        } as const,
+      ];
+    },
+    initialize: async () => {
+      const clerk = await ensureLoaded;
+
+      if (!clerk) {
+        return;
+      }
+
+      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:
+              verifiedEmail?.emailAddress ??
+              clerk.session.user.emailAddresses[0]?.emailAddress,
+            emailVerified: verifiedEmail !== undefined,
+            pictureUrl: clerk.session.user.imageUrl,
+          },
+          providerData: {
+            user: clerk.session.user,
+          },
+        });
+      } else {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: undefined,
+        });
+      }
+    },
     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: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    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: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    getAuthenticationPlugin() {
-      return new ClerkAuthPlugin(ensureLoaded);
-    },
   };
 };
 

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

@@ -1,58 +1,50 @@
 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 AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } 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;
 }
 
-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,
@@ -60,17 +52,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() {
@@ -101,9 +100,10 @@ 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,
     };
@@ -115,14 +115,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
       isSignUp: true,
     });
   }
 
   async signIn({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
     });
   }
 
@@ -164,7 +164,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",
@@ -180,16 +180,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;
@@ -201,7 +197,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
-    const tokenState = providerData as TokenState;
+    const tokenState = providerData as OpenIdProviderData;
 
     if (new Date(tokenState.expiresOn) < new Date()) {
       if (!tokenState.refreshToken) {
@@ -237,6 +233,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   }
 
+  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,
@@ -250,7 +252,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,
@@ -274,6 +276,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
@@ -300,7 +308,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(
@@ -355,10 +363,18 @@ 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>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
+      },
+    ];
   }
 }