Advanced Log-In & Sign-Up Flow ❺

Redirect users anywhere you want, after login

LOCALIZATION - If you are using Webflow's new localization features, there may be impacts with this library. Most notably, selecting an alternate locale, and then logging in likely will not detect and preserve that alternate locale. Let us know in the forum if you encounter any conflicts, we'd like to see sites operating with this configuration.

UPDATE Jan-2023 - Webflow has enhanced the Login Redirect Fallback setting on login forms. See the update video below for details.

Overview

The sign-up and log-in flow in Memberships BETA currently has a couple of limitations.

As of Jan-2023, you can;

Perform a directed login, which redirects to the originally requested resource after login.
Redirect an undirected login to any static page on your site, including utility pages like the User Accounts page.

There are a few things you might want to do that you cannot do natively yet;

Redirect an undirected login to a Collection Item page.
Redirect an undirected login to a page, including query string params.
Handle a user's first login after sign-up specially, by redirecting them to a New User page.

Directed login. Occurs when a user attempts to access a gated page, and is not logged in. The login page is presented, and then after a successful login, the user is directed to the originally requested page. Undirected login. Refers to a direct login, where the user clicked the login button. After the login is completed, the user can be sent to a pre-determined page, by default the home page of the website. First login. Refers to the first successful login that a user performs after sign-up.

Demonstration

Important Update

Jan-2023 - Webflow has enhanced the Login Redirect Fallback feature.

Usage Notes

This library is not attributes based, but rather has routing configuration options in its setup.

There are currently two configuration options;

routeAfterLogin - specifies an optional path to redirect users after an explicit login.
- Recognizes a special path of ., which means, return to the current page.
routeAfterFirstLogin - specifies an optional path for the first time a user logs in.

Getting Started ( LOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Add your Configuration Callback

Add this script right after the library in your site-wide before HEAD custom code.

<!-- Sygnal Attributes 5 | Memberships | Config -->
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipRoutingConfig', 
  (config) => {
    config.routeAfterFirstLogin = '/u/new';
    config.routeAfterLogin = '/u/home';
    return config;
  }]); 
</script>

Configure the routing options to paths you prefer. In the example above, we've used /u/new and /u/home. Replace these with the URLs you want. If you do not want a special first-login route, you can remove that line.

These paths can be to secured pages (which require login), or un-secured. If they are to secured pages, make certain they are accessible to all users who login- this means auto-assigning an access group to newly registered users.

See notes above.

Last updated 1 year ago