commit: handle SpidL2 and SpidL3 for both uat and prod

example/src/App.tsx

@@ -6,6 +6,7 @@ import { HomeScreen } from './screen/HomeScreen';
 import { NativeModule } from './screen/NativeModuleScreen';
 import { NativeView } from './screen/NativeViewScreen';
 import { WebViewLogin } from './screen/WebViewLoginScreen';
+import { WebViewLoginConfig } from './screen/WebViewLoginConfigScreen';
 
 export default function App() {
   return (
@@ -19,6 +20,10 @@ export default function App() {
         <Stack.Screen name="NativeModule" component={NativeModule} />
         <Stack.Screen name="NativeView" component={NativeView} />
         <Stack.Screen name="WebViewLogin" component={WebViewLogin} />
+        <Stack.Screen
+          name="WebViewLoginConfig"
+          component={WebViewLoginConfig}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

example/src/common/style/index.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    marginHorizontal: 16,
+  },
+  switchContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginVertical: 8,
+  },
+  title: {
+    textAlign: 'center',
+    marginVertical: 8,
+    fontWeight: 'bold',
+    fontSize: 14,
+  },
+  separator: {
+    marginVertical: 8,
+    borderBottomColor: '#737373',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});

example/src/navigation/index.ts

@@ -1,10 +1,12 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import type { WebViewLoginNavigationProps } from '../screen/WebViewLoginScreen';
 
 export type NavigatorStackParamList = {
   Home: undefined;
   NativeModule: undefined;
   NativeView: undefined;
-  WebViewLogin: undefined;
+  WebViewLoginConfig: undefined;
+  WebViewLogin: WebViewLoginNavigationProps;
 };
 
 export const Stack = createNativeStackNavigator<NavigatorStackParamList>();

example/src/screen/HomeScreen.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { Button, SafeAreaView, Text, View } from 'react-native';
 import type { NavigatorStackParamList } from '../navigation';
+import { styles } from '../common/style';
 
 type HomeScreenNavigationProp = NativeStackNavigationProp<
   NavigatorStackParamList,
@@ -41,26 +42,9 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
           title="Test CieId Login"
           // nice fluo color
           color="#00ee66"
-          onPress={() => navigation.navigate('WebViewLogin')}
+          onPress={() => navigation.navigate('WebViewLoginConfig')}
         />
       </View>
     </SafeAreaView>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    marginHorizontal: 16,
-  },
-  title: {
-    textAlign: 'center',
-    marginVertical: 8,
-  },
-  separator: {
-    marginVertical: 8,
-    borderBottomColor: '#737373',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-});

example/src/screen/NativeModuleScreen.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
 
-import {
-  Alert,
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Alert, Button, SafeAreaView, Text, View } from 'react-native';
 import { isCieIdAvailable, openCieIdApp } from '@pagopa/io-react-native-cieid';
+import { styles } from '../common/style';
 
 export const NativeModule = () => (
   <SafeAreaView style={styles.container}>
@@ -86,20 +80,3 @@ export const NativeModule = () => (
     </View>
   </SafeAreaView>
 );
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    marginHorizontal: 16,
-  },
-  title: {
-    textAlign: 'center',
-    marginVertical: 8,
-  },
-  separator: {
-    marginVertical: 8,
-    borderBottomColor: '#737373',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-});

example/src/screen/WebViewLoginConfigScreen.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { Button, SafeAreaView, Switch, Text, View } from 'react-native';
+import type { NavigatorStackParamList } from '../navigation';
+import { styles } from '../common/style';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+type HomeScreenNavigationProp = NativeStackNavigationProp<
+  NavigatorStackParamList,
+  'Home'
+>;
+type HomeScreenProps = {
+  navigation: HomeScreenNavigationProp;
+};
+
+export const WebViewLoginConfig: React.FC<HomeScreenProps> = () => {
+  const [isSpidLevel3Enabled, setIsSpidLevel3Enabled] = React.useState(false);
+  const toggleSpidLevel3Switch = () =>
+    setIsSpidLevel3Enabled((previousState) => !previousState);
+  const [isUatEnabled, setIsUatEnabled] = React.useState(false);
+  const toggleUatSwitch = () =>
+    setIsUatEnabled((previousState) => !previousState);
+
+  const navigation =
+    useNavigation<
+      NativeStackNavigationProp<NavigatorStackParamList, 'WebViewLoginConfig'>
+    >();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.switchContainer}>
+        <Text style={styles.title}>SPID Level 3 (default is 2)</Text>
+        <Switch
+          value={isSpidLevel3Enabled}
+          onValueChange={toggleSpidLevel3Switch}
+        />
+      </View>
+      <View style={styles.separator} />
+      <View style={styles.switchContainer}>
+        <Text style={styles.title}>
+          Set UAT environment (default is production)
+        </Text>
+        <Switch value={isUatEnabled} onValueChange={toggleUatSwitch} />
+      </View>
+      <View style={styles.separator} />
+      <View>
+        <Text style={styles.title}>Test CieId production login</Text>
+        <Button
+          title="Test CieId Login"
+          // nice fluo color
+          color="#00ee66"
+          onPress={() =>
+            navigation.navigate({
+              name: 'WebViewLogin',
+              params: {
+                spidLevel: isSpidLevel3Enabled ? 'SpidL3' : 'SpidL2',
+                isUat: isUatEnabled,
+              },
+            })
+          }
+        />
+      </View>
+    </SafeAreaView>
+  );
+};

