If you have a marketing site served at mydomain.com and an app served at app.mydomain.com, you may use the same style of protection as our protected content feature with the snippets shared below.
Outseta Configuration
The Auth > Login settings > Post Login URL should be set to app.mydomain.com.
Marketing site
Make sure to configure the marketing site (mydomain.com) to use cookie
as the token storage method:
<script>
<!-- Outseta Script Options -->
var o_options = {
domain: '[your-domain].outseta.com',
tokenStorage: "cookie",
// ... your other options ... //
};
</script>
<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>
App site
The app site (app.mydomain.com) must also be configured to use cookie
as the token storage method before being able to protect the whole app from unauthorized visitors with the custom script.
<script>
<!-- Outseta Script Options -->
var o_options = {
domain: "<your domain>.outseta.com",
tokenStorage: "cookie",
// ... your other options ... //
};
</script>
<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>
<!-- Outseta Enhanced Content Protection -->
<noscript>
<meta http-equiv="refresh" content="0; url=mydomain.com" />
</noscript>
<!-- ✨ Custom Code Snippet Start ✨ -->
<style id="app-unautherized">
/* Hide everything to start */
body {
opacity: 0;
}
</style>
<script>
const unautherizedUrl = "https://mydomain.com";
Outseta.on("nocode.initialized", () => {
if (!Outseta.getAccessToken()) {
window.location.href = unautherizedUrl;
} else {
// Remove the unautherized style
const unautherizedStyle = document.getElementById("app-unautherized");
unautherizedStyle.remove();
}
});
</script>
Full demo on Code Sandbox
Marketing Code Sandbox
App Code Sandbox
The preview below will look the same as above because the protection works.