diff --git a/example/src/App.tsx b/example/src/App.tsx
index db2741d..9aac885 100644
--- a/example/src/App.tsx
+++ b/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() {
+
);
diff --git a/example/src/common/style/index.ts b/example/src/common/style/index.ts
new file mode 100644
index 0000000..0ae8d01
--- /dev/null
+++ b/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,
+ },
+});
diff --git a/example/src/navigation/index.ts b/example/src/navigation/index.ts
index 0467465..cccffab 100644
--- a/example/src/navigation/index.ts
+++ b/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();
diff --git a/example/src/screen/HomeScreen.tsx b/example/src/screen/HomeScreen.tsx
index 70b7540..afd7059 100644
--- a/example/src/screen/HomeScreen.tsx
+++ b/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 = ({ navigation }) => {
title="Test CieId Login"
// nice fluo color
color="#00ee66"
- onPress={() => navigation.navigate('WebViewLogin')}
+ onPress={() => navigation.navigate('WebViewLoginConfig')}
/>
);
};
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- marginHorizontal: 16,
- },
- title: {
- textAlign: 'center',
- marginVertical: 8,
- },
- separator: {
- marginVertical: 8,
- borderBottomColor: '#737373',
- borderBottomWidth: StyleSheet.hairlineWidth,
- },
-});
diff --git a/example/src/screen/NativeModuleScreen.tsx b/example/src/screen/NativeModuleScreen.tsx
index aac6ff2..9cbc039 100644
--- a/example/src/screen/NativeModuleScreen.tsx
+++ b/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 = () => (
@@ -86,20 +80,3 @@ export const NativeModule = () => (
);
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- marginHorizontal: 16,
- },
- title: {
- textAlign: 'center',
- marginVertical: 8,
- },
- separator: {
- marginVertical: 8,
- borderBottomColor: '#737373',
- borderBottomWidth: StyleSheet.hairlineWidth,
- },
-});
diff --git a/example/src/screen/WebViewLoginConfigScreen.tsx b/example/src/screen/WebViewLoginConfigScreen.tsx
new file mode 100644
index 0000000..3edd8a3
--- /dev/null
+++ b/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 = () => {
+ 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
+ >();
+
+ return (
+
+
+ SPID Level 3 (default is 2)
+
+
+
+
+
+ Set UAT environment (default is production)
+
+
+
+
+
+ Test CieId production login
+
+
+ );
+};
diff --git a/example/src/screen/WebViewLoginScreen.tsx b/example/src/screen/WebViewLoginScreen.tsx
index e52a3bb..3b8e290 100644
--- a/example/src/screen/WebViewLoginScreen.tsx
+++ b/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
+ >();
+
+ const route = useRoute>();
+ 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
}
/>
);
};
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- marginHorizontal: 16,
- },
-});