@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,197 @@
+import { HomeIcon } from "lucide-react";
+import { Link } from "react-router";
+import { DeveloperHint } from "../../components/DeveloperHint.js";
+import { Heading } from "../../components/Heading.js";
+import { Typography } from "../../components/Typography.js";
+import { Button } from "../../ui/Button.js";
+import { OAuthAuthorizationError } from "../errors.js";
+import { useAuth } from "../hook.js";
+
+const errorDetailsMap: Record<string, { message: string }> = {
+  invalid_request: {
+    message:
+      "The authentication request was invalid. Please try signing in again.",
+  },
+  unauthorized_client: {
+    message:
+      "This application is not authorized to access your account. Please contact support.",
+  },
+  access_denied: {
+    message:
+      "You denied access to this application. To continue, please sign in and grant access.",
+  },
+  unsupported_response_type: {
+    message:
+      "The authentication method is not supported. Please contact support.",
+  },
+  invalid_scope: {
+    message: "The requested permissions are invalid. Please contact support.",
+  },
+  server_error: {
+    message:
+      "The authentication server encountered an error. Please try again in a few moments.",
+  },
+  temporarily_unavailable: {
+    message:
+      "The authentication service is temporarily unavailable. Please try again in a few moments.",
+  },
+  // Token errors
+  invalid_client: {
+    message: "Invalid application credentials. Please contact support.",
+  },
+  invalid_grant: {
+    message:
+      "The authentication code has expired or is invalid. Please sign in again.",
+  },
+  unsupported_grant_type: {
+    message:
+      "The authentication method is not supported. Please contact support.",
+  },
+  // Custom errors
+  invalid_state: {
+    message:
+      "Security validation failed. This may be due to a potential security attack. Please try signing in again.",
+  },
+  missing_code_verifier: {
+    message:
+      "Authentication security information is missing. Please clear your browser cache and try again.",
+  },
+  network_error: {
+    message:
+      "A network error occurred during authentication. Please check your connection and try again.",
+  },
+  token_expired: {
+    message: "Your authentication session has expired. Please sign in again.",
+  },
+  configuration_error: {
+    message:
+      "There is an issue with the authentication configuration. Please contact support.",
+  },
+  unknown_error: {
+    message:
+      "An unexpected error occurred during authentication. Please try again or contact support.",
+  },
+};
+
+export function OAuthErrorPage({ error }: { error: unknown }) {
+  const { login } = useAuth();
+
+  if (!(error instanceof OAuthAuthorizationError)) {
+    throw error;
+  }
+
+  const oauthError = error.error as
+    | { error?: string; error_description?: string; error_uri?: string }
+    | undefined;
+  const type =
+    oauthError && typeof oauthError === "object" && "error" in oauthError
+      ? String(oauthError.error)
+      : "unknown_error";
+
+  const details = errorDetailsMap[type] ?? errorDetailsMap.unknown_error;
+
+  return (
+    <div className="min-h-[400px] flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="space-y-4 items-center">
+          <Heading level={2} className="text-2xl inline-block font-bold">
+            {titles[type] || "Authentication Error"}
+          </Heading>
+
+          <Typography className="text-gray-600 dark:text-gray-300 leading-relaxed">
+            {details?.message}
+          </Typography>
+
+          <DeveloperHint>
+            <p>
+              <strong>Error:</strong> <code>{type}</code>
+            </p>
+            {oauthError?.error_description != null && (
+              <p>
+                <strong>Description:</strong> {oauthError.error_description}
+              </p>
+            )}
+            {oauthError?.error_uri?.startsWith("http") && (
+              <p>
+                <strong>More info:</strong>{" "}
+                <a
+                  href={oauthError.error_uri}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  {oauthError.error_uri}
+                </a>
+              </p>
+            )}
+          </DeveloperHint>
+        </div>
+
+        <div className="space-y-3 pt-4">
+          <div className="space-y-2">
+            {(type === "access_denied" ||
+              type === "invalid_grant" ||
+              type === "token_expired") && (
+              <Button
+                onClick={() => login()}
+                className="w-full capitalize"
+                variant={"default"}
+              >
+                Sign in again
+              </Button>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <Button asChild className="flex-1" variant="outline">
+              <Link to="/">
+                <HomeIcon className="w-4 h-4 mr-2" />
+                Go Home
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        {helpMessages[type] && (
+          <Typography className="text-sm text-gray-500 dark:text-gray-400">
+            {helpMessages[type]}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const titles: Record<string, string> = {
+  access_denied: "Access Denied",
+  invalid_request: "Invalid Request",
+  unauthorized_client: "Unauthorized Application",
+  unsupported_response_type: "Unsupported Method",
+  invalid_scope: "Invalid Permissions",
+  server_error: "Server Error",
+  temporarily_unavailable: "Service Unavailable",
+  invalid_client: "Invalid Credentials",
+  invalid_grant: "Authentication Expired",
+  unsupported_grant_type: "Unsupported Authentication",
+  invalid_state: "Security Check Failed",
+  missing_code_verifier: "Security Information Missing",
+  network_error: "Network Error",
+  token_expired: "Session Expired",
+  configuration_error: "Configuration Error",
+  unknown_error: "Authentication Failed",
+};
+
+const helpMessages: Record<string, string> = {
+  access_denied:
+    "If you changed your mind, you can try signing in again to grant access.",
+  invalid_state:
+    "This error can occur if you have multiple tabs open or if your session was compromised.",
+  missing_code_verifier:
+    "Try clearing your browser's cache and cookies for this site.",
+  network_error:
+    "Check your internet connection and ensure you can access other websites.",
+  server_error:
+    "The issue is on our end. Our team has been notified and is working to fix it.",
+  temporarily_unavailable:
+    "This is usually temporary. Try again in a few minutes.",
+};

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

@@ -0,0 +1,46 @@
+import { Spinner } from "@lukoweb/apitogo/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
+
+export const SignIn = () => {
+  const auth = useAuth();
+  const [search] = useSearchParams();
+  const redirectTo = search.get("redirect") ?? undefined;
+
+  const login = useLatest(auth.login);
+
+  useEffect(() => {
+    void login.current({
+      redirectTo: redirectTo ?? "/",
+      replace: true,
+    });
+  }, [login, redirectTo]);
+
+  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 items-center text-sm font-medium gap-2">
+            <Spinner /> Redirecting...
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
+
+export const SignOut = () => {
+  const auth = useAuth();
+
+  const logout = useLatest(auth.logout);
+
+  useEffect(() => {
+    void logout.current();
+  }, [logout]);
+
+  return null;
+};

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

@@ -0,0 +1,48 @@
+import { Button, Link } from "@lukoweb/apitogo/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
+
+export const SignUp = () => {
+  const auth = useAuth();
+  const [search] = useSearchParams();
+  const redirectTo = search.get("redirect") ?? "/";
+
+  const signup = useLatest(auth.signup);
+
+  useEffect(() => {
+    void signup.current({ redirectTo });
+  }, [signup, redirectTo]);
+
+  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={() => auth.signup()} 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/constants.ts

@@ -0,0 +1 @@
+export const EMAIL_LINK_STORAGE_KEY = "zudoku:emailForSignIn";

package/src/lib/authentication/errors.ts

@@ -0,0 +1,34 @@
+import { ZudokuError, type ZudokuErrorOptions } from "../util/invariant.js";
+
+export class AuthorizationError extends Error {}
+
+export class OAuthAuthorizationError extends ZudokuError {
+  constructor(
+    message: string,
+    public error?: unknown,
+    options?: ZudokuErrorOptions,
+  ) {
+    super(message, options);
+  }
+}
+
+export type OAuthErrorType =
+  // Authorization errors
+  | "invalid_request"
+  | "unauthorized_client"
+  | "access_denied"
+  | "unsupported_response_type"
+  | "invalid_scope"
+  | "server_error"
+  | "temporarily_unavailable"
+  // Token errors
+  | "invalid_client"
+  | "invalid_grant"
+  | "unsupported_grant_type"
+  // Custom errors
+  | "invalid_state"
+  | "missing_code_verifier"
+  | "network_error"
+  | "token_expired"
+  | "configuration_error"
+  | "unknown_error";

package/src/lib/authentication/hook.ts

@@ -0,0 +1,139 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import type { AuthActionOptions } from "./authentication.js";
+import { useAuthState } from "./state.js";
+
+export type UseAuthReturn = ReturnType<typeof useAuth>;
+
+/**
+ * Refreshes the user profile from the authentication provider.
+ *
+ * This gets called when the user profile needs to be refreshed (e.g. to check if the email is verified)
+ */
+export const useRefreshUserProfile = ({
+  refetchOnWindowFocus,
+}: {
+  refetchOnWindowFocus?: boolean | "always";
+} = {}) => {
+  const { authentication } = useZudoku();
+  const isAuthEnabled = typeof authentication !== "undefined";
+
+  return useQuery({
+    refetchOnWindowFocus,
+    queryKey: ["refresh-user-profile"],
+    enabled:
+      isAuthEnabled && typeof authentication?.refreshUserProfile === "function",
+    queryFn: () => authentication?.refreshUserProfile?.(),
+  });
+};
+
+export const useVerifiedEmail = () => {
+  const { authentication } = useZudoku();
+  const authState = useAuthState();
+  const navigate = useNavigate();
+  const isAuthEnabled = typeof authentication !== "undefined";
+
+  const { refetch: refreshUserProfile } = useRefreshUserProfile({
+    refetchOnWindowFocus: "always",
+  });
+
+  return {
+    email: authState.profile?.email,
+    isVerified: authState.profile?.emailVerified,
+    supportsEmailVerification:
+      typeof authentication?.requestEmailVerification === "function",
+    refresh: () => void refreshUserProfile(),
+    requestEmailVerification: async (options?: AuthActionOptions) => {
+      if (process.env.NODE_ENV === "development") {
+        // biome-ignore lint: We want to warn about the deprecation
+        console.warn(
+          "requestEmailVerification is deprecated. Use useVerifiedEmail.",
+        );
+      }
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+
+      await authentication.requestEmailVerification?.(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
+    },
+  };
+};
+
+export const useAuth = () => {
+  const { authentication } = useZudoku();
+  const authState = useAuthState();
+  const isAuthEnabled = typeof authentication !== "undefined";
+  const navigate = useNavigate();
+
+  useRefreshUserProfile();
+
+  return {
+    isAuthEnabled,
+    ...authState,
+
+    login: async (options?: AuthActionOptions) => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      // TODO: Should handle errors/state
+      await authentication.signIn(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
+    },
+
+    logout: async () => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      // TODO: Should handle errors/state
+      await authentication.signOut({ navigate });
+
+      // Redirect to home
+      void navigate("/", { replace: true });
+    },
+
+    signup: async (options?: AuthActionOptions) => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      await authentication.signUp(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
+    },
+
+    requestEmailVerification: async (options?: AuthActionOptions) => {
+      if (process.env.NODE_ENV === "development") {
+        // biome-ignore lint: We want to warn about the deprecation
+        console.warn(
+          "requestEmailVerification is deprecated on useAuth. Use the requestEmailVerification method from useVerifiedEmail hook instead.",
+        );
+      }
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+
+      await authentication.requestEmailVerification?.(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
+    },
+  };
+};

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

@@ -0,0 +1,91 @@
+import type { Auth0AuthenticationConfig } from "../../../config/config.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import type {
+  AuthActionContext,
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { useAuthState } from "../state.js";
+import { OpenIDAuthenticationProvider } from "./openid.js";
+
+class Auth0AuthenticationProvider
+  extends OpenIDAuthenticationProvider
+  implements AuthenticationPlugin
+{
+  private readonly options: Auth0AuthenticationConfig["options"];
+  constructor(config: Auth0AuthenticationConfig) {
+    super({
+      ...config,
+      type: "openid",
+      issuer: `https://${config.domain}/`,
+      clientId: config.clientId,
+      audience: config.audience,
+      scopes: config.scopes,
+    });
+    this.options = config.options;
+  }
+
+  onAuthorizationUrl = async (
+    url: URL,
+    { isSignUp }: { isSignUp: boolean },
+  ) => {
+    if (this.options?.prompt !== undefined) {
+      if (this.options.prompt !== "") {
+        url.searchParams.set("prompt", this.options.prompt);
+      }
+    } else if (this.options?.alwaysPromptLogin !== false) {
+      url.searchParams.set("prompt", "login");
+    }
+
+    if (isSignUp) {
+      url.searchParams.set("screen_hint", "signup");
+    }
+  };
+
+  signOut = async (_: AuthActionContext): Promise<void> => {
+    const as = await this.getAuthServer();
+
+    const { providerData } = useAuthState.getState();
+    const idToken =
+      providerData?.type === "openid" ? providerData.idToken : undefined;
+
+    useAuthState.getState().setLoggedOut();
+
+    const redirectUrl = new URL(window.location.origin);
+    redirectUrl.pathname = joinUrl(
+      import.meta.env.BASE_URL,
+      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
+
+    // The end_session_endpoint is set, the IdP supports some form of logout,
+    // so we use auth0 logout. Otherwise, just redirect the user to home
+    if (as.end_session_endpoint) {
+      const logoutUrl = new URL(as.end_session_endpoint);
+      if (idToken) {
+        logoutUrl.searchParams.set("id_token_hint", idToken);
+      }
+      logoutUrl.searchParams.set("client_id", this.client.client_id);
+      logoutUrl.searchParams.set(
+        "post_logout_redirect_uri",
+        redirectUrl.toString(),
+      );
+
+      window.location.href = logoutUrl.toString();
+    } else {
+      // const logoutUrl = new URL(`${this.issuer.replace(/\/$/, "")}/v2/logout`);
+      // logoutUrl.searchParams.set("returnTo", redirectUrl.toString());
+      // don't support the deprecated logout today
+    }
+  };
+}
+
+const auth0Auth: AuthenticationProviderInitializer<
+  Auth0AuthenticationConfig
+> = (options) => new Auth0AuthenticationProvider(options);
+
+export default auth0Auth;