zudoku 0.0.0-ff3bc72 → 0.0.0-zuplo-api-keys.534c6f8

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,7 +1,8 @@
+import { LogOutIcon } from "lucide-react";
 import {
-  CommonPlugin,
-  NavigationPlugin,
-  ProfileMenuPlugin,
+  type CommonPlugin,
+  type NavigationPlugin,
+  type ProfileMenuPlugin,
 } from "../core/plugins.js";
 import { SignIn } from "./components/SignIn.js";
 import { SignOut } from "./components/SignOut.js";
@@ -9,7 +10,7 @@ import { SignUp } from "./components/SignUp.js";
 
 type PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;
 
-export class AuthenticationPlugin implements PluginInterface {
+export class CoreAuthenticationPlugin implements PluginInterface {
   getRoutes() {
     return [
       {
@@ -27,12 +28,28 @@ export class AuthenticationPlugin implements PluginInterface {
     ];
   }
 
+  async getSidebar(path: string) {
+    if (path.startsWith("/settings")) {
+      return [
+        {
+          type: "link" as const,
+          label: "Logout",
+          href: "/signout",
+        },
+      ];
+    }
+
+    return [];
+  }
+
   getProfileMenuItems() {
     return [
       {
         label: "Logout",
         path: "/signout",
-      },
+        category: "bottom",
+        icon: LogOutIcon,
+      } as const,
     ];
   }
 }

package/src/lib/authentication/authentication.ts

@@ -1,14 +1,13 @@
-import { DevPortalPlugin } from "../core/plugins.js";
-
-export interface AuthenticationProvider {
+export interface AuthenticationPlugin {
   signUp(options?: { redirectTo?: string }): Promise<void>;
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
+  // @deprecated use signRequest instead
   getAccessToken(): Promise<string>;
-  pageLoad?(): void;
-  getAuthenticationPlugin?(): DevPortalPlugin;
+  onPageLoad?(): void;
+  signRequest(request: Request): Promise<Request>;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {
-  (config: TConfig): AuthenticationProvider;
+  (config: TConfig): AuthenticationPlugin;
 }

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

@@ -1,59 +1,38 @@
-import logger from "loglevel";
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { DeveloperHint } from "../../components/DeveloperHint.js";
-import { ErrorPage } from "../../components/ErrorPage.js";
-import { Spinner } from "../../components/Spinner.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { useSuspenseQuery } from "@tanstack/react-query";
+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 [error, setError] = useState<Error | null>(null);
-  const navigate = useNavigate();
-  // Deal with double mount in dev mode which will break
-  // the OAuth flow because you can only use the code once
-  const didInitialize = useRef(false);
+  const { options } = useZudoku();
+  const executeCallback = useSuspenseQuery({
+    retry: false,
+    queryKey: ["oauth-callback"],
+    queryFn: async () => {
+      try {
+        return joinUrl(
+          normalizeRedirectUrl(
+            await handleCallback(),
+            window.location.origin,
+            options.basePath,
+          ),
+        );
+      } catch (error) {
+        throw new ZudokuError("Could not validate user", {
+          cause: error,
+          title: "Authentication Error",
+          developerHint:
+            "Check the configuration of your authorization provider and ensure all settings such as the callback URL are configured correctly.",
+        });
+      }
+    },
+  });
 
-  useEffect(() => {
-    if (didInitialize.current) {
-      return;
-    }
-    didInitialize.current = true;
-    handleCallback()
-      .then((redirect) => {
-        navigate(redirect);
-      })
-      .catch((err) => {
-        logger.error(err);
-        setError(err);
-      });
-  }, [navigate, handleCallback]);
-
-  if (error) {
-    return (
-      <ErrorPage
-        category="Error"
-        title="Authentication Error"
-        message={
-          <>
-            <DeveloperHint className="mb-4">
-              Check the configuration of your authorization provider and ensure
-              all settings such as the callback URL are configured correctly.
-            </DeveloperHint>
-            An error occurred while authorizing the user.
-            <SyntaxHighlight code={error.toString()} language="plain" />
-          </>
-        }
-      />
-    );
-  }
-
-  return (
-    <div className="grid h-full place-items-center">
-      <Spinner />
-    </div>
-  );
+  return <Navigate to={executeCallback.data} />;
 }

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

@@ -8,16 +8,16 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
-    isPending: authState.isPending,
-    profile: authState.profile,
-    isAuthenticated: authState.profile,
+    ...authState,
 
     login: async () => {
       if (!isAuthEnabled) {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signIn();
+      await authentication.signIn({
+        redirectTo: window.location.href,
+      });
     },
 
     logout: async () => {
@@ -30,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,
     });
   }
 
@@ -18,46 +25,49 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     url: URL,
     { isSignUp }: { isSignUp: boolean },
   ) => {
+    url.searchParams.set("prompt", "login");
     if (isSignUp) {
       url.searchParams.set("screen_hint", "signup");
     }
   };
 
   signOut = async (): Promise<void> => {
+    const as = await this.getAuthServer();
+    const idToken = await this.getAccessToken();
+
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     });
-    sessionStorage.clear();
-    const as = await this.getAuthServer();
 
-    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
     // Logout End Session Endpoint Discovery is enabled by default.
     // Otherwise we fallback to the old non-compliant logout
 
-    let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
     // so we use the IdP logout. Otherwise, just redirect the user to home
     if (as.end_session_endpoint) {
-      logoutUrl = new URL(as.end_session_endpoint);
-      // TODO: get id_token and set hint
-      // const { id_token } = session;
-      // if (id_token) {
-      //   logoutUrl.searchParams.set("id_token_hint", id_token);
-      // }
+      const logoutUrl = new URL(as.end_session_endpoint);
+      if (idToken) {
+        logoutUrl.searchParams.set("id_token_hint", idToken);
+      }
       logoutUrl.searchParams.set(
         "post_logout_redirect_uri",
         redirectUrl.toString(),
       );
+
+      // window.location.href = logoutUrl.toString();
     } else {
-      logoutUrl = new URL(`${this.issuer}oidc/logout`);
+      const logoutUrl = new URL(
+        `${this.issuer.replace(/\/$/, "")}/oidc/logout`,
+      );
+      // window.location.href = logoutUrl.toString();
     }
   };
 }

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);
-    },
   };
 };