Build a members area

In this tutorial you give your site its own members. Visitors create an account, log in with a password or a sign-in link, and reach a page that is closed to everyone else. You also add a role and show extra content to the visitors who have it. You need a site with a home page; the visitor accounts live in the site's own database.

Add the pages

1. Create three pages

   Open the Pages tab in the left sidebar and press + (Add page) three times. Name the pages Sign up, Log in and Members.

2. Set their paths

   Open each page, click an empty spot of the canvas so nothing is selected, and set Path in the page settings: /signup, /login and /members.

Build the sign-up form

1. Insert a form

   On the Sign up page, press + in the Layers tab and choose Form. It comes with an Email input, a message text area, a Send button and two state frames.

2. Turn off the built-in submissions

   Select the form and set Action to Do nothing in the Form section. Your workflow handles the submit instead of the Forms inbox.

3. Shape the fields

   Delete the message text area. Insert two Input elements in the form: one with Name name and Label Your name, and one with Name password, Label Password and Type Password. Select the button and change its Text to Create account.

4. Connect the fields to variables

   Select each input and press + (Create variable) next to Value in the Field section. The input and the new page variable stay in sync, so the form values are ready as vars.email, vars.password and vars.name.

Sign the visitor up

1. Add a submit workflow

   Select the form, open Events in the inspector, keep Submit selected and press Add workflow. The Logic workspace opens on the new workflow.

2. Create the account

   Press Add step and choose Sign up visitor under Visitor auth. For Email, press the ƒ button (Use an expression) and type vars.email. Do the same for Password with vars.password and Name with vars.name.

3. Go to the members page

   Press Add step, choose Go to page and pick Members as the Destination. The step only runs when the sign-up worked.

4. Show what went wrong

   Under On error, press Add error handler, then Add error step and choose Show toast. Set Message to the expression error.message and Variant to Error. A visitor who uses an email that already has an account now sees why.

Build the login page

1. Copy the form

   Copy the sign-up form with ⌘C, open the Log in page and paste it with ⌘V. Delete the name input and change the button text to Log in. Connect the email and password inputs to new variables on this page, as before.

2. Log the visitor in

   Add a Submit workflow to the form. Add Log in visitor with Email vars.email and Password vars.password, then Go to page with Members. Add the same error toast under On error.

3. Offer a sign-in link

   Add a Button under the form with the text Email me a sign-in link and set its Type to Button, so it does not submit the form. In Events, add a Click workflow with Send sign-in link (Email vars.email) and a Show toast that says Check your inbox.

Close the members page

1. Restrict the page

   Open the Members page and click an empty spot of the canvas. In the Access section, turn on Restrict. The Rule starts as user.isLoggedIn, which is what you want here.

2. Send visitors to the login page

   Set Otherwise to the Log in page. Visitors who are not signed in are redirected there; without a redirect page they get a 404.

3. Greet the visitor

   Add a Text element. In Typography, press the braces button next to Content (Bind Text) and type 'Welcome, ' + user.name.

4. Add a log out button

   Add a Button with the text Log out. Give it a Click workflow with Log out visitor, then Go to page with your home page.

Add a premium role

1. Create the role

   Open the Tables workspace from the bottom of the left sidebar and choose Visitors. Type premium in New role and press Add role. Role names use lowercase letters, digits, _ and -.

2. Show content to premium members only

   On the Members page, add a frame with a short premium message. In Visibility, bind Show when to user.roles.includes('premium').

3. Pick up role changes without a reload

   Add a Button with the text Refresh my access and a Click workflow with Refresh user. It reloads user from the server, so a role you assign while the visitor is on the page shows up at once.

Publish and test

1. Publish to staging

   Press Publish in the toolbar, keep Staging selected and confirm.

2. Try the closed page

   Open /members on the staging address. You land on the login page, because you are not signed in.

3. Sign up

   Open /signup, create an account and check that the members page greets you by name. Press Log out and log in again on /login.

4. Make yourself premium

   Back in the editor, open Tables → Visitors. Your account is in the list. Click it, check premium in the side panel, then press Refresh my access on the staging page. The premium message appears.

What you learned

• Visitor auth steps sign visitors up, in and out, send sign-in links and refresh user.
• A page access rule runs on the server for every request and redirects visitors who fail it.
• user is always an object; test user.isLoggedIn and user.roles.includes(…).
• Roles are defined and assigned in Tables → Visitors.

Keep going with the next tutorials, or read the guides behind this one: