Here we'll explore adding memberships to your Softr application to allow user registration and restricting content for different users.
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.
See below a quick video tutorial or continue reading for a detailed breakdown of each step.
Memberships video tutorial
In this article, we'll go through the process of setting up user accounts on the Startup Academy 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
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 do the same for the Signin block, which is available under AddBlock => 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.
Sign Up 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 Sign in 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 SignUp 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 SignUp buttons on the header, but we need to customize it 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 Sign In/Sign Up 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.
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 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.
"Start Learning" block
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 animation, you can see how the user registers and is able to access the "Courses" page from Home.
Registering and accessing courses
There is a separate Data 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.