zudoku 0.0.0-f3858d6 → 0.0.0-f3f6db5

package/src/lib/authentication/authentication.ts

@@ -1,12 +1,12 @@
-import { DevPortalPlugin } from "../core/plugins.js";
+import { ZudokuPlugin } from "../core/plugins.js";
 
 export interface AuthenticationProvider {
   signUp(options?: { redirectTo?: string }): Promise<void>;
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
   getAccessToken(): Promise<string>;
-  pageLoad?(): void;
-  getAuthenticationPlugin?(): DevPortalPlugin;
+  getAuthenticationPlugin?(): ZudokuPlugin;
+  onPageLoad?(): void;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {

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

@@ -1,59 +1,28 @@
-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 { ZudokuError } from "../../util/invariant.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 executeCallback = useSuspenseQuery({
+    retry: false,
+    queryKey: ["oauth-callback"],
+    queryFn: async () => {
+      try {
+        return await handleCallback();
+      } 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,5 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {

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/hook.ts

@@ -8,9 +8,7 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
-    isPending: authState.isPending,
-    profile: authState.profile,
-    isAuthenticated: authState.profile,
+    ...authState,
 
     login: async () => {
       if (!isAuthEnabled) {

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

@@ -18,23 +18,24 @@ 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,
-    );
+    const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
@@ -42,22 +43,24 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     // 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

@@ -16,14 +16,19 @@ 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,
         },
       });
@@ -45,19 +50,39 @@ 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,
+        },
+      });
+    }
+
     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();
@@ -71,20 +96,26 @@ const clerkAuth: AuthenticationProviderInitializer<
     getAccessToken,
     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 () => {
       await ensureLoaded;
-      await clerkApi.redirectToSignIn({
+      await clerkApi?.redirectToSignIn({
         signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
         signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });
     },
     signUp: async () => {
       await ensureLoaded;
-      await clerkApi.redirectToSignUp({
+      await clerkApi?.redirectToSignUp({
         signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
         signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });

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

@@ -1,6 +1,8 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
@@ -12,8 +14,9 @@ import { useAuthState, UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 
-interface TokenState {
+export interface OpenIdProviderData {
   accessToken: string;
+  idToken?: string;
   refreshToken?: string;
   expiresOn: Date;
   tokenType: string;
@@ -31,7 +34,11 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
       ...super.getRoutes(),
       {
         path: this.callbackUrlPath,
-        element: <CallbackHandler handleCallback={this.handleCallback} />,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
       },
     ];
   }
@@ -43,8 +50,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 },
@@ -61,6 +68,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignUp,
     redirectToAfterSignIn,
     redirectToAfterSignOut,
+    basePath,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -68,9 +76,14 @@ 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");
+
+    const root = joinUrl(basePath, "/");
+
+    this.logoutRedirectUrlPath = root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
   }
 
   protected async getAuthServer() {
@@ -101,13 +114,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 } = {}) {
@@ -194,22 +211,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,7 +247,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
       return response.access_token.toString();
     } else {
-      return state.accessToken;
+      return tokenState.accessToken;
     }
   }
 
@@ -234,8 +256,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
+      providerData: undefined,
     });
-    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -292,7 +314,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 +364,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/state.ts

@@ -1,15 +1,56 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export const useAuthState = create<AuthState>(() => ({
-  isPending: false,
-  isAuthenticated: false,
-}));
-
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
+}
+
+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) => ({
+      isAuthenticated: false,
+      isPending: false,
+      profile: null,
+      providerData: null,
+    }),
+    {
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+      // partialize: (s) => ({ state: s }),
+    },
+  ),
+);
+
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
 }
 
 export interface UserProfile {

package/{LICENSE.md → src/lib/authentication/use-broadcast/LICENSE.md}

@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) Zuplo, Inc.
+Copyright (c) 2023 Romain
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: