The goal: once you login on one site, you are logged in on all
- We should have only one login page at lux.services/login, all login buttons should link to that one.
- Using cross domain communication set session cookies on all lux domains after user logs in successfully
<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Frame</title>
</head>
<body>
<h1>Parent Frame</h1>
<iframe id="childFrame" src="https://child.example.com"></iframe>
<script>
// Simulate obtaining the JWT token
const jwtToken = "sample_jwt_token";
// Send the JWT token to the child frame
window.addEventListener('load', function() {
const childFrame = document.getElementById('childFrame');
childFrame.contentWindow.postMessage(jwtToken, 'https://child.example.com');
});
</script>
</body>
</html><!-- child.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Frame</title>
</head>
<body>
<h1>Child Frame</h1>
<script>
// Listen for messages from the parent frame
window.addEventListener('message', function(event) {
// Check if the message is from a trusted origin
if (event.origin === 'https://parent.example.com') {
// Set the JWT token received from the parent frame
const jwtToken = event.data;
localStorage.setItem('token', jwtToken);
console.log("JWT token set:", jwtToken);
} else {
console.warn("Received message from untrusted origin:", event.origin);
}
});
</script>
</body>
</html>import { getAuth, signInWithCustomToken } from "firebase/auth";
const auth = getAuth();
signInWithCustomToken(auth, token)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ...
});
The goal: once you login on one site, you are logged in on all