What does it do?

The Frontend Login for Website Users (felogin) extension is a general purpose extension for frontend logins. In addition to the actual login box, it includes several methods for redirecting after login/logout and includes forgot password functionality.

Screenshots

General Settings

Redirect Configuration

Hint

Be sure that in the overall Access tab under User Group Access rights the content element and even the page itself is not set to Hide at login, otherwise the redirect to the given page will not work.

Messages Tab

Installation with Composer

Check whether you are already using the extension with:

composer show | grep felogin

This should either give you no result or something similar to:

typo3/cms-felogin       v12.4.11

If it is not installed yet, use the composer require command to install the extension:

composer require typo3/cms-felogin

The given version depends on the version of the TYPO3 Core you are using.

Installation without Composer

In an installation without Composer, the extension is already shipped but might not be activated yet. Activate it as follows:

1. In the backend, navigate to the Admin Tools > Extensions module.
2. Click the Activate icon for the Frontend Login extension.

Next steps

Configure the Frontend Login.

Using the plugin

The felogin plugin is available through the Content Wizard as Login Form:

Choosing a user storage page for website users

In order for Website Users to be able to log in, the "Frontend login" plugin must know where the records are stored. There are two possibilities for setting this storage folder:

The site's integrator may have set a default value for the User Storage Page or using the Settings editor. If you use the default folder to store frontend users in your project there is nothing to do here.

If your project needs multiple storage folders for frontend users or if there is no default storage folder set, see Example: Override the default storage page in the plugin's FlexForm.

Access restrictions on the felogin plugin

A very common issue is, that the felogin plugin is set to Access: Hide at login. After the core has processed the login request, the page will be rendered without the felogin plugin. If there are redirect options active they will not be executed, simply because the felogin plugin is hidden.

Of course setting the felogin plugin to Hide at login and having redirect options together doesn't really makes sense.

Defined by Usergroup Record

Within a Website usergroup record, you can specify a page where usergroup members will be redirected after login.

Defined by User Record

This is identical to the redirection option for "defined by Usergroup Record" but applies to a single website user instead of an entire user group.

After Login (TS or Flexform)

This redirect page is set either in TypoScript ( plugin.tx_felogin_login.settings.redirectPageLogin) or in the FlexForm of the felogin plugin.

After Logout (TS or Flexform)

Defines the redirect page after a user has logged out. Again, it can be set in TypoScript or in the felogin plugin's FlexForm.

After Login Error (TS of Flexform)

Defines the redirect page after a login error occurs. Can be set in TypoScript or in the felogin plugin's FlexForm.

Defined by GET/POST Parameters

Redirect the visitor based on the GET/POST parameters redirect_url. If the TypoScript configuration config.typolinkLinkAccessRestrictedPages is set, the GET/POST parameter redirect_url is used.

Example url:

https://example.org/index.php?id=12&redirect_url=https%3A%2F%2Fexample%2Eorg%2Fdestiny%2F

Defined by Referrer

The referrer page is used for the redirect. This basically means that the user is sent back to the page he originally came from.

Defined by Domain entries

Same as Defined by Referrer, except that only the domains listed in plugin.tx_felogin_login.domains are allowed. If someone is sent to the login page coming from a domain which is not listed, the redirect will not happen.

By using the option Use First Supported Mode from Selection you can define several fallback methods.

Include the site set

Include the site set "Frontend Login" via the site set in the site configuration or the custom site package's site set.

This will change your site configuration file as follows:

  base: 'https://example.com/'
  rootPageId: 1
  dependencies:
+   - typo3/felogin
    - typo3/fluid-styled-content-css

If your site has a custom site package, you can also add the "Frontend Login" set as dependency in your site set's configuration:

 name: my-vendor/my-site-package
 label: My Site Package Set
 settings:
   website:
     background:
       color: '#386492'
 dependencies:
+  - typo3/felogin
   - typo3/fluid-styled-content-css

Settings for the "Frontend Login" site set

See also: Example: Set the user storage page using the site set settings.

If you plan to migrate from TypoScript setup settings to site settings see Migration from TypoScript setup settings to site settings.

These settings can be adjusted in the Settings editor.

Migration from TypoScript setup settings to site settings

The site settings are named like the TypoScript constants used before site sets. However the TypoScript constants are not always named the same like the TypoScript setup settings.

For each TypoScript setup / FlexForm setting we list the corresponding site set setting in the overview table of the configuration values.

For example, the setting felogin.pid sets setting pages.

