feat(next): add auth statsd and error page

Because:

- In an attempt to have statsd for all 3rd party dependencies, add
  statsd recording to Auth.js actions and events.
- On auth error, users are navigated to Auth.js default error page

This commit:

- Add statsd counters signin, signout, prompt_none_fail and error
- Add custom Auth.js error page

Closes #FXA-11670 #FXA-11754

Author: StaberindeZA

apps/payments/next/app/[locale]/auth/error/en.ftl

@@ -0,0 +1,3 @@
+## Authentication Error page
+
+auth-error-page-title = We Couldn’t Sign You In

apps/payments/next/app/[locale]/auth/error/page.tsx

@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import Image from 'next/image';
+import errorIcon from '@fxa/shared/assets/images/error.svg';
+import mozillaIcon from '@fxa/shared/assets/images/moz-logo-bw-rgb.svg';
+import Link from 'next/link';
+import { cookies } from 'next/headers';
+import { BaseButton, ButtonVariant } from '@fxa/payments/ui';
+import { config } from '../../../../config';
+import { getApp } from '@fxa/payments/ui/server';
+
+export default function AuthErrorPage({
+  searchParams,
+}: {
+  searchParams: Record<string, string>;
+}) {
+  const cookieStore = cookies();
+  const redirectUrl =
+    cookieStore.get('__Secure-authjs.callback-url')?.value ||
+    cookieStore.get('authjs.callback-url')?.value;
+  const supportUrl = config.supportUrl
+  const l10n = getApp().getL10n();
+  getApp().getEmitterService().emit('auth', { type: 'error', errorMessage: searchParams?.error });
+
+  return (
+    <>
+      <header
+        className="bg-white fixed flex justify-between items-center shadow h-16 left-0 top-0 mx-auto my-0 px-4 py-0 w-full z-40 tablet:h-20"
+        role="banner"
+      >
+        <div className="flex items-center">
+          <Image
+            src={mozillaIcon}
+            alt="Mozilla logo"
+            className="object-contain"
+            width={140}
+          />
+        </div>
+      </header>
+      <section
+        className="flex flex-col items-center text-center max-w-lg mx-auto mt-6 p-16 tablet:my-10 gap-16 bg-white shadow tablet:rounded-xl border border-transparent"
+        aria-labelledby='unable-to-signin-heading'
+      >
+        <h1 id="unable-to-signin-heading" className="text-xl font-bold">
+          {l10n.getString('auth-error-page-title', 'We Couldn’t Sign You In')}
+        </h1>
+        <Image src={errorIcon} alt="" />
+        <p className="flex flex-col gap-6 items-center text-grey-400 max-w-md text-sm">
+          <span>
+            {l10n.getFragmentWithSource('checkout-error-boundary-basic-error-message',
+              {
+                elems: {
+                  contactSupportLink: (
+                    <Link href={supportUrl} className="underline hover:text-grey-400">
+                      contact support.
+                    </Link>
+                  )
+                }
+              }
+              ,
+              <>
+                Something went wrong. Please try again or{' '}
+                <Link href={supportUrl} className="underline hover:text-grey-400">
+                  contact support.
+                </Link>
+              </>
+            )}
+          </span>
+          {redirectUrl &&
+            <Link href={redirectUrl}>
+              <BaseButton
+                variant={ButtonVariant.Primary}
+                className="text-base"
+              >
+                Try again
+              </BaseButton>
+            </Link>
+          }
+        </p>
+      </section>
+    </>
+  );
+}
+

apps/payments/next/app/api/auth/callback/fxa/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest } from 'next/server';
 import { GET as AuthJsGET } from '../../../../../auth';
 import { redirect } from 'next/navigation';
+import { getApp } from '@fxa/payments/ui/server';
 
 export { POST } from '../../../../../auth';
 
@@ -21,6 +22,7 @@ export async function GET(request: NextRequest) {
       cookieStore.get('__Secure-authjs.callback-url') ||
       cookieStore.get('authjs.callback-url');
     if (redirectUrl?.value) {
+      getApp().getEmitterService().emit('auth', { type: 'prompt_none_fail' });
       redirect(redirectUrl.value);
     }
   }

apps/payments/next/auth.ts

@@ -5,6 +5,18 @@
 import NextAuth from 'next-auth';
 import { authConfig } from './auth.config';
 import { config } from './config';
+import { BaseError } from '@fxa/shared/error';
+
+import { getApp } from '@fxa/payments/ui/server';
+
+
+export class AuthError extends BaseError {
+  constructor(...args: ConstructorParameters<typeof BaseError>) {
+    super(...args);
+    this.name = 'AuthError';
+    Object.setPrototypeOf(this, AuthError.prototype);
+  }
+}
 
 export const {
   handlers: { GET, POST },
@@ -13,6 +25,9 @@ export const {
   signOut,
 } = NextAuth({
   ...authConfig,
+  pages: {
+    error: '/auth/error',
+  },
   providers: [
     {
       id: 'fxa',
@@ -56,4 +71,17 @@ export const {
       };
     },
   },
+  events: {
+    async signIn() {
+      getApp().getEmitterService().emit('auth', { type: 'signin' });
+    },
+    async signOut() {
+      getApp().getEmitterService().emit('auth', { type: 'signout' });
+    }
+  },
+  logger: {
+    error(error: Error) {
+      console.error(new AuthError(error.message, { cause: error }))
+    }
+  }
 });

libs/payments/events/src/lib/emitter.error.ts

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import { BaseError } from "@fxa/shared/error";
+
+export class EmitterServiceHandleAuthError extends BaseError {
+  constructor(...args: ConstructorParameters<typeof BaseError>) {
+    super(...args);
+    this.name = 'EmitterServiceHandleAuthError';
+    Object.setPrototypeOf(this, EmitterServiceHandleAuthError.prototype);
+  }
+}
+
+

libs/payments/events/src/lib/emitter.factories.ts

@@ -6,6 +6,7 @@ import {
   AdditionalMetricsData,
   SP3RolloutEvent,
   SubscriptionEndedEvents,
+  type AuthEvents,
 } from './emitter.types';
 import {
   CancellationReason,
@@ -14,6 +15,13 @@ import {
 } from '@fxa/payments/metrics';
 import { SubplatInterval } from '@fxa/payments/customer';
 
+export const AuthEventsFactory = (
+  override?: Partial<AuthEvents>
+): AuthEvents => ({
+  type: faker.helpers.arrayElement(['signin', 'signout', 'prompt_none_fail', 'error']),
+  ...override
+})
+
 export const AdditionalMetricsDataFactory = (
   override?: AdditionalMetricsData
 ): AdditionalMetricsData => ({

libs/payments/events/src/lib/emitter.service.spec.ts

@@ -37,6 +37,7 @@ import { CartManager } from '@fxa/payments/cart';
 import { PaymentsEmitterService } from './emitter.service';
 import {
   AdditionalMetricsDataFactory,
+  AuthEventsFactory,
   SP3RolloutEventFactory,
   SubscriptionEndedFactory,
 } from './emitter.factories';
@@ -47,6 +48,7 @@ import {
 import { AccountManager } from '@fxa/shared/account/account';
 import { retrieveAdditionalMetricsData } from './util/retrieveAdditionalMetricsData';
 import { Logger } from '@nestjs/common';
+import { EmitterServiceHandleAuthError } from './emitter.error';
 
 jest.mock('./util/retrieveAdditionalMetricsData');
 const mockedRetrieveAdditionalMetricsData = jest.mocked(
@@ -60,6 +62,7 @@ describe('PaymentsEmitterService', () => {
   let productConfigurationManager: ProductConfigurationManager;
   let cartManager: CartManager;
   let statsd: StatsD;
+  let logger: Logger;
 
   const additionalMetricsData = AdditionalMetricsDataFactory();
   const mockCommonMetricsData = CommonMetricsFactory({
@@ -106,6 +109,7 @@ describe('PaymentsEmitterService', () => {
     productConfigurationManager = moduleRef.get(ProductConfigurationManager);
     cartManager = moduleRef.get(CartManager);
     statsd = moduleRef.get<StatsD>(StatsDService);
+    logger = moduleRef.get<Logger>(Logger);
   });
 
   it('should be defined', () => {
@@ -124,6 +128,30 @@ describe('PaymentsEmitterService', () => {
     );
   });
 
+  describe('handleAuthEvent', () => {
+    const authEventData = AuthEventsFactory();
+    beforeEach(() => {
+      jest.spyOn(statsd, 'increment').mockReturnValue();
+    });
+
+    it('should call manager record method', async () => {
+      await paymentsEmitterService.handleAuthEvent(authEventData);
+
+      expect(statsd.increment).toHaveBeenCalledWith(
+        `auth_event`,
+        { type: authEventData.type }
+      );
+    });
+
+    it('should log the error if provided', async () => {
+      const errorMessage = 'Error message text'
+      const authEventData = AuthEventsFactory({ errorMessage });
+      await paymentsEmitterService.handleAuthEvent(authEventData);
+
+      expect(logger.error).toHaveBeenCalledWith(new EmitterServiceHandleAuthError(errorMessage))
+    })
+  });
+
   describe('handleCheckoutView', () => {
     beforeEach(() => {
       jest

libs/payments/events/src/lib/emitter.service.ts

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import Emittery from 'emittery';
 import { ProductConfigurationManager } from '@fxa/shared/cms';
-import { Inject, Injectable } from '@nestjs/common';
+import { Inject, Injectable, Logger } from '@nestjs/common';
 import { CartManager, TaxChangeAllowedStatus } from '@fxa/payments/cart';
 import { PaymentsGleanManager } from '@fxa/payments/metrics';
 import { LocationStatus } from '@fxa/payments/eligibility';
@@ -13,12 +13,14 @@ import {
   PaymentsEmitterEvents,
   SP3RolloutEvent,
   SubscriptionEndedEvents,
+  type AuthEvents,
 } from './emitter.types';
 import { AccountManager } from '@fxa/shared/account/account';
 import { retrieveAdditionalMetricsData } from './util/retrieveAdditionalMetricsData';
 import { getSubplatInterval } from '@fxa/payments/customer';
 import * as Sentry from '@sentry/nestjs';
 import { StatsD, StatsDService } from '@fxa/shared/metrics/statsd';
+import { EmitterServiceHandleAuthError } from './emitter.error';
 
 @Injectable()
 export class PaymentsEmitterService {
@@ -29,7 +31,8 @@ export class PaymentsEmitterService {
     private paymentsGleanManager: PaymentsGleanManager,
     private cartManager: CartManager,
     private accountManager: AccountManager,
-    @Inject(StatsDService) public statsd: StatsD
+    @Inject(StatsDService) public statsd: StatsD,
+    private log: Logger
   ) {
     this.emitter = new Emittery<PaymentsEmitterEvents>();
     this.emitter.on('checkoutView', this.handleCheckoutView.bind(this));
@@ -43,12 +46,22 @@ export class PaymentsEmitterService {
     );
     this.emitter.on('sp3Rollout', this.handleSP3Rollout.bind(this));
     this.emitter.on('locationView', this.handleLocationView.bind(this));
+    this.emitter.on('auth', this.handleAuthEvent.bind(this));
   }
 
   getEmitter(): Emittery<PaymentsEmitterEvents> {
     return this.emitter;
   }
 
+  async handleAuthEvent(eventData: AuthEvents) {
+    const { type, errorMessage } = eventData;
+    this.statsd.increment('auth_event', { type });
+
+    if (errorMessage) {
+      this.log.error(new EmitterServiceHandleAuthError(errorMessage))
+    }
+  }
+
   async handleCheckoutView(eventData: CheckoutEvents) {
     const additionalData = await retrieveAdditionalMetricsData(
       this.productConfigurationManager,

libs/payments/events/src/lib/emitter.types.ts

@@ -44,6 +44,11 @@ export type SP3RolloutEvent = {
   shadowMode: boolean;
 };
 
+export type AuthEvents = {
+  type: 'signin' | 'signout' | 'prompt_none_fail' | 'error';
+  errorMessage?: string;
+}
+
 export type PaymentsEmitterEvents = {
   checkoutView: CheckoutEvents;
   checkoutEngage: CheckoutEvents;
@@ -53,6 +58,7 @@ export type PaymentsEmitterEvents = {
   subscriptionEnded: SubscriptionEndedEvents;
   sp3Rollout: SP3RolloutEvent;
   locationView: LocationStatus | TaxChangeAllowedStatus;
+  auth: AuthEvents;
 };
 
 export type AdditionalMetricsData = {