@trycourier/courier-react-native
Version:
Inbox, Push Notifications, and Preferences for React Native
225 lines (224 loc) • 8.77 kB
JavaScript
import Courier from "@trycourier/courier-react-native";
import React, { useEffect, useRef, useState } from "react";
import { ActivityIndicator, Button, Modal, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import Env from "../Env";
import { ExampleServer } from "../Utils";
import { usePoke } from '../Poke';
const Auth = () => {
const [isLoading, setIsLoading] = useState(false);
const [userId, setUserId] = useState();
const [tenantId, setTenantId] = useState();
useEffect(() => {
const initAuth = async () => {
const authListener = await Courier.shared.addAuthenticationListener({
onUserChanged: async (userId) => {
setUserId(userId);
setTenantId(await Courier.shared.getTenantId());
console.log(`User changed: ${userId}`);
console.log(`Tenant changed: ${await Courier.shared.getTenantId()}`);
}
});
const userId = await Courier.shared.getUserId();
const tenantId = await Courier.shared.getTenantId();
console.log(`Initial user: ${userId}`);
console.log(`Initial tenant: ${tenantId}`);
refreshJWT(userId, tenantId);
return authListener;
};
let listener;
initAuth().then(result => {
listener = result;
});
return () => {
if (listener) {
listener.remove();
}
};
}, []);
async function refreshJWT(userId, tenantId) {
console.log('Refreshing JWT');
if (!userId) {
console.log(`No user found`);
setIsLoading(false);
return;
}
setIsLoading(true);
try {
console.log(`User ID: ${userId}`);
await Courier.shared.signOut();
const token = await ExampleServer.generateJwt({
authKey: Env.authKey,
userId: userId,
});
console.log(`New token: ${token}`);
await Courier.shared.signIn({
accessToken: token,
userId: userId,
tenantId: tenantId,
});
}
catch (e) {
console.error(e);
}
setIsLoading(false);
}
async function signIn(userId, tenantId) {
console.log('Signing User In');
console.log(`User ID: ${userId}`);
console.log(`Tenant ID: ${tenantId}`);
setIsLoading(true);
try {
const token = await ExampleServer.generateJwt({
authKey: Env.authKey,
userId: userId,
});
console.log(`New token: ${token}`);
await Courier.shared.signIn({
accessToken: token,
userId: userId,
tenantId: tenantId.length ? tenantId : undefined
});
setUserId(await Courier.shared.getUserId());
setTenantId(await Courier.shared.getTenantId());
}
catch (e) {
console.error(e);
}
setIsLoading(false);
}
async function signOut() {
await Courier.shared.signOut();
setUserId(await Courier.shared.getUserId());
setTenantId(await Courier.shared.getTenantId());
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
marginBottom: 10,
fontFamily: Platform.select({
ios: 'Courier',
android: 'monospace',
default: 'monospace',
}),
fontSize: 16,
},
});
const AuthButton = (props) => {
const [modalVisible, setModalVisible] = useState(false);
const [userId, setUserId] = useState('');
const [tenantId, setTenantId] = useState('');
const inputRef = useRef(null);
const styles = StyleSheet.create({
button: {
backgroundColor: 'lightgray',
padding: 10,
borderRadius: 5,
},
buttonText: {
fontSize: 16,
fontFamily: Platform.select({
ios: 'Courier',
android: 'monospace',
default: 'monospace',
}),
},
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalContent: {
backgroundColor: 'white',
padding: 20,
borderRadius: 5,
elevation: 5,
minWidth: 300,
},
input: {
borderWidth: 1,
borderColor: 'gray',
borderRadius: 5,
padding: 10,
marginBottom: 10,
},
});
useEffect(() => {
if (modalVisible) {
inputRef.current.focus();
}
}, [modalVisible]);
const handleButtonPress = async () => {
if (await Courier.shared.getUserId()) {
await signOut();
}
else {
setModalVisible(true);
}
};
const handleModalClose = () => {
setModalVisible(false);
};
const handleUserIdInputChange = (text) => {
setUserId(text);
};
const handleTenantIdInputChange = (text) => {
setTenantId(text);
};
const handleSaveButtonPress = () => {
signIn(userId, tenantId);
setModalVisible(false);
};
return (React.createElement(React.Fragment, null,
React.createElement(Modal, { visible: modalVisible, animationType: "slide", transparent: true },
React.createElement(View, { style: styles.modalContainer },
React.createElement(View, { style: styles.modalContent },
React.createElement(Text, null, "Set Courier User Id:"),
React.createElement(TextInput, { ref: inputRef, style: styles.input, value: userId, autoCapitalize: "none", autoCorrect: false, onChangeText: handleUserIdInputChange }),
React.createElement(Text, null, "Set Tenant Id:"),
React.createElement(TextInput, { style: styles.input, value: tenantId, autoCapitalize: "none", autoCorrect: false, onChangeText: handleTenantIdInputChange }),
React.createElement(Button, { title: "Sign In", onPress: handleSaveButtonPress }),
React.createElement(Button, { title: "Cancel", onPress: handleModalClose })))),
React.createElement(TouchableOpacity, { style: styles.button, onPress: handleButtonPress },
React.createElement(Text, { style: styles.buttonText }, props.buttonText))));
};
const ToggleTouchesButton = () => {
const styles = StyleSheet.create({
button: {
backgroundColor: 'lightgray',
padding: 10,
borderRadius: 5,
marginTop: 10, // Add some space between buttons
},
buttonText: {
fontSize: 16,
fontFamily: Platform.select({
ios: 'Courier',
android: 'monospace',
default: 'monospace',
}),
},
});
const [enabled, setEnabledState] = useState(false);
const { setEnabled } = usePoke();
const handleToggle = () => {
const newEnabled = !enabled;
setEnabledState(newEnabled);
setEnabled(newEnabled);
};
return (React.createElement(TouchableOpacity, { style: styles.button, onPress: handleToggle },
React.createElement(Text, { style: styles.buttonText }, enabled ? 'Hide Touches' : 'Show Touches')));
};
return (React.createElement(View, { style: styles.container },
isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
!isLoading && (React.createElement(React.Fragment, null,
userId && React.createElement(Text, { style: styles.text }, userId),
tenantId && React.createElement(Text, { style: styles.text }, tenantId),
React.createElement(AuthButton, { buttonText: userId ? 'Sign Out' : 'Sign In' }),
React.createElement(ToggleTouchesButton, null)))));
};
export default Auth;