LKN Forms – Login and Register

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). 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).

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.

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.