GuillaumeHemmen/sso-poc-marn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

add sso

Browse source
This commit is contained in:
Guillaume "B.B." Van Hemmen 2024-05-14 13:43:07 +02:00
parent 97e93286f1
commit d95bfc99a6
Signed by: GuillaumeHemmen
GPG key ID: 7921E64524F7EB35
10 changed files with 300 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.gitignore vendored
View file

@ -33,3 +33,9 @@ yarn-error.*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
# The following patterns were generated by expo-cli
expo-env.d.ts
# @end expo-cli

59
app/(tabs)/_layout.tsx
View file

@ -1,59 +0,0 @@
import React from 'react';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Link, Tabs } from 'expo-router';
import { Pressable } from 'react-native';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';
import { useClientOnlyValue } from '@/components/useClientOnlyValue';
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
function TabBarIcon(props: {
name: React.ComponentProps<typeof FontAwesome>['name'];
color: string;
}) {
return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
}
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
// Disable the static render of the header on web
// to prevent a hydration error in React Navigation v6.
headerShown: useClientOnlyValue(false, true),
}}>
<Tabs.Screen
name="index"
options={{
title: 'Tab One',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
headerRight: () => (
<Link href="/modal" asChild>
<Pressable>
{({ pressed }) => (
<FontAwesome
name="info-circle"
size={25}
color={Colors[colorScheme ?? 'light'].text}
style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
/>
)}
</Pressable>
</Link>
),
}}
/>
<Tabs.Screen
name="two"
options={{
title: 'Tab Two',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
}}
/>
</Tabs>
);
}

31
app/(tabs)/index.tsx
View file

@ -1,31 +0,0 @@
import { StyleSheet } from 'react-native';
import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';
export default function TabOneScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>Tab One</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="app/(tabs)/index.tsx" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
});

31
app/(tabs)/two.tsx
View file

@ -1,31 +0,0 @@
import { StyleSheet } from 'react-native';
import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';
export default function TabTwoScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>Tab Two</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="app/(tabs)/two.tsx" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
});

83
app/_layout.tsx
View file

@ -1,58 +1,71 @@
import FontAwesome from '@expo/vector-icons/FontAwesome'; import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import {DarkTheme, DefaultTheme, ThemeProvider} from '@react-navigation/native';
import { useFonts } from 'expo-font'; import {useFonts} from 'expo-font';
import { Stack } from 'expo-router'; import {Stack} from 'expo-router';
import * as SplashScreen from 'expo-splash-screen'; import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react'; import {useEffect} from 'react';
import { useColorScheme } from '@/components/useColorScheme'; import {useColorScheme} from '@/components/useColorScheme';
import {View} from "react-native";
export { export {
// Catch any errors thrown by the Layout component. // Catch any errors thrown by the Layout component.
ErrorBoundary, ErrorBoundary,
} from 'expo-router'; } from 'expo-router';
export const unstable_settings = { export const unstable_settings = {
// Ensure that reloading on `/modal` keeps a back button present. // Ensure that reloading on `/modal` keeps a back button present.
initialRouteName: '(tabs)', initialRouteName: '(tabs)',
}; };
// Prevent the splash screen from auto-hiding before asset loading is complete. // Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
export default function RootLayout() { export default function RootLayout() {
const [loaded, error] = useFonts({ const [loaded, error] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
...FontAwesome.font, ...FontAwesome.font,
}); });
// Expo Router uses Error Boundaries to catch errors in the navigation tree. // Expo Router uses Error Boundaries to catch errors in the navigation tree.
useEffect(() => { useEffect(() => {
if (error) throw error; if (error) throw error;
}, [error]); }, [error]);
useEffect(() => { useEffect(() => {
if (loaded) { if (loaded) {
SplashScreen.hideAsync(); SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
} }
}, [loaded]);
if (!loaded) { return <RootLayoutNav/>;
return null;
}
return <RootLayoutNav />;
} }
function RootLayoutNav() { function RootLayoutNav() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
return ( return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <View style={{
<Stack> flex: 1,
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> justifyContent: 'center',
<Stack.Screen name="modal" options={{ presentation: 'modal' }} /> alignItems: 'center',
</Stack> }}>
</ThemeProvider> <View style={{
); flex: 1,
width: '100%',
}}>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="index" options={{headerShown: false}}/>
<Stack.Screen name="ssoCallback" options={{headerShown: false}}/>
<Stack.Screen name="ssoLogout" options={{headerShown: false}}/>
</Stack>
</ThemeProvider>
</View>
</View>
);
} }

