Get Started with Gatey – AWS Cognito Setup Guide

Get Started with Gatey – AWS Cognito Setup Guide

Get Started with Gatey

From plugin install to first secure login—your 10-minute setup path.

🔧 Set Up Gatey and Add the Login Flow to Your Site

This tutorial walks you through using the Gatey admin panel, adding authentication blocks in the Gutenberg editor, and configuring a login page.

Step 1: Install the Gatey Plugin

You can install Gatey in two ways:

  1. From WordPress Plugin Directory
    Install Gatey from your WordPress Dashboard by searching “Gatey” under Plugins → Add New and clicking Install Now.
  2. Manual Installation
    Download the plugin ZIP file here:
    Download gatey.zip
    Then in your WordPress Dashboard:
    Go to Plugins → Add New → Upload Plugin, select the ZIP file, and click Install Now, then Activate.

Step 2: Build Your Sign-In Page with the Authenticator Block

  1. Create the page: In the WordPress Dashboard go to Pages → Add New, set the title to Sign In, and keep the suggested slug /sign-in (or choose your own).
  2. Insert the block: In the block inserter open the WPSuite · Gatey section and drag the Authenticator block onto the canvas.
  3. Pick the initial screen: In the right-hand sidebar choose where the Authenticator should start (Sign In, Sign Up, Edit Account, …).
  4. Style it: Select a variation (Default or Modal), colour mode, and alignment options.
  5. Save the page and preview it.
Gutenberg editor interface showing the Authenticator sign-in form (email, password, sign-in button) embedded on a page with block panel visible.
Design your login page using the Gatey Authenticator block

Step 3: Build an Edit Profile Page

  1. Create the page: Go to Pages → Add New, set the title to Edit Profile and keep the slug /edit-profile (or choose your own).
  2. First row – email address: Insert a WPSuite · Gatey → Account Attribute block. In its inspector set Attribute to email. Style it as a
    heading if you wish.
  3. Second row – MFA status: Add a two‑column Row (or Group) and type the following two paragraphs:
    You have enabled Two‑Factor Authentication (2FA)
    You have not enabled Two‑Factor Authentication (2FA)
    Give the first  paragraph the CSS class mfa-enabled and the second mfa-disabled. Paste the CSS below into
    WordPress Dashboard → Settings → Editor Plus → Advanced → Global CSS:
    .mfa-enabled  { display: var(--gatey-in-editor, var(--gatey-account-mfa-enabled, none)); }
.mfa-disabled { display: var(--gatey-in-editor, var(--gatey-account-mfa-not-enabled, none)); }
  4. Third row – quick actions: Add another Row. Drop three Authenticator blocks into the Row and set:
    • Authenticator 1: screen = editAccount, check Show Open Button.
    • Authenticator 2: screen = changePassword, check Show Open Button.
    • Authenticator 3: screen = setupTotp, check Show Open Button.

    Switch to the Modal variation for each Authenticator block.

  5. Save the page. A live preview will work after you finish the next steps—setting Cognito User Pool attributes and enabling the WordPress integration.
WordPress Gutenberg editor showing an “Edit Profile” page that uses Gatey Account Attribute and Authenticator blocks.
The profile page displays the user’s e-mail, a two-factor-authentication status message, and three Gatey Authenticator buttons for editing the account, changing the password, and setting up TOTP—all arranged in three separate rows.

Step 4: Open the Gatey Admin Panel

Go to WordPress Dashboard → Gatey → Settings. This is where you’ll connect your Cognito User Pool and control plugin behavior.

WordPress admin dashboard showing the Gatey “Settings” page with User Pool ID, App Client ID and Region fields.
Configure your AWS Cognito User Pool, App Client ID and region in the Gatey settings.

Step 5: Set Your Sign-In Page in Gatey

Go to WordPress Dashboard → Gatey → Settings → General, choose the WordPress page you created as the “Sign In Page”.

This ensures unauthenticated users are redirected to the correct login flow.

WordPress Admin “Gatey → Settings → General” tab showing options for Login Mechanisms, reCAPTCHA key, Sign In Page dropdown set to “Sign In,” and Default Redirect after sign-out.
In Gatey’s General settings, choose your custom Sign In page and adjust login routing.

Step 6: Optionally Enable WordPress Login Integration

