Add AuthCallbackService to handle auth callbacks in Supabase (#25)

* Add AuthCallbackService to handle auth callbacks in Supabase

Created a new service, AuthCallbackService, in the Supabase package to centralize the handling of authentication callbacks. This service handles two main tasks: verifying the token hash for user email verification and exchanging the authentication code for a session. Code in the web app routes were updated to utilize this new service, improving code organization and reusability.

* Remove CSRF Token Meta component and add Jaeger exporter

The CSRF Token Meta component was removed from the application. Instead, CSRF tokens are now included in the root metadata of the application. Additionally, the "@opentelemetry/exporter-jaeger" package was added as a dependency to the Sentry monitoring package. This enables the tracing of application requests via Jaeger.

* Refactor README.md and remove redundant content

Removed the excessive content and detailed instruction from the README.md file. The documentation has been moved to a more suitable and detailed location elsewhere.

* Update package dependencies in sentry/package.json

An ordering change has been made in the dependencies within the sentry/package.json file. The "@opentelemetry/exporter-jaeger" dependency was moved to its correct alphabetical order. No version changes were made.

packages/monitoring/sentry/package.json

@@ -19,6 +19,7 @@
     "./config/edge": "./src/config/sentry.edge.config.ts"
   },
   "dependencies": {
+    "@opentelemetry/exporter-jaeger": "1.24.1",
     "@opentelemetry/resources": "1.24.1",
     "@opentelemetry/sdk-node": "0.51.1",
     "@opentelemetry/semantic-conventions": "^1.24.1",

packages/supabase/package.json

@@ -18,7 +18,8 @@
     "./check-requires-mfa": "./src/check-requires-mfa.ts",
     "./require-user": "./src/require-user.ts",
     "./hooks/*": "./src/hooks/*.ts",
-    "./database": "./src/database.types.ts"
+    "./database": "./src/database.types.ts",
+    "./auth": "./src/auth.ts"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",

packages/supabase/src/auth-callback.service.ts

@@ -0,0 +1,188 @@
+import 'server-only';
+
+import { type EmailOtpType, SupabaseClient } from '@supabase/supabase-js';
+
+/**
+ * @name createAuthCallbackService
+ * @description Creates an instance of the AuthCallbackService
+ * @param client
+ */
+export function createAuthCallbackService(client: SupabaseClient) {
+  return new AuthCallbackService(client);
+}
+
+/**
+ * @name AuthCallbackService
+ * @description Service for handling auth callbacks in Supabase
+ */
+class AuthCallbackService {
+  constructor(private readonly client: SupabaseClient) {}
+
+  /**
+   * @name verifyTokenHash
+   * @description Verifies the token hash and type and redirects the user to the next page
+   * This should be used when using a token hash to verify the user's email
+   * @param request
+   * @param params
+   */
+  async verifyTokenHash(
+    request: Request,
+    params: {
+      joinTeamPath: string;
+      redirectPath: string;
+      errorPath?: string;
+    },
+  ): Promise<URL> {
+    const url = new URL(request.url);
+    const searchParams = url.searchParams;
+
+    const token_hash = searchParams.get('token_hash');
+    const type = searchParams.get('type') as EmailOtpType | null;
+    const next = searchParams.get('next') ?? params.redirectPath;
+    const callbackParam = searchParams.get('callback');
+    const callbackUrl = callbackParam ? new URL(callbackParam) : null;
+    const inviteToken = callbackUrl?.searchParams.get('invite_token');
+
+    const errorPath = params.errorPath ?? '/auth/callback/error';
+
+    url.pathname = next;
+
+    // if we have an invite token, we append it to the redirect url
+    if (inviteToken) {
+      // if we have an invite token, we redirect to the join team page
+      // instead of the default next url. This is because the user is trying
+      // to join a team and we want to make sure they are redirected to the
+      // correct page.
+      url.pathname = params.joinTeamPath;
+      searchParams.set('invite_token', inviteToken);
+    }
+
+    if (token_hash && type) {
+      const { error } = await this.client.auth.verifyOtp({
+        type,
+        token_hash,
+      });
+
+      if (!error) {
+        return url;
+      }
+    }
+
+    // return the user to an error page with some instructions
+    url.pathname = errorPath;
+
+    return url;
+  }
+
+  /**
+   * @name exchangeCodeForSession
+   * @description Exchanges the auth code for a session and redirects the user to the next page or an error page
+   * @param request
+   * @param params
+   */
+  async exchangeCodeForSession(
+    request: Request,
+    params: {
+      joinTeamPath: string;
+      redirectPath: string;
+      errorPath?: string;
+    },
+  ): Promise<{
+    nextPath: string;
+  }> {
+    const requestUrl = new URL(request.url);
+    const searchParams = requestUrl.searchParams;
+
+    const authCode = searchParams.get('code');
+    const error = searchParams.get('error');
+    const nextUrlPathFromParams = searchParams.get('next');
+    const inviteToken = searchParams.get('invite_token');
+    const errorPath = params.errorPath ?? '/auth/callback/error';
+
+    let nextUrl = nextUrlPathFromParams ?? params.redirectPath;
+
+    // if we have an invite token, we redirect to the join team page
+    // instead of the default next url. This is because the user is trying
+    // to join a team and we want to make sure they are redirected to the
+    // correct page.
+    if (inviteToken) {
+      nextUrl = `${params.joinTeamPath}?invite_token=${inviteToken}`;
+    }
+
+    if (authCode) {
+      try {
+        const { error } =
+          await this.client.auth.exchangeCodeForSession(authCode);
+
+        // if we have an error, we redirect to the error page
+        if (error) {
+          return onError({
+            error: error.message,
+            path: errorPath,
+          });
+        }
+      } catch (error) {
+        console.error(
+          {
+            error,
+            name: `auth.callback`,
+          },
+          `An error occurred while exchanging code for session`,
+        );
+
+        const message = error instanceof Error ? error.message : error;
+
+        return onError({
+          error: message as string,
+          path: errorPath,
+        });
+      }
+    }
+
+    if (error) {
+      return onError({
+        error,
+        path: errorPath,
+      });
+    }
+
+    return {
+      nextPath: nextUrl,
+    };
+  }
+}
+
+function onError({ error, path }: { error: string; path: string }) {
+  const errorMessage = getAuthErrorMessage(error);
+
+  console.error(
+    {
+      error,
+      name: `auth.callback`,
+    },
+    `An error occurred while signing user in`,
+  );
+
+  const nextPath = `${path}?error=${errorMessage}`;
+
+  return {
+    nextPath,
+  };
+}
+
+/**
+ * Checks if the given error message indicates a verifier error.
+ * We check for this specific error because it's highly likely that the
+ * user is trying to sign in using a different browser than the one they
+ * used to request the sign in link. This is a common mistake, so we
+ * want to provide a helpful error message.
+ */
+function isVerifierError(error: string) {
+  return error.includes('both auth code and code verifier should be non-empty');
+}
+
+function getAuthErrorMessage(error: string) {
+  return isVerifierError(error)
+    ? `auth:errors.codeVerifierMismatch`
+    : `auth:authenticationErrorAlertBody`;
+}

packages/supabase/src/auth.ts

@@ -0,0 +1 @@
+export * from './auth-callback.service';