Bear that in mind when migrating from TypoScript setup to site set settings.

Example: Set the user storage page using the site set settings

After you included the site set you can use the site set settings to configure the frontend login plugin's behaviour and layout site-wide.

See also Adding site settings.

You can add the settings to your Site settings or to the settings of your custom site package extension.

To add the settings to your site settings, edit the file config/sites/<my_site>/settings.yaml in Composer-based installations or typo3conf/sites/<my_site>/settings.yaml in legacy installations. If the file does not exist yet, create one. Use the setting felogin.pid to set the storage folder. If its subfolders should also be included, additionally use setting felogin.recursive.

felogin:
  pid: 42
  recursive: 255

TypoScript setup / FlexForm settings

Most of these plugin settings can be set with the following methods, the top bottom most taking precedence:

• The corresponding site set setting
• The corresponding TypoScript constant
• Value set in TypoScript setup in the scope plugin.tx_felogin_login.settings
• Setting from the FlexForm of the plugin

See also Example: Override the default storage page in the plugin's FlexForm.

Example: Set the default storage page via TypoScript constant

You can use the TypoScript provider or other means of setting the TypoScript constants.

styles.content.loginform {
  pid = 42
  recursive = 255
}

Example: Set the default storage page via TypoScript setup

In order to set the default storage page to a more dynamic value, use the TypoScript setup. Use the TypoScript provider or other means of ref:setting the TypoScript setup <t3tsref:using-and-setting>.

[{$tx_my_extension.settings.feature1Enabled} == 1]
  plugin.tx_felogin_login.settings.pid = 123
[ELSE]
  plugin.tx_felogin_login.settings.pid = 42
[END]

Example: Override the default storage page in the plugin's FlexForm

If you set any FlexForm setting within the content element representing the plugin to a non-empty value it will override any other setting not matter if it is made via site settings, TypoScript constant ot TypoScript setup. Empty values take no effect if a default was set by other means.

In the backend module Web > Page edit the content element containing the login form. Go to tab Plugin and sub tab General. You should see a form similar to the following:

Choose the desired page or pages in the field with label User Storage Page (key settings.pages).

noredirect

AfterUserLoggedInEvent

Trigger any kind of action when a frontend user has been successfully logged in. More details

BeforeRedirectEvent

Notification before a redirect is made. More details

LoginConfirmedEvent

A notification when a log in has successfully arrived at the plugin, via the view and the controller, multiple information can be overridden in event listeners. More details

LoginErrorOccurredEvent

A notification if something went wrong while trying to log in a user. More details

LogoutConfirmedEvent

A notification when a log out has successfully arrived at the plugin, via the view and the controller, multiple information can be overridden in event listeners. More details

ModifyLoginFormViewEvent

Allows to inject custom variables into the login form. More details

PasswordChangeEvent

Event that contains information about the password which was set, and is about to be stored in the database. More details

SendRecoveryEmailEvent

Event that contains the email to be sent to the user when they request a new password. More details

Send visitors to login page and redirect to original page

A common situation is that visitors who go to a page with access restrictions should go to a login page first and after logging in should be send back to the page they originally requested.

Assume we have a login page with id 2.

Using TypoScript we can still display links to access restricted pages and send visitors to the login page:

config {
    typolinkLinkAccessRestrictedPages = 2
    typolinkLinkAccessRestrictedPages_addParams = &return_url=###RETURN_URL###
}

On the login page the login form must be configured to redirect to the original page:

plugin.tx_felogin_login.settings.redirectMode = getpost

(This option can also be set in the flexform configuration of the felogin content element)

If visitors will directly enter the URL of an access restricted page they will be sent to the first page in the rootline to which they have access. Sending those direct visits to a login page is not a job of the felogin plugin, but requires a custom page-not-found handler. In this sense, we refer to Custom error handler implementation for 403 redirects.

Login link visible when not logged in and logout link visible when logged in

Again TypoScript will help you out. The page with the login form has id=2:

10 = TEXT
10 {
    value = Login
    typolink.parameter = 2
}
[frontend.user.isLoggedIn]
    10.value = Logout
    10.typolink.additionalParams = &logintype=logout
[end]

Of course there can be solutions with HMENU items, etc.

Custom error handler implementation for 403 redirects

This section explains how to utilize a custom error handler to catch 403 restricted page errors and allow to forward to a login form, and then redirect back to the originating page after successful login.

