chore(google-one-tap): Use monadic errors when parsing token

Author: AshCorr

dotcom-rendering/src/components/GoogleOneTap.importable.tsx

@@ -1,7 +1,9 @@
 import type { CountryCode } from '@guardian/libs';
-import { log } from '@guardian/libs';
+import { isObject, log } from '@guardian/libs';
 import type { TAction, TComponentType } from '@guardian/ophan-tracker-js';
 import { submitComponentEvent } from '../client/ophan/ophan';
+import type { Result } from '../lib/result';
+import { error, ok, okOrThrow } from '../lib/result';
 import { useIsSignedIn } from '../lib/useAuthStatus';
 import { useConsent } from '../lib/useConsent';
 import { useCountryCode } from '../lib/useCountryCode';
@@ -59,13 +61,21 @@ const getStage = (hostname: string): StageType => {
  * @param token A JWT Token
  * @returns extracted email address
  */
-export const extractEmailFromToken = (token: string): string | undefined => {
+export const extractEmailFromToken = (
+	token: string,
+): Result<'ParsingError', string> => {
 	const payload = token.split('.')[1];
-	if (!payload) return;
-	const decoded = atob(payload);
-	const parsed = JSON.parse(decoded) as Record<string, unknown>;
-	if (typeof parsed.email !== 'string') return;
-	return parsed.email;
+	if (!payload) return error('ParsingError');
+	try {
+		const decoded = Buffer.from(payload, 'base64').toString();
+		const parsed = JSON.parse(decoded) as unknown;
+		if (!isObject(parsed) || typeof parsed.email !== 'string') {
+			return error('ParsingError');
+		}
+		return ok(parsed.email);
+	} catch (e) {
+		return error('ParsingError');
+	}
 };
 
 export const getRedirectUrl = ({
@@ -189,7 +199,7 @@ export const initializeFedCM = async ({
 				providers: getProviders(stage),
 			},
 		})
-		.catch((error) => {
+		.catch((e) => {
 			/**
 			 * The fedcm API hides issues with the user's federated login state
 			 * behind a generic NetworkError. This error is thrown up to 60
@@ -201,13 +211,13 @@ export const initializeFedCM = async ({
 			 * Unfortunately for us it means we can't differentiate between
 			 * a genuine network error and a user declining the FedCM prompt.
 			 */
-			if (error instanceof Error && error.name === 'NetworkError') {
+			if (e instanceof Error && e.name === 'NetworkError') {
 				log(
 					'identity',
 					'FedCM prompt failed, potentially due to user declining',
 				);
 			} else {
-				throw error;
+				throw e;
 			}
 		});
 
@@ -216,16 +226,10 @@ export const initializeFedCM = async ({
 			credentials,
 		});
 
-		const signInEmail = extractEmailFromToken(credentials.token);
-		if (signInEmail) {
-			log('identity', `FedCM ID token for ${signInEmail} received`);
-		} else {
-			log(
-				'identity',
-				'FedCM token received but email could not be extracted from token',
-			);
-			return;
-		}
+		const signInEmail = okOrThrow(
+			extractEmailFromToken(credentials.token),
+			'Failed to extract email from FedCM token',
+		);
 
 		await submitComponentEvent(
 			{

dotcom-rendering/src/components/GoogleOneTap.test.tsx

@@ -1,4 +1,5 @@
 import { submitComponentEvent as submitComponentEventMock } from '../client/ophan/ophan';
+import { error, ok } from '../lib/result';
 import {
 	extractEmailFromToken,
 	getRedirectUrl,
@@ -79,11 +80,11 @@ describe('GoogleOneTap', () => {
 			extractEmailFromToken(
 				'NULL.eyJlbWFpbCI6InZhbGlkQGVtYWlsLmNvbSJ9.NULL',
 			),
-		).toEqual('[email protected]');
+		).toEqual(ok('[email protected]'));
 	});
 
 	it('should return undefined from a malformed JWT token', () => {
-		expect(extractEmailFromToken('NULL')).toEqual(undefined);
+		expect(extractEmailFromToken('NULL')).toEqual(error('ParsingError'));
 	});
 
 	it('should initializeFedCM and redirect to Gateway with token on success', async () => {
@@ -144,10 +145,10 @@ describe('GoogleOneTap', () => {
 	});
 
 	it('should initializeFedCM and not redirect to Gateway with token on failure', async () => {
-		const error = new Error('Network Error');
-		error.name = 'NetworkError';
+		const e = new Error('Network Error');
+		e.name = 'NetworkError';
 
-		const navigatorGet = jest.fn(() => Promise.reject(error));
+		const navigatorGet = jest.fn(() => Promise.reject(e));
 		const locationReplace = jest.fn();
 
 		mockWindow({
@@ -199,10 +200,10 @@ describe('GoogleOneTap', () => {
 	});
 
 	it('should initializeFedCM and throw error when unexpected', async () => {
-		const error = new Error('window.navigator.credentials.get failed');
-		error.name = 'DOMException';
+		const e = new Error('window.navigator.credentials.get failed');
+		e.name = 'DOMException';
 
-		const navigatorGet = jest.fn(() => Promise.reject(error));
+		const navigatorGet = jest.fn(() => Promise.reject(e));
 		const locationReplace = jest.fn();
 
 		mockWindow({