I’m using a WebView in my Flutter app to allow users to create avatars via Ready Player Me. After the avatar is created, I save the avatar URL to Firestore. Once that’s done, I want to redirect the user back to my app (navigate to a specific screen).
Has anyone implemented something similar or have ideas on how to handle this redirect? Any suggestions or examples would be appreciated!
here is my firebase function
`
// Inject the currentUserUid into the JavaScript context
const currentUserUid = “${currentUserUid}”; // Ensure it’s passed as a string
const storeAvatarApi = “${storeAvatarApi}”;
const frame = document.getElementById('frame');
const loading = document.getElementById('loading');
function displayIframe() {
frame.src = `https://${subdomain}.readyplayer.me/avatar?frameApi=${token}`;
frame.hidden = false;
};
window.onload = displayIframe;
window.addEventListener('message', (event) => {
const json = parse(event);
if (json?.source !== 'readyplayerme') {
return;
}
// Subscribe to iframe events
if (json.eventName === 'v1.frame.ready') {
frame.contentWindow.postMessage(
JSON.stringify({
target: 'readyplayerme',
type: 'subscribe',
eventName: 'v1.**'
}),
'*'
);
}
// Capture avatar URL when the avatar is exported
if (json.eventName === 'v1.avatar.exported') {
const avatarUrl = json.data.url;
window.parent.postMessage({type: 'AVATAR_CREATED', url: avatarUrl}, '*');
console.log('Avatar URL:', avatarUrl, 'for user:', currentUserUid);
saveAvatarUrlToFirestore(currentUserUid, avatarUrl);
frame.hidden = true; // Hide iframe after avatar is exported
window.location.href = `https://app.flutterflow.io/avatarCreated?avatarUrl=${encodeURIComponent(avatarUrl)}`;
}
// Handle user set event (optional)
if (json.eventName === 'v1.user.set') {
console.log(`User with id ${json.data.id} set: ${JSON.stringify(json)}`);
}
});
// Helper function to parse postMessage events
function parse(event) {
try {
return JSON.parse(event.data);
} catch (error) {
return null;
}
}
// Function to save avatar URL to Firestore or Firebase
async function saveAvatarUrlToFirestore(currentUserUid, avatarUrl) {
const response = await fetch(storeAvatarApi, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ currentUserUid, avatarUrl }), // Ensure structured payload
});
if (response.ok) {
console.log('Avatar URL saved successfully.');
re
} else {
console.error('Error saving avatar URL:', response.statusText);
}
}
</script> `