1. You need the following site settings in the error handling

   

   There you add the custom 403 error handler and configure the error handler, you create in the following steps.

   See also

   Error handling in site configuration

2. Look up the page ID where a login form (like with EXT:felogin) is placed

   This page ID is needed in the following step, so that the error handler will know, where to forward an unauthenticated user to, so that a login can be performed.

   Ideally, this should be done by configuring a page ID via the site settings, and referring back to a named ID. See PHP API: accessing site configuration for more information. For reduced complexity, this example uses a hard-coded page ID.

3. Create a new error handler RedirectLoginErrorHandler.php

   Create a PHP error handler class like the following in a custom extension, like your own sitepackage:

   EXT:my_sitepackage/Classes/Error/PageErrorHandler/RedirectLoginErrorHandler.php

   <?php
   
   declare(strict_types=1);
   
   /*
    * This file is part of the TYPO3 CMS project.
    *
    * It is free software; you can redistribute it and/or modify it under
    * the terms of the GNU General Public License, either version 2
    * of the License, or any later version.
    *
    * For the full copyright and license information, please read the
    * LICENSE.txt file that was distributed with this source code.
    *
    * The TYPO3 project - inspiring people to share!
    */
   
   namespace MyVendor\MySitePackage\Error\PageErrorHandler;
   
   use Psr\Http\Message\ResponseInterface;
   use Psr\Http\Message\ServerRequestInterface;
   use TYPO3\CMS\Core\Context\Context;
   use TYPO3\CMS\Core\Controller\ErrorPageController;
   use TYPO3\CMS\Core\Error\PageErrorHandler\PageErrorHandlerInterface;
   use TYPO3\CMS\Core\Http\HtmlResponse;
   use TYPO3\CMS\Core\Http\RedirectResponse;
   use TYPO3\CMS\Core\LinkHandling\LinkService;
   use TYPO3\CMS\Core\Site\Entity\Site;
   use TYPO3\CMS\Core\Utility\GeneralUtility;
   use TYPO3\CMS\Frontend\Page\PageAccessFailureReasons;
   
   /**
    * An error handler that redirects to a configured page, where the login
    * process is handled. Passes a configurable URL parameter (`return_url` or
    * `redirect_url`) to the target page.
    */
   final class RedirectLoginErrorHandler implements PageErrorHandlerInterface
   {
       private const PAGE_ID_LOGIN_FORM = 656;
   
       private readonly int $loginRedirectPid;
       private readonly string $loginRedirectParameter;
       private readonly Context $context;
       private readonly LinkService $linkService;
       private readonly ErrorPageController $errorPageController;
   
       public function __construct(private readonly int $statusCode)
       {
           $configuration = [
               // TODO: Replace with $siteSettings[...] or something else
               'loginRedirectTarget' => 't3://page?uid=' . self::PAGE_ID_LOGIN_FORM,
               'loginRedirectParameter' => 'return_url',
           ];
   
           $this->context = GeneralUtility::makeInstance(Context::class);
           $this->linkService = GeneralUtility::makeInstance(LinkService::class);
           $this->errorPageController = GeneralUtility::makeInstance(ErrorPageController::class);
   
           $urlParams = $this->linkService->resolve($configuration['loginRedirectTarget']);
           $this->loginRedirectPid = (int)($urlParams['pageuid'] ?? 0);
           $this->loginRedirectParameter = $configuration['loginRedirectParameter'];
       }
   
       public function handlePageError(
           ServerRequestInterface $request,
           string $message,
           array $reasons = []
       ): ResponseInterface {
           $this->checkHandlerConfiguration();
   
           if ($this->shouldHandleRequest($reasons)) {
               return $this->handleLoginRedirect($request);
           }
   
           // Show general error message with a 403 HTTP status code
           return $this->getGenericAccessDeniedResponse($message);
       }
   
       private function getGenericAccessDeniedResponse(string $reason): ResponseInterface
       {
           $reason = $reason ? ' Reason: ' . $reason : '';
           $content = $this->errorPageController->errorAction(
               'Page Not Found',
               sprintf('The page did not exist or was inaccessible.%s', $reason),
               0,
               $this->statusCode,
           );
           return new HtmlResponse($content, $this->statusCode);
       }
   
       private function handleLoginRedirect(ServerRequestInterface $request): ResponseInterface
       {
           if ($this->isLoggedIn()) {
               return $this->getGenericAccessDeniedResponse(
                   'The requested page was not accessible with the provided credentials'
               );
           }
   
           /** @var Site $site */
           $site = $request->getAttribute('site');
           $language = $request->getAttribute('language');
   
           $loginUrl = $site->getRouter()->generateUri(
               $this->loginRedirectPid,
               [
                   '_language' => $language,
                   $this->loginRedirectParameter => (string)$request->getUri(),
               ]
           );
   
           return new RedirectResponse($loginUrl);
       }
   
       private function shouldHandleRequest(array $reasons): bool
       {
           if (!isset($reasons['code'])) {
               return false;
           }
   
           $accessDeniedReasons = [
               PageAccessFailureReasons::ACCESS_DENIED_PAGE_NOT_RESOLVED,
               PageAccessFailureReasons::ACCESS_DENIED_SUBSECTION_NOT_RESOLVED,
           ];
           $isAccessDenied = in_array($reasons['code'], $accessDeniedReasons, true);
   
           return $isAccessDenied || $this->isSimulatedBackendGroup();
       }
   
       private function isLoggedIn(): bool
       {
           if ($this->context->getPropertyFromAspect('frontend.user', 'isLoggedIn')) {
               return true;
           }
           return $this->isSimulatedBackendGroup();
       }
   
       protected function isSimulatedBackendGroup(): bool
       {
           if (!$this->context->getPropertyFromAspect('backend.user', 'isLoggedIn')) {
               return false;
           }
           // look for special "any group"
           $groups = $this->context->getPropertyFromAspect('frontend.user', 'groupIds');
           return $groups[1] === -2;
       }
   
       private function checkHandlerConfiguration(): void
       {
           if ($this->loginRedirectPid === 0) {
               throw new \RuntimeException('No loginRedirectTarget configured for LoginRedirect errorhandler', 1700813537);
           }
   
           if ($this->statusCode !== 403) {
               throw new \RuntimeException(sprintf('Invalid HTTP status code %d for LoginRedirect errorhandler', $this->statusCode), 1700813545);
           }
       }
   }
   

   Copied!

   Adapt the constant PAGE_ID_LOGIN_FORM to match the page ID from the previous step. Since there is no proper way how to do it otherwise, we put in the page ID of the login form hard-coded into the file RedirectLoginErrorHandler.php and define a constant PAGE_ID_LOGIN_FORM for it. In the example above, this is set to 656.

   Hint

   This example code uses PHP 8.1 syntax. Depending on the PHP version you use in your project, you may need to adapt language features like readonly to match your used PHP version.

