BTW, Here is an example of an Auth flow for Expo React Native
This does not deal with Token refresh
import { useCallback, useEffect } from 'react';
import * as WebBrowser from 'expo-web-browser';
import { exchangeCodeAsync, makeRedirectUri, useAuthRequest } from 'expo-auth-session';
import { Button, Linking, StyleSheet } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import React from 'react';
import { setFoundryToken } from '@/constants/AsyncStorage';
import { CLIENT_ID, FOUNDRY_URL } from '@/Foundry/osdkConst';
import { useNavigation } from '@react-navigation/native';
WebBrowser.maybeCompleteAuthSession();
const token = EXPO_PUBLIC_FOUNDRY_TOKEN;
// Endpoint
const discovery = {
authorizationEndpoint: `${FOUNDRY_URL}/multipass/api/oauth2/authorize`,
tokenEndpoint: `${FOUNDRY_URL}/multipass/api/oauth2/token`,
};
export const Login: React.FC = ({ navigation : any}) => {
const navigation = useNavigation();
const [request, response, promptAsync] = useAuthRequest(
{
clientId: CLIENT_ID,
scopes: ["api:read-data", "api:write-data", "api:admin-read"],
redirectUri: makeRedirectUri({
path: '/auth/callback',
}),
usePKCE: true,
},
discovery
);
useEffect(() => {
promptAsync().then((codeResponse) => {
if (codeResponse.type !== 'success') {
return;
}
exchangeCodeAsync(
{
clientId: CLIENT_ID,
code: codeResponse.params.code,
redirectUri: makeRedirectUri({ path: '/auth/callback' }),
extraParams: request?.codeVerifier
? {
code_verifier: request.codeVerifier
} : undefined,
},
discovery
).then( async (tokenResponse) => {
//console.log("tokenResponse", tokenResponse);
await setFoundryToken(tokenResponse.accessToken).then(() => {
navigation.navigate("Home");
});
});
}
);
} , [promptAsync, navigation, request]);
return (
<ThemedView style={styles.loginContainer}>
<ThemedView style={styles.loginControls}>
<Button
title="Login"
onPress={onLogin} />
<ThemedText type={'subtitle'} style={styles.loginSubTitle}>Powered by Palantir</ThemedText>
</ThemedView>
</ThemedView>
);
}
const styles = StyleSheet.create({
loginContainer: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
gap: 10,
padding: 10,
width: "100%",
height: "100%",
backgroundColor: "white",
},
loginControls: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "50%",
alignSelf: "center",
},
loginSubTitle: {
display: "flex",
padding: 10,
alignSelf: "center",
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});