Managing the paywall with a pop-up login

Integrating an effective paywall is essential for websites offering premium content. The goal is to provide a seamless user experience: after logging in via a pop-up, the article is immediately unlocked, without a page reload and without any security flaws. Discover two approaches to achieve this, starting with a simple JavaScript method and then exploring solutions tailored to React environments.

Unlocking content in JavaScript

When a user lands on a premium article, they are prompted to log in via a pop-up. The challenge is to unlock the article immediately upon login validation. Using only access.destroy() to remove the paywall hides the interface, but the article remains blocked (for security reasons). The optimal solution relies on a context change that adapts the access rules based on the login state.

Implementation steps

Interception of the Login Event
- As soon as the user submits their login via the pop-up, the event is captured on your side to trigger the unlocking process.
Safe Reloading of the Paywall
- Clean removal of the paywall: Use access.destroy() to reset the current instance.
- Paywall reset: Reinitialize the paywall with initAccess().
Use of a Specific Context
- Switch to a context configured in the Dashboard (for example, context_connected), which automatically unlocks the article.
- An invisible unlocking widget (or, optionally, an interactive widget) ensures a smooth transition without any further action from the user.

The user remains unaware of this change. This is a short-term solution. When the user refreshes the page or navigates elsewhere, you may choose to redirect them to a more appropriate context.

This approach specifically circumvents security measures by dynamically adapting the context rather than simply removing the paywall, thereby ensuring an immediate, secure unlocking without a page reload.

For more details, find a complete code example in a sandbox: Link.

Managing the Paywall in React

For applications developed in React, two approaches are available:

Approach 1: Simple mechanism for unlocking content

Before Login:
The article displays protected content, such as a preview (e.g., the beginning of the article).
Upon Clicking 'Login':
As soon as the user validates their login via the pop-up, the event is captured on your side to trigger the unlocking process and update the state to reflect that the user is logged in.
Content Refresh:
Once the application recognizes that the user is logged in, the article is reloaded to immediately display the complete, unrestricted content. This change occurs instantly to provide a seamless transition.

Code Example

import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import {
useAccess,
Paywall,
RestrictedContent,
Pixel,
} from '@poool/react-access';

export default () => {
const accessRef = useRef();
const paywallRef = useRef();

const { config: baseConfig } = useAccess();
const [connected, setConnected] = useState(false);
const [config, setConfig] = useState({});

useEffect(() => {
accessRef.current?.recreate();
}, [config]);

const init = () => {
setConfig({
...baseConfig,
...config,
});

if (connected) {
accessRef.current?.destroy();
}
};

const onLoginClick = async () => {
setConnected(true);
init();
};

return (
<div className="page premium">
<button onClick={onLoginClick}>Login</button>
<div className="container">
<h1>Premium post</h1>
<p>Preview content premium for users connected.</p>
{!connected ? (
<>
<RestrictedContent ref={paywallRef}>
<p>Texte protégé</p>
</RestrictedContent>
<Paywall
ref={accessRef}
contentRef={paywallRef}
events={{ onLoginClick }}
config={config}
/>
</>
) : (
<p>My content</p>
)}
</div>
<Pixel type="page-view" data={{ type: 'premium' }} />
</div>
);
};

Note that, in some cases and depending on your blocking method, the content may be present in the page's source code.

Approach 2: Context Management and Dynamic Switching

This approach adopts the same logic as the JavaScript version for unlocking premium content. Rather than removing the paywall, the access context is dynamically changed as soon as the user logs in, switching to a 'context_connected' state defined in the Dashboard.

How does it work?

Login Interception:
As soon as the user validates their login via the pop-up, the event is captured on your side to trigger the unlocking process and update the state to recognize that the user is logged in.
Context Switching:
The access context is modified, immediately allowing the full content to be displayed without a page reload. This approach, identical to the JavaScript version, complies with security rules while offering a seamless transition.
Optimal User Experience:
An unlocking widget (invisible or interactive) ensures that the transition is smooth and unnoticeable to the user, thereby providing secure and personalized navigation.

This method combines security, customization, and smoothness while offering an elegant solution for instant access to premium content after login.

Code Example

import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import {
useAccess,
Paywall,
RestrictedContent,
Pixel,
} from '@poool/react-access';

export default () => {
const accessRef = useRef();
const paywallRef = useRef();

const { config: baseConfig } = useAccess();
const [connected, setConnected] = useState(false);
const [config, setConfig] = useState({});

useEffect(() => {
accessRef.current?.recreate();
}, [config]);

const init = () => {
setConfig({
...baseConfig,
...config,
context: connected ? 'context_connected' : '',
});

if (connected) {
accessRef?.current?.destroy();
}
};

const onLoginClick = async () => {
setConnected(true);
init();
};

return (
<div className="page premium">
<button onClick={() => onLoginClick()}>Login</button>
<div className="container">
<h1>Premium post</h1>
<p>This is a premium post (with a paywall), it
contains exactly 10 paragraphs of lorem ipsum
</p>
<>
<RestrictedContent ref={paywallRef}>
<p>My content</p>
</RestrictedContent>
<Paywall
ref={accessRef}
contentRef={paywallRef}
events={{ onLoginClick }}
config={config}
/>
</>
</div>
<Pixel type="page-view" data={{ type: 'premium' }} />
</div>
);
};

Choosing between these two React approaches mainly depends on the specific requirements of your project:

Approach 1:
Opt for this method if you're looking for a simple and quick solution to implement.

Approach 2:
Choose this option for more fine-grained access rights management and advanced customization, thanks to dynamic context switching.

For more details, find a complete code example on GitHub: Link.

General Conclusion

Whether you use classic JavaScript or React, the key to a smooth and secure unlock lies in adapting the paywall context rather than simply removing it. Thanks to widgets (invisible or interactive) in pre-configured contexts in the Poool Dashboard, the user benefits from immediate access to premium content upon login.

If you have any questions or suggestions, please feel free to contact us!