HubSpot CMS: Implementing the "Login Check & Redirect Module" for Secure Page Access

Demo Video

Detail

When managing exclusive content, such as member-only resources or webinar materials, manually restricting access to specific users can be a hassle. By placing the Login Check Module on your page, you can automatically verify if a user is logged in. If they are not, the module will instantly redirect them to a designated authentication or registration page.

1. Objectives

The primary objective of this module is to automate content protection and optimize the user experience.

Prevent Unauthorized Access: Systematically verifies the existence of contact information to block unregistered users from viewing restricted pages.
Seamless Authentication Guidance: Automatically redirects unauthenticated users, guiding them directly to the necessary login or registration process without confusion.
No-Code URL Management: Redirect destinations can be easily updated within the HubSpot editor, allowing for flexible operation across multiple restricted pages.

2. Use Cases

Member-Only Resource Downloads: Create pages accessible only to users who have already submitted a form, redirecting newcomers back to the registration landing page.
Exclusive Webinar Attendee Pages: Grant access to viewing pages only for users whose registration is confirmed in the HubSpot database.
Secure Portal/Dashboard Entry: Even if a user enters the URL directly, they are forcibly redirected to the login screen if they are not authenticated.

3. Implementation Steps

This guide covers everything from the setup in the Design Manager to managing the module within the page editor.

Step 1: Applying Code in the Design Manager

To enable the advanced verification logic, perform the following:

Create a new module within the Design Manager.
Copy and paste the provided source code into the HTML/HubL section and publish it. This integrates the logic to determine has_contact (the presence of a verified contact).

Step 2: Page Creation and Module Placement

Create a new page from the HubSpot "Content" menu. Search for the module in the left sidebar of the editor and drag and drop it at the top of your page.

Step 3: Configuring Redirects and Messages

Use the sidebar panel in the page editor to define the module's behavior:

Redirect URL: Specify the destination URL (e.g., a login page or registration LP) for users who are not logged in.
Success Message: Enter the greeting or instructional text to be displayed only to authenticated users.

Module Source Code

Create a "New Module" in the HubSpot Design Manager and paste the following code into each respective section.

1. fields.json

This is the field definition. It consists of a repeater field (Items) and style setting fields (Styles).

[
 {
  "default": {
   "content_id": null,
   "href": "",
   "type": "EXTERNAL"
  },
  "display_width": null,
  "id": "9b439ed7-146f-9c8e-5b57-c264daba12ca",
  "label": "redirect_url",
  "locked": false,
  "name": "redirect_url",
  "required": false,
  "supported_types": [
   "EXTERNAL",
   "FILE",
   "CONTENT",
   "BLOG",
   "CALL_TO_ACTION",
   "PAYMENT",
   "EMAIL_ADDRESS",
   "PHONE_NUMBER",
   "WHATSAPP_NUMBER"
  ],
  "type": "url"
 },
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "cccffad9-3274-a676-1d0f-23f8154bd351",
  "label": "message",
  "locked": false,
  "name": "message",
  "required": false,
  "type": "text"
 }
]

Source Code

HTML

{% if not has_contact and not is_in_editor %}
<!-- より厳密な検証を行う包括的な実装 -->
{% set contact_verified = false %}
{% set contact_data = {} %}

<!-- Step 1: 基本的なコンタクト存在確認 -->
{% if contact and contact.email and contact.email != "" %}
    {% set contact_verified = true %}
    {% set contact_data = contact %}
{% endif %}

<!-- Step 2: request_contactでの補完確認 -->
{% if not contact_verified and request_contact.contact_id %}
    {% set contact_verified = true %}
    {% set contact_data = request_contact %}
{% endif %}

<!-- Step 3: 結果に基づく処理 -->
{% if contact_verified %}
    <!-- コンタクト検知成功 - ツール表示 -->
    <div class="member-area">
        <p>{{ module.message }}</p>
    </div>
{% else %}
    <!-- コンタクト未検知 - リダイレクト処理 -->
    {% set redirect_url = module.redirect_url.href|default('https://www.hirose.com/corporate/ja/') %}
    
    <div class="redirect-notice">
        <p>Redirecting to authentication...</p>
    </div>
    <script>
        // 即座にリダイレクト
        setTimeout(function() {
            window.location.href = '{{ redirect_url }}';
        }, 1000);
    </script>
{% endif %}
{% endif %}

CSS

Javascript

FAQ

Will I be redirected while I am working in the page editor?

No. The code includes a check for is_in_editor, ensuring that administrators are not redirected while editing the page.

Can I change the delay time before the redirect occurs?

Yes. By adjusting the millisecond value in the setTimeout function within the code, you can freely control how long the system waits before redirecting the user.

What do authenticated users see?

Users who are confirmed as logged in will not be redirected. Instead, the area will display the "Success Message" you configured in the editor.

Search

Search more

Related Template

Need Customization?

We can customize this sample to match your specific business requirements.

Book Free Consultation

Got a quick dev request?

Put it on Trello!Need a fix for HubSpot, CMS, or GAS? Post it on Trello.

Development Requests Here