example/src/screen/WebViewLoginScreen.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react';
 
 import { openCieIdApp } from '@pagopa/io-react-native-cieid';
-import {
-  Alert,
-  Linking,
-  Platform,
-  SafeAreaView,
-  StyleSheet,
-} from 'react-native';
+import { Alert, Linking, Platform, SafeAreaView } from 'react-native';
 import WebView, { type WebViewNavigation } from 'react-native-webview';
 import type { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
-import { useNavigation } from '@react-navigation/native';
+import {
+  type RouteProp,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
+import { styles } from '../common/style';
+import type { NavigatorStackParamList } from '../navigation';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+type SpidLevel = 'SpidL2' | 'SpidL3';
+
+export type WebViewLoginNavigationProps = {
+  spidLevel: SpidLevel;
+  isUat: boolean;
+};
 
 const iOSUserAgent =
   'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1';
@@ -21,8 +29,9 @@ const defaultUserAgent = Platform.select({
 
 const originSchemasWhiteList = ['https://*', 'iologin://*'];
 
+// Set servie provider URL as pattern string for entityID=xx_servizicie and authLevel=SpidL2
 const serviceProviderUrl =
-  'https://app-backend.io.italia.it/login?entityID=xx_servizicie&authLevel=SpidL2';
+  'https://app-backend.io.italia.it/login?entityID={ID}&authLevel={SPID_LEVEL}';
 
 export const WebViewLogin = () => {
   React.useEffect(() => {
@@ -48,7 +57,17 @@ export const WebViewLogin = () => {
     null
   );
 
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<
+      NativeStackNavigationProp<NavigatorStackParamList, 'WebViewLogin'>
+    >();
+
+  const route = useRoute<RouteProp<NavigatorStackParamList, 'WebViewLogin'>>();
+  const { spidLevel, isUat } = route.params;
+  console.log('<-- ^^ --> spidLevel: ', spidLevel, 'isUat: ', isUat);
+  const filledServiceProviderUrl = serviceProviderUrl
+    .replace('{SPID_LEVEL}', spidLevel)
+    .replace('{ID}', isUat ? 'xx_servizicie_coll' : 'xx_servizicie');
 
   const handleOnShouldStartLoadWithRequest = (
     event: WebViewNavigation
@@ -74,7 +93,12 @@ export const WebViewLogin = () => {
       return false;
     }
 
-    if (url.indexOf('livello2') >= 0 && url.indexOf('livello2mobile') === -1) {
+    if (
+      url.indexOf('livello1') >= 0 || // SpidL1
+      (url.indexOf('livello2') >= 0 && url.indexOf('livello2mobile') === -1) || // SpidL2
+      url.indexOf('nextUrl') >= 0 || // SpidL3 iOS
+      url.indexOf('openApp') >= 0 // SpidL3 Android
+    ) {
       console.log('SPID L2 URL found: ', url, url.indexOf('livello2'));
       if (Platform.OS === 'ios') {
         const urlForCieId = `CIEID://${url}&sourceApp=iologincie`;
@@ -87,15 +111,19 @@ export const WebViewLogin = () => {
           navigation.goBack();
         });
       } else {
-        openCieIdApp(url, (result) => {
-          if (result.id === 'ERROR') {
-            console.error('^--^ -->', JSON.stringify(result, null, 2));
-            navigation.goBack();
-          } else {
-            console.log('^--^ -->', result.id, result.url);
-            setAuthenticatedUrl(result.url);
-          }
-        });
+        openCieIdApp(
+          url,
+          (result) => {
+            if (result.id === 'ERROR') {
+              console.error('^--^ -->', JSON.stringify(result, null, 2));
+              navigation.goBack();
+            } else {
+              console.log('^--^ -->', result.id, result.url);
+              setAuthenticatedUrl(result.url);
+            }
+          },
+          isUat
+        );
       }
       return false;
     }
@@ -112,17 +140,9 @@ export const WebViewLogin = () => {
         originWhitelist={originSchemasWhiteList}
         onShouldStartLoadWithRequest={handleOnShouldStartLoadWithRequest}
         source={
-          { uri: authenticatedUrl ?? serviceProviderUrl } as WebViewSource
+          { uri: authenticatedUrl ?? filledServiceProviderUrl } as WebViewSource
         }
       />
     </SafeAreaView>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    marginHorizontal: 16,
-  },
-});