LKN Forms – Login and Register

Description

LKN Forms – Login and Register adds a single Gutenberg block that places a login and/or registration form on any page. Choose what to show (login, register, or both), style it from the block sidebar and publish — no shortcode, no settings screen.

The forms use the native WordPress authentication, so the plugin is fully self-contained: it works on its own, without requiring any other plugin.

Features

• One block with four modes: Login and register, Login only, Register only, or Lost password.
• Login and register side by side on wide screens, stacking automatically on narrow ones.
• Appearance controls per block: primary color, card and input backgrounds, text color and corner radius.
• Editable texts: headings, subheadings, field labels, button labels, “remember me” and “lost password” links.
• Password strength meter on the registration form, rated by WordPress’ own meter (the same one used on wp-login.php); the Register button stays disabled until the password reaches a medium strength.
• Optional per-form privacy note, with a [privacy_policy] placeholder that links to the site’s privacy policy page (Settings > Privacy). Off by default, one toggle per form.
• Optional redirect URL after logging in (empty by default: the visitor stays on the page).
• Optional redirect URL after logging out (empty by default: the visitor stays on the page).
• Login, registration and lost-password submissions happen in-page: wrong credentials, unknown accounts and validation errors are shown inline on the block, without jumping to wp-login.php. After a reset e-mail is requested, the “get new password” button locks for 30 seconds (with a countdown) so it can’t be triggered repeatedly.
• The password reset is completed inside the block too: the reset e-mail links back to the page hosting the block, which then shows a “set a new password” form (new password + confirmation, same strength meter and privacy note as the registration form). The link is checked when the page opens, so an already-used or expired link shows a clear message instead of the form.
• Going back to the page (browser back/forward) does not bring back a stale, half-submitted state: filled fields and a submit button stuck in “loading” are cleared.
• Optional “return to the previous page”: after logging in or registering, the visitor goes back to the last page they were on (e.g. the product they came from) instead of a fixed URL.
• Configurable “lost password” link URL (defaults to WordPress’ own lost-password page), so it can point to a page using the Lost password block.
• Logged-in visitors who open the page see a configurable message (and a log-out link) instead of the forms; when a “Redirect after login” URL is set, they are sent there instead (with a brief loading spinner, so the forms never flash).
• No settings screen and no data stored outside the block: every instance is independent and portable.

Tutorial: login, registration and account pages

This step-by-step sets up a complete login flow with three pages (a login/registration page, a lost-password page and a “my account” page). Replace the example URLs (https://example.com/...) with your own.

1. Create the pages

Under Pages > Add New, create three pages with clear slugs, for example:

• /login/ — the login and registration page.
• /lost-password/ — the password reset page.
• /my-account/ — the page a logged-in visitor sees instead of the forms.

2. Login / registration page (/login/)

Add the “Login and Register Form” block and, in the block sidebar, set:

• Show: Login and register.
• Redirect after login (optional URL): your home page, e.g. https://example.com/ — where the visitor lands after a successful login or registration.
• Lost password link (URL): the address of your lost-password page, e.g. https://example.com/lost-password/ — this is where the “Lost your password?” link on the login form points.
• Redirect after logout (optional URL): your home page, e.g. https://example.com/ (optional).

Optional: turn on “Return to the previous page” if you would rather send the visitor back to the last page they were on (e.g. the product they came from) instead of the fixed URL. When it is on, the “Redirect after login” field is ignored.

3. Lost-password page (/lost-password/)

Add the block again and set:

• Show: Lost password.
• Redirect after login (optional URL): your home page, e.g. https://example.com/ — if a logged-in visitor opens this page, they are sent home.
• Redirect after logout (optional URL): your home page (optional).

How it works: the visitor enters their e-mail and clicks “Get new password”. The button then locks for 30 seconds (with a countdown) so the same request cannot be fired again and again. A reset e-mail is sent, and its link brings the visitor back to this page, where a “set a new password” form (new password + confirmation) appears. After saving, they are logged in and sent to the “Redirect after login” destination. An already-used or expired link shows a clear message instead of the form.

4. My account page (/my-account/)

Add the block one more time and set:

• Show: Login and register (the same as the login page).
• Redirect after login (optional URL): this page’s own URL, e.g. https://example.com/my-account/. This way, a logged-in visitor stays here and sees the “You are logged in as …” message with a log-out button, instead of being bounced to the home page; a logged-out visitor sees the login and register forms.
• Redirect after logout (optional URL): your home page, e.g. https://example.com/ — so logging out from this page returns the visitor to the home page.

Summary

• Login page → Show “Login and register”; Redirect after login = Home; Lost password link = the lost-password page; Redirect after logout = Home.
• Lost-password page → Show “Lost password”; Redirect after login = Home; Redirect after logout = Home.
• My account page → Show “Login and register”; Redirect after login = the page itself; Redirect after logout = Home.

Notes

• Any URL field left empty uses the plugin default. An empty “Redirect after login/logout” keeps the visitor on the same page.
• To allow new visitors to register, enable “Anyone can register” in Settings > General.
• Every block is independent, so you can repeat this pattern on as many pages as you like (e.g. one login block per landing page).

Technical Details

Block

• Block name: lknform/login-register (static block, rendered in JavaScript).
• No custom database tables and no options written by the plugin; everything lives in the block attributes.
• Login, registration and lost-password post to the plugin’s own REST routes (lknform/v1/login, lknform/v1/register, lknform/v1/lost-password) when JavaScript is available, so the result is handled on the page (native wp-login.php is the no-JavaScript fallback); no assets run outside the block on the front end.
• The password reset e-mail links back to the block’s page (with the reset key), where the “set a new password” form (new password + confirmation, lknform/v1/reset-password) applies it with WordPress’ own check_password_reset_key() / reset_password(). The block checks the key on load (lknform/v1/reset-password/check), so a used/expired link shows a clear message instead of the form; the core wp-login.php link is kept when the request did not come from the block.

Hooks

• registration_errors — the registration endpoint runs this core filter, so anti-spam/captcha plugins validate the block’s registration; the submission is sent as form data so plugins reading $_POST (e.g. a honeypot) work as expected.
• lknform_account_url — filter. The default destination used after login/logout. Empty by default (WordPress has no front-end account page); a site or plugin can provide one.
• lknform_create_user — filter. Lets a site or plugin create the account itself and return its user ID; return null to create a plain WordPress user.

Source Code

The unminified, human-readable source of the compiled files shipped in build/ is included in the plugin itself, in the src/ folder.

The build/ assets (index.js, view.js, style-index.css) are generated from src/ with @wordpress/scripts. To regenerate them, from the plugin folder run npm install and then npm run build.

The only bundled dependencies are the WordPress packages (@wordpress/blocks, @wordpress/block-editor, @wordpress/components, @wordpress/element, @wordpress/i18n, @wordpress/api-fetch), pulled in by @wordpress/scripts; no other third-party libraries are bundled.