Advanced Log-In & Sign-Up Flow ❺

Redirect users anywhere you want, after login

BETA - While Memberships is in BETA, this library will track that BETA status.
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
Memberships Login & Routing - Webflow
Memberships Login & Routing
Demonstration & cloneable
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.
​

BETA testing

Next - sa5-memberships

Conditional Element Display ❺

Last modified 1mo ago