193
app/index.tsx Normal file
View file

@ -0,0 +1,193 @@
import * as AuthSession from 'expo-auth-session';
import {TokenResponse} from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
import React, {useEffect, useState} from 'react';
import {Button, Text, View} from "react-native";
WebBrowser.maybeCompleteAuthSession();
// const redirectURI = AuthSession.makeRedirectUri({native: 'http://127.0.0.1:8082/ssoCallback', // TODO: why is it translated to localhost? Why /ssoCallback is missing?});
const redirectURI = 'https://poc-sso-marn.van-hemmen.com/ssoCallback';
console.log(redirectURI);
export default function indexScreen() {
const [tokenResponse, setTokenResponse] = useState<TokenResponse | null>(null);
// const discovery = AuthSession.useAutoDiscovery('https://fes509-integ.m-team.be/login/oauth2/realms/root/realms/509');
const discovery: AuthSession.DiscoveryDocument = {
tokenEndpoint: 'https://fes509-integ.m-team.be:443/login/oauth2/access_token',
revocationEndpoint: 'https://fes509-integ.m-team.be:443/login/oauth2/token/revoke',
endSessionEndpoint: 'https://fes509-integ.m-team.be:443/login/oauth2/connect/endSession',
authorizationEndpoint: 'https://fes509-integ.m-team.be:443/login/oauth2/authorize',
userInfoEndpoint: 'https://fes509-integ.m-team.be:443/login/oauth2/userinfo',
registrationEndpoint: 'https://fes509-integ.m-team.be:443/login/oauth2/register',
discoveryDocument: {
"request_parameter_supported": true,
"pushed_authorization_request_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/par",
"introspection_encryption_alg_values_supported": ["RSA-OAEP-256", "ECDH-ES+A256KW", "A128KW", "A192KW", "RSA-OAEP", "ECDH-ES+A192KW", "A256KW", "ECDH-ES", "ECDH-ES+A128KW", "dir"],
"claims_parameter_supported": false,
"introspection_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/introspect",
"issuer": "https://fes509-integ.m-team.be:443/login/oauth2",
"id_token_encryption_enc_values_supported": ["A256GCM", "A128GCM", "A256CBC-HS512", "A128CBC-HS256", "A192CBC-HS384", "A192GCM"],
"userinfo_encryption_enc_values_supported": ["A256GCM", "A128CBC-HS256", "A192CBC-HS384", "A192GCM", "A128GCM", "A256CBC-HS512"],
"authorization_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/authorize",
"authorization_encryption_alg_values_supported": ["ECDH-ES+A256KW", "ECDH-ES", "A256KW", "RSA-OAEP", "A128KW", "RSA-OAEP-256", "A192KW", "ECDH-ES+A192KW", "dir", "ECDH-ES+A128KW"],
"introspection_encryption_enc_values_supported": ["A128CBC-HS256", "A192CBC-HS384", "A256GCM", "A256CBC-HS512", "A128GCM", "A192GCM"],
"claims_supported": [],
"rcs_request_signing_alg_values_supported": ["RS512", "PS384", "PS256", "HS256", "HS384", "ES512", "RS256", "RS384", "HS512", "ES384", "ES256", "PS512"],
"token_endpoint_auth_methods_supported": ["client_secret_post", "private_key_jwt", "self_signed_tls_client_auth", "tls_client_auth", "none", "client_secret_basic"],
"tls_client_certificate_bound_access_tokens": true,
"response_modes_supported": ["query", "fragment.jwt", "form_post", "form_post.jwt", "jwt", "fragment", "query.jwt"],
"backchannel_logout_session_supported": true,
"token_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/access_token",
"response_types_supported": ["code token id_token", "code", "code id_token", "id_token", "code token", "token", "token id_token"],
"authorization_encryption_enc_values_supported": ["A192CBC-HS384", "A256CBC-HS512", "A128CBC-HS256", "A256GCM", "A192GCM", "A128GCM"],
"revocation_endpoint_auth_methods_supported": ["client_secret_post", "private_key_jwt", "self_signed_tls_client_auth", "tls_client_auth", "none", "client_secret_basic"],
"request_uri_parameter_supported": true,
"grant_types_supported": ["implicit", "urn:ietf:params:oauth:grant-type:saml2-bearer", "refresh_token", "password", "client_credentials", "urn:ietf:params:oauth:grant-type:device_code", "authorization_code", "urn:openid:params:grant-type:ciba", "urn:ietf:params:oauth:grant-type:uma-ticket", "urn:ietf:params:oauth:grant-type:token-exchange", "urn:ietf:params:oauth:grant-type:jwt-bearer"],
"version": "3.0",
"userinfo_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/userinfo",
"require_request_uri_registration": true,
"code_challenge_methods_supported": ["plain", "S256"],
"id_token_encryption_alg_values_supported": ["A128KW", "A192KW", "ECDH-ES+A256KW", "RSA-OAEP-256", "RSA-OAEP", "A256KW", "ECDH-ES+A128KW", "ECDH-ES+A192KW", "ECDH-ES", "dir"],
"authorization_signing_alg_values_supported": ["PS256", "ES256", "RS512", "ES384", "RS384", "HS256", "PS512", "ES512", "RS256", "HS384", "HS512", "PS384", "EdDSA"],
"request_object_signing_alg_values_supported": ["RS256", "ES512", "PS512", "RS384", "HS512", "ES256", "ES384", "HS256", "HS384", "PS384", "RS512", "PS256"],
"request_object_encryption_alg_values_supported": ["RSA-OAEP-256", "ECDH-ES", "ECDH-ES+A192KW", "ECDH-ES+A128KW", "A256KW", "RSA-OAEP", "dir", "A128KW", "ECDH-ES+A256KW", "A192KW"],
"rcs_response_signing_alg_values_supported": ["PS256", "ES384", "RS512", "ES256", "HS512", "PS384", "RS256", "ES512", "PS512", "HS384", "HS256", "RS384"],
"introspection_signing_alg_values_supported": ["ES384", "PS384", "ES256", "PS256", "PS512", "EdDSA", "HS512", "RS384", "RS256", "RS512", "HS256", "ES512", "HS384"],
"check_session_iframe": "https://fes509-integ.m-team.be:443/login/oauth2/connect/checkSession",
"scopes_supported": [],
"backchannel_logout_supported": true,
"acr_values_supported": ["itsmeAffiliation", "eid", "impersonate", "impersonateNew", "usernamePassword", "itsme", "fasCitizenLevel400", "biometric"],
"request_object_encryption_enc_values_supported": ["A128GCM", "A256GCM", "A192CBC-HS384", "A256CBC-HS512", "A128CBC-HS256", "A192GCM"],
"rcs_request_encryption_alg_values_supported": ["dir", "A192KW", "RSA-OAEP-256", "ECDH-ES+A256KW", "RSA-OAEP", "ECDH-ES", "A256KW", "A128KW", "ECDH-ES+A128KW", "ECDH-ES+A192KW"],
"userinfo_signing_alg_values_supported": ["ES256", "HS512", "ES512", "HS384", "RS256", "ES384", "HS256"],
"require_pushed_authorization_requests": false,
"rcs_response_encryption_enc_values_supported": ["A256CBC-HS512", "A192CBC-HS384", "A256GCM", "A128GCM", "A192GCM", "A128CBC-HS256"],
"userinfo_encryption_alg_values_supported": ["RSA-OAEP", "dir", "A256KW", "ECDH-ES+A256KW", "ECDH-ES", "RSA-OAEP-256", "A128KW", "ECDH-ES+A192KW", "A192KW", "ECDH-ES+A128KW"],
"end_session_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/connect/endSession",
"rcs_request_encryption_enc_values_supported": ["A256GCM", "A256CBC-HS512", "A192GCM", "A128CBC-HS256", "A128GCM", "A192CBC-HS384"],
"revocation_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/token/revoke",
"rcs_response_encryption_alg_values_supported": ["ECDH-ES+A256KW", "dir", "A256KW", "ECDH-ES+A192KW", "RSA-OAEP-256", "ECDH-ES", "ECDH-ES+A128KW", "A128KW", "A192KW", "RSA-OAEP"],
"token_endpoint_auth_signing_alg_values_supported": ["RS512", "RS384", "RS256", "ES512", "HS256", "HS384", "PS512", "ES384", "PS256", "ES256", "HS512", "PS384"],
"jwks_uri": "https://fes509-integ.m-team.be:443/login/oauth2/connect/jwk_uri",
"subject_types_supported": ["public", "pairwise"],
"id_token_signing_alg_values_supported": ["RS384", "RS256", "PS512", "ES512", "HS384", "HS256", "PS256", "ES256", "PS384", "ES384", "RS512", "HS512"],
"registration_endpoint": "https://fes509-integ.m-team.be:443/login/oauth2/register"
}
};
const [request, result, promptAsync] = AuthSession.useAuthRequest(
{
clientId: '509-marn-app',
redirectUri: redirectURI,
usePKCE: true,
},
discovery,
);
useEffect(() => {
console.log('result');
console.log(result);
}, [result]);
useEffect(() => {
console.log('request');
console.log(request);
request?.makeAuthUrlAsync(discovery!).then(value => console.log(value));
}, [request]);
useEffect(() => {
console.log('tokenResponse');
console.log(tokenResponse);
}, [tokenResponse]);
return (
<View>
<Text>HOME PAGE</Text>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Button title="login SSO!" onPress={() => promptAsync()}/>
<Button title="login SSO webtab!" onPress={() => WebBrowser.openBrowserAsync(request?.url)}/>
<Button
title="redeem token"
onPress={async () => {
if (result && result.type === 'success') {
const exCode = await AuthSession.exchangeCodeAsync(
{
clientId: '509-marn-app',
redirectUri: redirectURI,
code: result?.params?.code,
extraParams: {
code_verifier: request?.codeVerifier || '',
},
},
{tokenEndpoint: discovery!.tokenEndpoint?.replace(':443', '')},
);
setTokenResponse(exCode);
}
}}
/>
<Button
title="refresh token"
onPress={async () => {
if (tokenResponse) {
const exCode = await AuthSession.refreshAsync(
{
clientId: '509-marn-app',
refreshToken: tokenResponse.refreshToken,
},
{tokenEndpoint: discovery!.tokenEndpoint?.replace(':443', '')},
);
setTokenResponse(exCode);
}
}}
/>
<Button
title="delete tokens"
onPress={async () => {
if (tokenResponse) {
const exCode = await AuthSession.revokeAsync(
{
clientId: '509-marn-app',
token: tokenResponse.accessToken!,
},
{revocationEndpoint: discovery!.revocationEndpoint?.replace(':443', '')},
);
const exCode2 = await AuthSession.revokeAsync(
{
clientId: '509-marn-app',
token: tokenResponse.refreshToken!,
},
{revocationEndpoint: discovery!.revocationEndpoint?.replace(':443', '')},
);
setTokenResponse(null);
}
}}
/>
<Button
title="logout SSO?"
onPress={() => {
WebBrowser.openAuthSessionAsync(discovery!.endSessionEndpoint!, redirectURI);
// AuthSession.dismiss();
setTokenResponse(null);
}}
/>
{request && (
<View style={{backgroundColor: 'green'}}>
<Text>{JSON.stringify(request, null, 2)}</Text>
</View>
)}
{result && (
<View style={{backgroundColor: 'coral'}}>
<Text>{JSON.stringify(result, null, 2)}</Text>
</View>
)}
{tokenResponse && (
<View style={{backgroundColor: 'pink'}}>
<Text>{JSON.stringify(tokenResponse, null, 2)}</Text>
</View>
)}
</View>
</View>
)
}