To fully replace the native WordPress login screen (/wp-login.php), go to WordPress Dashboard  → Gatey → Settings → WordPress Login.

  1. Enable the “Integrate WordPress Login” option.
    This allows users who log in with Amazon Cognito to gain access to the WordPress backend (if their role allows).
    The plugin automatically redirects the default WordPress login flow to the Cognito‑based screen you’ve configured.

  2. Don’t lock yourself out!
    Before you enable the option, create a Cognito group that maps to the WordPress “Administrator” role, and add your own Cognito user to that group in the AWS Console.
    Then, in the Cognito Group to WordPress Role Mapping table on this screen, map that group to Administrator.
    This guarantees that you will still be able to reach the WordPress Dashboard after the native login page has been replaced.

  3. Once activated, your Cognito‑based login fully replaces /wp-login.php — including admin access and any login‑required redirects.

  4. When WordPress Login Integration is enabled, you can assign WordPress roles to users based on their Cognito groups. Scroll to the Cognito Group to WordPress Role Mapping section:

    • Enter the exact name of each Cognito group (case‑sensitive).

    • Select the corresponding WordPress role from the dropdown list.

    • Users automatically receive the mapped role upon their next login.

If a user doesn’t match any mapped group, they receive the default role (or no access to the WordPress backend), depending on your configuration.

WordPress Admin “Gatey → Settings → WordPress Login” screen showing the “Integrate WordPress Login” checkbox checked, a cookie expiration field, and the “Cognito Group to WordPress Role Mapping” section with Cognito groups (“admin,” “registered,” “editor”) mapped to WordPress roles via dropdowns.
Assign WordPress roles to users based on their AWS Cognito groups

Step 7 – Show the Logged-In User & Add a Sign-Out Link

If you’ve chosen not to enable WordPress Login Integration, visitors still need a visible “I’m logged in / log out” option.

Instead of editing a single menu item, we’ll show and hide two separate header rows—one for guests, one for signed-in users—using the CSS variables that Gatey exposes.

1 Open the Header template part

Appearance → Editor → Patterns → Header

2 Duplicate the navigation row

  • Select the existing Row that holds your main menu.
  • Duplicate it.
    • Original Row → add class not-authenticated
    • Copy → add class authenticated

3 Edit the authenticated Row

Keep every original menu item (e.g. Sample Page) except Sign In.
Replace Sign In with three blocks:

What to add How to configure
Paragraph block Text: “Hey,”
Account Attribute block Block settings → Attribute: First Name
Paragraph block (link) Text: Sign Out → turn into link → URL: javascript:Gatey.cognito.signOut() → add link class for styling
(The separate Account Attribute block renders the user’s first name, while the surrounding Paragraph keeps typography consistent.)

4 Save the template part

WordPress Site Editor showing the Header template part with the Gatey “Account Attribute” block selected in the List View and the block settings sidebar listing attributes (Email, Phone Number, Name, First Name).
Display the current user’s attribute (e.g., first name) and a sign-out link in your theme header

5 Add (or keep) the CSS

Theme type Where to add it
Block themes (e.g. Twenty Twenty-Five) Appearance → Themes → Customize (your active theme) → Styles → Additional CSS – direct link resembles:/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fcss
Classic / child themes Appearance → Customize → Additional CSS  or add to style.css 
				
					/* Toggle header rows */
.authenticated {
  display: var(--gatey-in-editor,
                var(--gatey-account-authenticated, none)) !important;
}
.not-authenticated {
  display: var(--gatey-in-editor,
                var(--gatey-account-not-authenticated, none)) !important;
}

/* Typographic tweaks */
.link a { text-decoration: none; }
WordPress Full Site Editor “Styles → CSS” panel showing Additional CSS code for Gatey account visibility classes (.authenticated, .not-authenticated and account-attribute font-size).
Add or tweak custom CSS for Gatey blocks and account attribute

Visitors now see “Hey, John  Sign Out” once they’re logged in, and the classic Sign In link when they’re not—without relying on /wp-login.php.

Front-end view of a WordPress site navigation that displays “Hey, John” with a “Sign Out” link for authenticated users, and shows a “Sign In” link when not logged in.
Dynamic nav: greet logged-in users by name with a Sign Out link, or show Sign In when not authenticated

🔄 Plugin Behavior and Fallbacks

When the plugin is active and a new user registers through Cognito, Gatey:

  • Creates the user in the Cognito User Pool
  • Also inserts the user into the WordPress database with the correct role (if WordPress is available)

This ensures WordPress-based features like dashboards or custom plugins still function.

Note: In headless setups (where WordPress is not running at registration time), local user sync will not occur — only Cognito will have the user record.

Gatey does not store passwords in WordPress. However, users can always reset their password later via Cognito if needed (or WordPress if Gatey is deactivated).

✅ You’re Done!

You now have a working Cognito login flow inside your WordPress site — visually integrated, and fully managed via Gatey.