# 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.&#x20;

## Introduction

In this article, we'll go through the process of setting up user accounts on the [Startup Academy template](https://startup-academy.softr.io/) 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.&#x20;

![Separate Page for Courses Created](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FiyTUSL81cjlbqacVpdIb%2Fcourse-page-b.png?alt=media\&token=ed56ec11-7f82-4baf-b3e6-672cecd2f4e6)

![The Courses Page with the list of courses](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FwSnnot5Ky1O0Q8URqO4U%2Fcourses-b.png?alt=media\&token=33a01119-0496-4920-b9f3-397539eaceb8)

### Adding Signup and Signin Pages

To start with the user registration process, we first need to set up a signup page. The [Signup block](https://softr.gitbook.io/softr-documentation/memberships/user-accounts-blocks/sign-up-form) 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](https://softr.gitbook.io/softr-documentation/memberships/user-accounts-blocks/sign-in-form), which is available under **Add** **Block => Dynamic =>User Accounts => Sign in Form**.&#x20;

![Signup Form](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRKduzLhLxrR52Ulfv9%2F-MRLIW_ZXII-tiH1x_CU%2F4_b.png?alt=media\&token=1c2ba949-4e98-414c-a3b6-092bbd35dbdd)

![Signin Form](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRKduzLhLxrR52Ulfv9%2F-MRLIZhYLa4ON8iDAwbW%2F5_b.png?alt=media\&token=52d7c4af-1c3e-4bf6-b3bc-22cf16233e24)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLKI_d5aBL8aVBXBfd%2F-MRLKgSb_TX8pyyHjed0%2F6_b.png?alt=media\&token=cbf470db-35c3-4c0b-b6f2-1033afe7d490)

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.&#x20;

![Linking Sign in button to Signin page](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLKI_d5aBL8aVBXBfd%2F-MRLLJ2i7aZxYs9lQYHI%2F7_b.png?alt=media\&token=deed6384-dbe3-4ac6-b0be-76d7f08848a2)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLNTviCvFDKUWOYYUB%2F-MRLU-CgnlKyrtAuB5SW%2F8_b.png?alt=media\&token=074d9518-0438-4ca2-b02d-d6a49c19b82f)

![Buttons link to their corresponding pages](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLKI_d5aBL8aVBXBfd%2F-MRLN97uVuJn5k1ymvk1%2F9_b.png?alt=media\&token=461dd63e-7d04-42aa-a0a6-22c2f8480e12)

### 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 Sign In/Sign Up buttons](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLNTviCvFDKUWOYYUB%2F-MRLUWbVDk5vVydv3Uy8%2F10_b.png?alt=media\&token=58ff2379-4659-44e0-996f-9a5f70f112ad)

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"](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FwvCQsxrFF2nwvJVFyjie%2Fshow-user-profile-b.png?alt=media\&token=f1fc3168-1a7f-4468-89ba-29a39880fb49)

![Profile dropdown added to the Header](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLNTviCvFDKUWOYYUB%2F-MRLVaHtAwOqhnjmTYt4%2F12_b.png?alt=media\&token=fae2d595-f323-4433-8dc2-bf36e08406a4)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLNTviCvFDKUWOYYUB%2F-MRLWVOwBD2MFyDOFmUi%2F13_b.png?alt=media\&token=9199e7bb-d8dd-4406-b845-ad2239add827)

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](https://softr.gitbook.io/softr-documentation/memberships/block-visibility), we need to click on the "eye" icon next to the  block title, as shown below.

![Visibility icon](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLXY5rsVyWxpZeH02j%2F-MRLZXe_ozAK_HHZ1RrS%2F14_b.png?alt=media\&token=fce0e99d-9174-4f1d-a6a2-ae734039f1cd)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FhdVYGLGHMAD0cS9eQI3g%2Fvisibility-b.png?alt=media\&token=854c5f8a-265b-41fb-b263-019a1c020d74)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FfvXbA5eQLAIJsOE8O8XX%2Fpadlock-b.png?alt=media\&token=309f39ef-fd08-4ecd-ba4d-063270c1edaf)

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](https://softr.gitbook.io/softr-documentation/memberships/page-visibility), we need to navigate to [**Page Settings**](https://softr.gitbook.io/softr-documentation/studio/pages#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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FOPqOP4LOWtziRUjAwdVq%2Fpage-visibility-b.png?alt=media\&token=0f482683-30f4-46e7-a308-ac51a665dcae)

### "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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FIkB5ORP8CRyfwAiYg0y8%2Fstart-b.png?alt=media\&token=2cf86fe2-5192-4ec4-8195-748e0ac433d1)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MRLfcpQUC1m49DN_a7z%2F-MRLhDJEq_KHzVwtcioA%2F20.gif?alt=media\&token=1360daa0-1787-4771-9ecd-2cb3afc93385)

### Users Tab

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](https://softr.gitbook.io/softr-documentation/memberships/users-tab).

### 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](https://softr.gitbook.io/softr-documentation/memberships/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.