9
app/ssoCallback.tsx Normal file
View file

@ -0,0 +1,9 @@
import {Text, View} from "react-native";
export default function ssoCallbackScreen() {
return (
<View>
<Text>ssoCallback</Text>
</View>
)
}

9
app/ssoLogout.tsx Normal file
View file

@ -0,0 +1,9 @@
import {Text, View} from "react-native";
export default function ssoLogoutScreen() {
return (
<View>
<Text>SSO logout</Text>
</View>
)
}

33
package-lock.json generated
View file

@ -11,6 +11,7 @@
"@expo/vector-icons": "^14.0.0", "@expo/vector-icons": "^14.0.0",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"expo": "~50.0.17", "expo": "~50.0.17",
"expo-auth-session": "~5.4.0",
"expo-font": "~11.10.3", "expo-font": "~11.10.3",
"expo-linking": "~6.2.2", "expo-linking": "~6.2.2",
"expo-router": "~3.4.10", "expo-router": "~3.4.10",
@ -9760,6 +9761,14 @@
"expo": "bin/cli" "expo": "bin/cli"
} }
}, },
"node_modules/expo-application": {
"version": "5.8.4",
"resolved": "https://registry.npmjs.org/expo-application/-/expo-application-5.8.4.tgz",
"integrity": "sha512-mH0gSlFzMuiT20TkZnBppzUtdF6TFHwcaTRnvkSZanN9iTOeEEfQQ60hHT4lBizHjFWRs/QYZVtXGvkQ/cyMpg==",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-asset": { "node_modules/expo-asset": {
"version": "9.0.2", "version": "9.0.2",
"resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-9.0.2.tgz", "resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-9.0.2.tgz",
@ -9773,6 +9782,19 @@
"md5-file": "^3.2.3" "md5-file": "^3.2.3"
} }
}, },
"node_modules/expo-auth-session": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/expo-auth-session/-/expo-auth-session-5.4.0.tgz",
"integrity": "sha512-ZwjPMsMgCqdMi+vnhDbtjOAF12Y9+y1bYvorn/jQs47aFg6yeIRHycSOM/WL4hpFr+fAxycP3mIJeHVYfF3zuQ==",
"dependencies": {
"expo-application": "~5.8.0",
"expo-constants": "~15.4.0",
"expo-crypto": "~12.8.0",
"expo-linking": "~6.2.0",
"expo-web-browser": "~12.8.0",
"invariant": "^2.2.4"
}
},
"node_modules/expo-constants": { "node_modules/expo-constants": {
"version": "15.4.6", "version": "15.4.6",
"resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-15.4.6.tgz", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-15.4.6.tgz",
@ -9784,6 +9806,17 @@
"expo": "*" "expo": "*"
} }
}, },
"node_modules/expo-crypto": {
"version": "12.8.1",
"resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-12.8.1.tgz",
"integrity": "sha512-EJEzmfBUSkGfALTlZRKUbh1RMKF7mWI12vkhO2w6bhGO4bjgGB8XzUHgLfrvSjphDFMx/lwaR6bAQDmXKO9UkQ==",
"dependencies": {
"base64-js": "^1.3.0"
},
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-file-system": { "node_modules/expo-file-system": {
"version": "16.0.9", "version": "16.0.9",
"resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-16.0.9.tgz", "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-16.0.9.tgz",

3
package.json
View file

@ -28,7 +28,8 @@
"react-native": "0.73.6", "react-native": "0.73.6",
"react-native-safe-area-context": "4.8.2", "react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0", "react-native-screens": "~3.29.0",
"react-native-web": "~0.19.6" "react-native-web": "~0.19.6",
"expo-auth-session": "~5.4.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",