4. In your EXT:felogin plugin, make sure you selected "Defined by GET/POST Parameters" as first redirect mode

   

   You need to configure the login form that receives your redirect in a way, that allows to evaluate submitted URL parameters. In EXT:felogin, this is achieved via this Redirect Mode (which can also be set through TypoScript configuration, see redirectMode.

   Your login form will probably also need to define a specific target page for normal logins (independent from the error handler redirect), so you should also add a redirectMode like login to your list, and set a target page in redirectPageLogin.

5. Testing the custom error handler

   Clear the caches, for example via the backend module Admin Tools > Maintenance.

   Then open any access-restricted page in an incognito browser window to be sure that you are not logged in yet. Here we will use the example URL https://example.org/restricted/page.

   When everything is configured correctly and if you are not logged in yet, then you should be redirected to your login page like https://example.org/login (example page ID 656).

   After entering proper frontend user credentials, you should be redirected back to https://example.org/restricted/page, the page where you wanted to get to initially.

   Hint

   When you have multiple site configurations, be sure to access the correct one. This means where both the login form is located, and the custom error handler is configured for.

   Hint

   Do not copy the generated link from the address URL after you clicked View webpage from the backend, and then just paste it into the URL bar of the incognito window. The reason is that when being logged in to the backend, a possibly simulated frontend user login can affect your tests.

   Hint

   Do not get confused when the URL https://example.org/restricted/page will be forwarded to a URL like

   https://example.org/login?return_url=https%3A%2F%2Fexample.org%3A8443%2Frestricted%2Fpage&cHash=d0e92f9f9f7b3ca98a2e5e688ad22de9

   when you want to access the restricted page in the first place. These are the getpost redirect parameters that are evaluated by EXT:felogin. Now type in the user credentials of the already created frontend user and you should get redirected to the desired page https://example.org/restricted/page.

This example was taken from [FEATURE] Introduce ErrorHandler for 403 errors with redirect option which works in TYPO3 v11 and v12, and has been integrated to TYPO3 v13, where it can be used without a custom implementation.