feat(google-one-tap): Set signInEmail query parameter instead of token

The users `token` contains sensitive information, most of which we don't need
to log the user in. The only piece of information we need is the email which
we can extract from the token.

Author: AshCorr

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

@@ -44,13 +44,31 @@ const getStage = (hostname: string): StageType => {
 	return 'PROD';
 };
 
+/**
+ * Extract the readers email address from a JWT token.
+ *
+ * As we're not using the token for authentication we don't need to verify the signature,
+ * if the user wants to spoof a token it doesn't matter as they can only sign in as themselves.
+ *
+ * @param token A JWT Token
+ * @returns extracted email address
+ */
+export const extractEmailFromToken = (token: string): string | undefined => {
+	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;
+};
+
 export const getRedirectUrl = ({
 	stage,
-	token,
+	signInEmail,
 	currentLocation,
 }: {
 	stage: StageType;
-	token: string;
+	signInEmail: string;
 	currentLocation: string;
 }): string => {
 	const profileDomain = {
@@ -59,7 +77,7 @@ export const getRedirectUrl = ({
 		DEV: 'https://profile.thegulocal.com',
 	}[stage];
 	const queryParams = new URLSearchParams({
-		token,
+		signInEmail,
 		returnUrl: currentLocation,
 	});
 
@@ -184,6 +202,17 @@ 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;
+		}
+
 		await submitComponentEvent(
 			{
 				action: 'SIGN_IN',
@@ -200,7 +229,7 @@ export const initializeFedCM = async ({
 		window.location.replace(
 			getRedirectUrl({
 				stage,
-				token: credentials.token,
+				signInEmail,
 				currentLocation: window.location.href,
 			}),
 		);

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

@@ -1,5 +1,9 @@
 import { submitComponentEvent as submitComponentEventMock } from '../client/ophan/ophan';
-import { getRedirectUrl, initializeFedCM } from './GoogleOneTap.importable';
+import {
+	extractEmailFromToken,
+	getRedirectUrl,
+	initializeFedCM,
+} from './GoogleOneTap.importable';
 
 jest.mock('../client/ophan/ophan', () => ({
 	submitComponentEvent: jest.fn(),
@@ -36,38 +40,52 @@ describe('GoogleOneTap', () => {
 		expect(
 			getRedirectUrl({
 				stage: 'PROD',
-				token: 'test-token',
+				signInEmail: '[email protected]',
 				currentLocation: 'https://www.theguardian.com/uk',
 			}),
 		).toEqual(
-			'https://profile.theguardian.com/signin/google?token=test-token&returnUrl=https%3A%2F%2Fwww.theguardian.com%2Fuk',
+			'https://profile.theguardian.com/signin/google?signInEmail=valid%40email.com&returnUrl=https%3A%2F%2Fwww.theguardian.com%2Fuk',
 		);
 
 		expect(
 			getRedirectUrl({
 				stage: 'CODE',
-				token: 'test-token',
+				signInEmail: '[email protected]',
 				currentLocation: 'https://m.code.dev-theguardian.com/uk',
 			}),
 		).toEqual(
-			'https://profile.code.dev-theguardian.com/signin/google?token=test-token&returnUrl=https%3A%2F%2Fm.code.dev-theguardian.com%2Fuk',
+			'https://profile.code.dev-theguardian.com/signin/google?signInEmail=valid%40email.com&returnUrl=https%3A%2F%2Fm.code.dev-theguardian.com%2Fuk',
 		);
 
 		expect(
 			getRedirectUrl({
 				stage: 'DEV',
-				token: 'test-token',
+				signInEmail: '[email protected]',
 				currentLocation:
 					'http://localhost/Front/https://m.code.dev-theguardian.com/uk',
 			}),
 		).toEqual(
-			'https://profile.thegulocal.com/signin/google?token=test-token&returnUrl=http%3A%2F%2Flocalhost%2FFront%2Fhttps%3A%2F%2Fm.code.dev-theguardian.com%2Fuk',
+			'https://profile.thegulocal.com/signin/google?signInEmail=valid%40email.com&returnUrl=http%3A%2F%2Flocalhost%2FFront%2Fhttps%3A%2F%2Fm.code.dev-theguardian.com%2Fuk',
 		);
 	});
 
+	it('should return email address from a valid JWT token', () => {
+		expect(
+			extractEmailFromToken(
+				'NULL.eyJlbWFpbCI6InZhbGlkQGVtYWlsLmNvbSJ9.NULL',
+			),
+		).toEqual('[email protected]');
+	});
+
+	it('should return undefined from a malformed JWT token', () => {
+		expect(extractEmailFromToken('NULL')).toEqual(undefined);
+	});
+
 	it('should initializeFedCM and redirect to Gateway with token on success', async () => {
 		const navigatorGet = jest.fn(() =>
-			Promise.resolve({ token: 'test-token' }),
+			Promise.resolve({
+				token: 'NULL.eyJlbWFpbCI6InZhbGlkQGVtYWlsLmNvbSJ9.NULL',
+			}),
 		);
 		const locationReplace = jest.fn();
 
@@ -83,7 +101,8 @@ describe('GoogleOneTap', () => {
 				context: 'continue',
 				providers: [
 					{
-						clientId: '774465807556.apps.googleusercontent.com',
+						clientId:
+							'774465807556-4d50ur6svcjj90l7fe6i0bnp4t4qhkga.apps.googleusercontent.com',
 						configURL: 'https://accounts.google.com/gsi/fedcm.json',
 					},
 				],
@@ -92,7 +111,7 @@ describe('GoogleOneTap', () => {
 		});
 
 		expect(locationReplace).toHaveBeenCalledWith(
-			'https://profile.theguardian.com/signin/google?token=test-token&returnUrl=https%3A%2F%2Fwww.theguardian.com%2Fuk',
+			'https://profile.theguardian.com/signin/google?signInEmail=valid%40email.com&returnUrl=https%3A%2F%2Fwww.theguardian.com%2Fuk',
 		);
 
 		expect(submitComponentEventMock).toHaveBeenNthCalledWith(
@@ -273,7 +292,7 @@ describe('GoogleOneTap', () => {
 		});
 
 		await initializeFedCM({ isSignedIn: true });
-		
+
 		expect(submitComponentEventMock).toHaveBeenCalledTimes(1);
 		expect(submitComponentEventMock).toHaveBeenCalledWith(
 			{