feat: Identity enabled remote config

projects/Mallard/src/authentication/authorizers/OktaAuthorizer.ts

@@ -4,12 +4,12 @@ import {
 	isAuthenticated,
 } from '@okta/okta-react-native';
 import { oktaDataCache } from 'src/helpers/storage';
+import { canViewEditionOkta } from '../helpers';
 import { Authorizer } from '../lib/Authorizer';
 import type { AuthResult } from '../lib/Result';
 import { flat, InvalidResult, ValidResult } from '../lib/Result';
 import { fetchMembershipDataOkta } from '../services/membership';
 import { oktaAuth } from '../services/okta';
-import { canViewEditionOkta } from '../helpers';
 
 const authWithTokens = async (mtoken: string): Promise<AuthResult<any>> => {
 	try {
@@ -24,7 +24,7 @@ const authWithTokens = async (mtoken: string): Promise<AuthResult<any>> => {
 			}),
 		);
 	} catch (e) {
-		console.log('AUTH WITH TOKENS ERROR: ', e);
+		return InvalidResult();
 	}
 };
 
@@ -34,9 +34,11 @@ export default new Authorizer({
 	authCaches: [],
 	auth: async () => {
 		// eslint-disable-next-line
-		const { access_token } = await oktaAuth();
-		const data = await authWithTokens(access_token);
-		console.log('VALID RESULT?: ', data);
+		const authResponse = await oktaAuth();
+		if (!authResponse) {
+			return InvalidResult();
+		}
+		const data = await authWithTokens(authResponse.access_token);
 		return data;
 	},
 	authWithCachedCredentials: async () => {

projects/Mallard/src/authentication/helpers.ts

@@ -33,14 +33,14 @@ const canViewEdition = (userData: IdentityAuthData): boolean =>
  * If they have a Guardian email we want to check that they've validated their email,
  * otherwise we don't really mind
  */
-const isStaffMemberOkta = (userData: IdentityAuthData) =>
+const isStaffMemberOkta = (userData: any) =>
 	isGuardianEmail(userData.userDetails.preferred_username);
 
 /**
  * This takes the membersDataApiResponse and is responsible for returning a boolean
  * describing whether or not the user has the relevant permissions to use the app
  */
-const canViewEditionOkta = (userData: IdentityAuthData): boolean => {
+const canViewEditionOkta = (userData: any): boolean => {
 	return (
 		userData.membershipDetails.contentAccess.digitalPack ||
 		isStaffMemberOkta(userData)

projects/Mallard/src/authentication/services/okta.ts

@@ -1,13 +1,10 @@
 import {
 	createConfig,
-	EventEmitter,
-	getUserFromIdToken,
-	introspectRefreshToken,
 	signInWithBrowser,
 	signOut,
 } from '@okta/okta-react-native';
 import { Platform } from 'react-native';
-import { fromResponse } from '../lib/Result';
+import { errorService } from 'src/services/errors';
 
 const oktaInitialisation = () => {
 	createConfig({
@@ -30,43 +27,15 @@ const oktaInitialisation = () => {
 			'offline_access',
 		],
 		requireHardwareBackedKeyStore: true,
-	})
-		.then(() => {
-			console.log('OKTA CORRECT');
-		})
-		.catch(() => {
-			console.log('OKTA ERROR');
-		});
-
-	EventEmitter.addListener('onError', function (e: Event) {
-		console.log(e);
 	});
 };
 
 const oktaAuth = async () => {
 	try {
 		const attempt = await signInWithBrowser();
-		// const user = await getUserFromIdToken();
-		// console.log('okta user: ', user);
-		console.log('okta attempt:', attempt);
 		return attempt;
 	} catch (e) {
-		console.log('OKTA ERROR: ');
-		console.log(e);
-	}
-};
-
-const oktaAuthFromResponse = async () => {
-	try {
-		const attempt = await signInWithBrowser();
-		const user = await getUserFromIdToken();
-		console.log('okta user: ', user);
-		return fromResponse(user, {
-			valid: () => user,
-		});
-	} catch (e) {
-		console.log('OKTA ERROR: ');
-		console.log(e);
+		errorService.captureException(e);
 	}
 };
 
@@ -75,8 +44,8 @@ const oktaSignOut = async () => {
 		const attempt = await signOut();
 		return attempt;
 	} catch (e) {
-		console.log(e);
+		errorService.captureException(e);
 	}
 };
 
-export { oktaInitialisation, oktaAuth, oktaAuthFromResponse, oktaSignOut };
+export { oktaInitialisation, oktaAuth, oktaSignOut };

projects/Mallard/src/components/Modals/SignInFailedModal.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useOkta } from 'src/hooks/use-okta-sign-in';
 import { RouteNames } from 'src/navigation/NavigationModels';
 import type { MainStackParamList } from 'src/navigation/NavigationModels';
+import { remoteConfigService } from 'src/services/remote-config';
 import { CenterWrapper } from '../CenterWrapper/CenterWrapper';
 import { SignInFailedModalCard } from '../SignInFailedModalCard';
 
@@ -29,9 +30,22 @@ const SignInFailedModal = ({
 					})
 				}
 				onLoginPress={async () => {
-					await signOut();
-					await signIn();
+					const isIdentityEnabled =
+						remoteConfigService.getBoolean('identity_enabled');
+					if (isIdentityEnabled) {
+						navigation.navigate(RouteNames.Settings, {
+							screen: RouteNames.SignIn,
+						});
+					} else {
+						await signOut();
+						await signIn();
+					}
 				}}
+				onFaqPress={() =>
+					navigation.navigate(RouteNames.Settings, {
+						screen: RouteNames.FAQ,
+					})
+				}
 				close={() => navigation.navigate(RouteNames.Issue)}
 			/>
 		</CenterWrapper>

projects/Mallard/src/components/Modals/SignInModal.tsx

@@ -1,9 +1,10 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
+import { useOkta } from 'src/hooks/use-okta-sign-in';
 import { RouteNames } from 'src/navigation/NavigationModels';
+import { remoteConfigService } from 'src/services/remote-config';
 import { CenterWrapper } from '../CenterWrapper/CenterWrapper';
 import { SignInModalCard } from '../sign-in-modal-card';
-import { useOkta } from 'src/hooks/use-okta-sign-in';
 
 const SignInModal = () => {
 	const { navigate } = useNavigation();
@@ -12,8 +13,22 @@ const SignInModal = () => {
 		<CenterWrapper>
 			<SignInModalCard
 				onDismiss={() => navigate(RouteNames.Issue)}
-				onLoginPress={signIn}
-				close={() => navigate(RouteNames.Article)}
+				onLoginPress={() => {
+					const isIdentityEnabled =
+						remoteConfigService.getBoolean('identity_enabled');
+					isIdentityEnabled
+						? navigate(RouteNames.Settings, {
+								screen: RouteNames.SignIn,
+						  })
+						: signIn();
+				}}
+				close={() => {
+					const isIdentityEnabled =
+						remoteConfigService.getBoolean('identity_enabled');
+					isIdentityEnabled
+						? navigate(RouteNames.Issue)
+						: navigate(RouteNames.Article);
+				}}
 			/>
 		</CenterWrapper>
 	);

projects/Mallard/src/components/Modals/SubFoundModal.tsx

@@ -2,16 +2,21 @@ import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { Copy } from 'src/helpers/words';
 import { RouteNames } from 'src/navigation/NavigationModels';
+import { remoteConfigService } from 'src/services/remote-config';
 import { CenterWrapper } from '../CenterWrapper/CenterWrapper';
 import { CardAppearance, OnboardingCard } from '../onboarding/onboarding-card';
 
 const SubFoundModalCard = () => {
-	const { goBack } = useNavigation();
+	const { goBack, navigate } = useNavigation();
 	return (
 		<CenterWrapper>
 			<OnboardingCard
 				title={Copy.subFound.title}
-				onDismissThisCard={() => goBack()}
+				onDismissThisCard={() => {
+					const isIdentityEnabled =
+						remoteConfigService.getBoolean('identity_enabled');
+					isIdentityEnabled ? navigate(RouteNames.Issue) : goBack();
+				}}
 				subtitle={Copy.subFound.subtitle}
 				appearance={CardAppearance.Blue}
 				size="small"

projects/Mallard/src/components/Modals/SubNotFoundModal.tsx

@@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { useOkta } from 'src/hooks/use-okta-sign-in';
 import { RouteNames } from 'src/navigation/NavigationModels';
+import { remoteConfigService } from 'src/services/remote-config';
 import { CenterWrapper } from '../CenterWrapper/CenterWrapper';
 import { SubNotFoundModalCard } from '../sub-not-found-modal-card';
 
@@ -12,7 +13,15 @@ const SubNotFoundModal = () => {
 		<CenterWrapper>
 			<SubNotFoundModalCard
 				close={() => navigate(RouteNames.Issue)}
-				onLoginPress={signIn}
+				onLoginPress={() => {
+					const isIdentityEnabled =
+						remoteConfigService.getBoolean('identity_enabled');
+					isIdentityEnabled
+						? navigate(RouteNames.Settings, {
+								screen: RouteNames.SignIn,
+						  })
+						: signIn();
+				}}
 				onOpenCASLogin={() =>
 					navigate(RouteNames.Settings, {
 						screen: RouteNames.CasSignIn,

projects/Mallard/src/components/SignInFailedModalCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Copy } from 'src/helpers/words';
+import { remoteConfigService } from 'src/services/remote-config';
 import { metrics } from 'src/theme/spacing';
 import { ModalButton } from './Button/ModalButton';
 import { CardAppearance, OnboardingCard } from './onboarding/onboarding-card';
@@ -16,22 +17,53 @@ const styles = StyleSheet.create({
 	},
 });
 
+interface FailureModalText {
+	title: string;
+	bodyCopy: string;
+	tryAgainText: string;
+}
+
+const failureModalText = (
+	isAppleRelayEmail: boolean,
+	email: string,
+): FailureModalText => {
+	return isAppleRelayEmail
+		? {
+				title: Copy.failedSignIn.appleRelayTitle,
+				bodyCopy: Copy.failedSignIn.appleRelayBody,
+				tryAgainText: Copy.failedSignIn.appleRelayRetry,
+		  }
+		: {
+				title: Copy.failedSignIn.title,
+				bodyCopy: Copy.failedSignIn.body.replace('%email%', email),
+				tryAgainText: Copy.failedSignIn.retryButtonTitle,
+		  };
+};
+
 const SignInFailedModalCard = ({
 	close,
 	onLoginPress,
 	onOpenCASLogin,
 	onDismiss,
+	onFaqPress,
 	email,
 }: {
 	close: () => void;
 	onLoginPress: () => void;
 	onOpenCASLogin: () => void;
 	onDismiss: () => void;
+	onFaqPress?: () => void;
 	email: string;
 }) => {
+	const isIdentityEnabled =
+		remoteConfigService.getBoolean('identity_enabled');
+	const isAppleRelayEmail = email.includes('privaterelay.appleid.com');
+	const modalText = failureModalText(isAppleRelayEmail, email);
 	return (
 		<OnboardingCard
-			title={Copy.failedSignIn.title}
+			title={
+				isIdentityEnabled ? modalText.title : Copy.failedSignIn.title
+			}
 			appearance={CardAppearance.Blue}
 			onDismissThisCard={() => {
 				close();
@@ -41,7 +73,9 @@ const SignInFailedModalCard = ({
 			bottomContent={
 				<>
 					<UiBodyCopy weight="bold">
-						{Copy.failedSignIn.body.replace('%email%', email)}
+						{isIdentityEnabled
+							? modalText.bodyCopy
+							: Copy.failedSignIn.body.replace('%email%', email)}
 					</UiBodyCopy>
 					<View style={styles.bottomContentContainer}>
 						<View>
@@ -51,7 +85,9 @@ const SignInFailedModalCard = ({
 									onLoginPress();
 								}}
 							>
-								{Copy.failedSignIn.retryButtonTitle}
+								{isIdentityEnabled
+									? modalText.tryAgainText
+									: Copy.failedSignIn.retryButtonTitle}
 							</ModalButton>
 							<ModalButton
 								onPress={() => {
@@ -61,6 +97,16 @@ const SignInFailedModalCard = ({
 							>
 								Activate with subscriber ID
 							</ModalButton>
+							{isAppleRelayEmail && (
+								<ModalButton
+									onPress={() => {
+										close();
+										onFaqPress?.();
+									}}
+								>
+									How can I sign in with Apple?
+								</ModalButton>
+							)}
 						</View>
 					</View>
 				</>

projects/Mallard/src/components/sub-not-found-modal-card.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Copy } from 'src/helpers/words';
+import { remoteConfigService } from 'src/services/remote-config';
 import { ModalButton } from './Button/ModalButton';
 import { CardAppearance, OnboardingCard } from './onboarding/onboarding-card';
 
@@ -28,6 +29,9 @@ const SubNotFoundModalCard = ({
 			<>
 				<ModalButton
 					onPress={() => {
+						const isIdentityEnabled =
+							remoteConfigService.getBoolean('identity_enabled');
+						isIdentityEnabled && close();
 						onLoginPress();
 					}}
 				>

projects/Mallard/src/hooks/use-login-overlay.tsx

@@ -1,17 +1,24 @@
 import { useNavigation } from '@react-navigation/native';
 import { useEffect } from 'react';
-import { useAccess, useOktaData } from 'src/authentication/AccessContext';
+import {
+	useAccess,
+	useIdentity,
+	useOktaData,
+} from 'src/authentication/AccessContext';
 import { RouteNames } from 'src/navigation/NavigationModels';
 
 const useLoginOverlay = () => {
 	const { navigate } = useNavigation();
 	const canAccess = useAccess();
 	const oktaData = useOktaData();
+	const idData = useIdentity();
 
 	useEffect(() => {
 		if (!canAccess) {
 			const id = setTimeout(() => {
-				if (oktaData) {
+				if (idData) {
+					navigate(RouteNames.SubNotFoundModal);
+				} else if (oktaData) {
 					navigate(RouteNames.SignInFailedModal, {
 						emailAddress: oktaData.userDetails.preferred_username,
 					});

projects/Mallard/src/hooks/use-okta-sign-in.tsx

@@ -34,7 +34,6 @@ const useOkta = () => {
 			}
 			setIsLoading(false);
 		} catch (e) {
-			console.log(e);
 			const appleErrorString = getErrorString(e);
 			appleErrorString && setError(appleErrorString);
 			setIsLoading(false);