Skip to main content
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.

​
Making a Separate Page for Courses

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.
Separate page for courses created
The Courses page with the list of courses
The list of courses is created using the List block. You can get familiar with the block and how it;s configured here.

​
Adding Signup and Signin Pages

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.
Signup form
Signin 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.
Signup button action on Signup 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.
Linking Signin button to Signin page
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.

​
Adding Buttons to the Header

First, let’s add Sign In and Sign Up buttons to the application header and link them to their corresponding pages, as shown below.
Buttons added inside the Header block
Buttons link to their corresponding pages

​
Customizing Button Visibility on the Header

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.
Duplicate header without signin/signup buttons
And on the duplicate header without the buttons, we’ll enable the Show User Profile option, which adds a profile dropdown to the header.
Enabling "Show User Profile”
Profile dropdown added 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.
Link Icon and Action List
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.

​
Configuring Header Visibility

To define visibility for a certain block, we need to navigate to the Visibility tab in block settings as shown below.
Visibility tab
So for the first header with Sign In/Sign Up buttons, we are going to set the visibility to Non Logged in users.
First header visibility
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.
Padlock icon on gated content
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.

​
Configuring Courses Page Visibility

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.
“Courses” page visibility

​
”Start Learning” Block

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.
Notion image
So, we are all set. Now let’s do some test registration to make sure everything works as expected.

​
Registering a User

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.
Registering and accessing courses

​
Users Tab

There is a separate Userssection, 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.

​
Conclusion

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.