How to Create a Membership Site?

With the memberships feature you can allow your users to create and manage their profiles as well as define what part of the application is going to be accessible to which users. Using this functionality, you can build online communities with membership, client portals, create gated directories, paid courses, and so on.

In this guide, we'll go through the process of setting up user accounts on the E-Learning Website template for online courses, making the courses available for registered users only. Moreover, in the subsections to this article, we'll examine each User Accounts building block in greater detail. So, let's start.

In the Startup Academy template, the online courses are made available on the Home page. We are going to create a separate "Courses" page for them in order to make the page available for logged in users only.

The list of courses is created using the List block. You can get familiar with the block and how it;s configured here.

To start with the user registration process, we first need to set up a signup page. The Signup block is available under Add Block => Dynamic => User Accounts => Sign up form. So, let's create a new page and add the Signup block there, and let's also create another page for the Signin block, which is available under Add Block => Dynamic =>User Accounts => Sign in Form.

Each block's configuration options are discussed in detail in their respective articles (links provided above), so we won't go into that here. For our purpose, we have just changed the logo on the forms, as shown in the screenshots above, and we also need to check the Sign In and Sign Up button configurations.

On the Signup form, the Sign up button has a predefined action, as shown below. So, we don't need to do anything here. The same is true for the Sign In button on the Signin form.

However, as you saw, there's also a Sign In button on the Signup form, which we need to link to the Signin Page we have created.

Similarly, on the Signin form, we should link the Sign Up button to the Signup Page. Thus, we've set up all the pages we need. Now let's configure the Header and what different users see and have access to on the web app.

First, let's add Sign In and Sign Up buttons to the application header and link them to their corresponding pages, as shown below.

So, we now have Sign In and Sign Up buttons on the header, but we need to customize them so that they are not visible to logged-in users. To do that, we need to create a duplicate header block and remove the buttons from it, as shown below.

And on the duplicate header without the buttons, we'll enable the Show User Profile option, which adds a profile dropdown to the header.

As you can see, by default, the dropdown only contains a Sign Out action, however it's possible to add more links, choosing one of the standard actions that are available. It's also possible to customize the Icon of each Link.

Now that we've configured the two headers, let's see how we can set up the visibility of each one, so that only logged in users see the header with User Profile.

To define visibility for a certain block, we need to navigate to the Visibility tab in block settings as shown below.

So for the first header with Sign In/Sign Up buttons, we are going to set the visibility to Non Logged in users.

For the second header with User Profile, we are going to set it to Logged in users.

As soon as you've set the visibility for a specific block, you can notice the padlock icon appear on the block, which means that it's a gated content available for the defined users only.

This way you can define the visibility of any block on your Softr app. Let's go ahead and also configure the visibility of the Courses page, which we intend to make accessible for the logged-in users only.

In order to customize page-level visibility, we need to navigate to Page Settings => Visibility. For the Courses page, we need to set the Visibility to Logged in users, as shown below, and save the Page Settings.

Let's also create another block on the Home Page with a "Start Learning" button (using the CTA block). Using this block, users will be able to navigate to the "Courses" page from Home. This block's visibility should also be set to Logged in users. See below.

So, we are all set. Now let's do some test registration to make sure everything works as expected.

Now that everything is ready, let's actually sign up on the site to see how the registration and content visibility are working. In the following GIF, you can see how the user registers and is able to access the "Courses" page from Home.

There is a separate Users section, where you can view all the registered users as well as remove or add new user. You can find a detailed overview of this section here.

To sum up, we reviewed the overall process of setting up User Accounts on your Softr application and configuring the visibility of different blocks and pages. In the User Accounts Blocks subsection, we'll examine the Signup and Signin blocks in greater detail as well as will check out the rest of the blocks we didn't use here.