User Registration

In this step, we'll add the ability for non-registered users to sign up for an account within our application experience.

Create Account Overview

Create the Endpoints

First, we'll need two new endpoints to respond to our "Create Account" page requests. From your experience overview page, click "Endpoints" in the left column, then click "Add Endpoint" in the top right corner.

Add Endpoint

GET /create-account

This endpoint is responsible for handling requests to view the "Create Account" page. From the "New Endpoint" page ...

  1. Leave the Method set as GET.
  2. Set the Route to /create-account.
  3. Change the Access Control to All public users.

Save the route, then return to the endpoints list page and click "Add Endpoint" to add the other route.

POST /create-account

This endpoint is responsible for handling form submissions from the "Create Account" page.

  1. Set the Method to POST.
  2. Set the Route to /create-account.
  3. Change the Access Control to All public users.

Remember to save the route.

Create the Views

Now that the routes are configured, it's time to create the views that will power this new functionality. Click "Views" in the left column to return to your Experience Views list.

Add Page

Page: Create Account

First we'll create a new page to render when this endpoint is requested. Click the "Add" button in the "Pages" list.

  1. Name the page Create Account.
  2. Add a description if you would like; the field is optional and does not affect the page as it is presented to your experience users.
  3. Select your previously created layout for the page's Layout.
  4. Choose Custom for the Page Type.
  5. Copy this snippet and paste it in for the page's Content.

Once the page is ready, click "Create Page" to save your work.

Component: profileForm

We included a new component in our new Create Account page, which will serve as the form for collecting new user data. Create the component by returning to the Experience Views list and clicking the "Add" button in the "Components" list.

  1. Name the component profileForm.
  2. Copy this snippet and paste it for the component's Content.

There are a few things to note about our new component:

  • We're setting a number of HTML5 form validation attributes on our inputs, including marking all fields as required and setting minimum and maximum lengths. This will block malformed account creation requests before the form ever submits. Not all browsers support this functionality, so we must also check these values within our workflow.
  • There is an instance of our "errorAlert" component at the top of this component, which we will use to render an error should account creation fail.
  • In the event that account creation does fail, we will repopulate as many fields as we have data for, except the user's new password.

Create the Workflow

Now, similar to how we did for our login page, let's create a single workflow for handling both GET and POST requests to our /create-account route.

  1. Download the workflow template, then import the file endpoint-create-account.flow as a new workflow.
  2. Update each of the endpoint triggers to point to the POST /create-account and GET /create-account endpoints you created above.
  3. Update the endpoint reply nodes to point to your Create Account page.

Create Account Workflow

As a general overview, this workflow handles the following:

  • If a user visits /create-account, we respond to the request with our new Create Account page – unless the user is already logged in, in which case they are redirected to our experience Home page.
  • When that user submits the Create Account form, we validate that they have submitted all fields correctly. Then, we check to make sure we do not already have an experience user with the same email address already tied to the application. If either of these checks fail, we re-render the Create Account page with an error message.
  • If account creation is successful, we generate an auth token, set it as a cookie and redirect the user to our experience home page.

There is a comment on each workflow node describing its function in more detail.

Finally, let's give our experience visitors a way to reach our new "Create Account" page by updating our navigation.

Create Account Links

Page Edits: Log In

First, let's edit our "Log In" page to add a section that will serve as a lead-in to account creation. Copy this snippet and use it to overwrite our current "Log In" page content.

We've added these few lines just above the closing </form> tag. This renders the call to action below our submit button.

<hr>
<p style="text-align:center">Don't have an account?</p>
<p style="text-align:center"><a href="/create-account" class="btn btn-lg btn-link">Sign Up Now</a></p>

Component Edits: userIndicator

Let's also update our site navigation to include a link to the account creation page, but only when the user is not signed in. To do that, we'll add a line to our "userIndicator" component. Add the following line immediately after our "Log In" link:

<li><a href="/create-account">Create Account</a></li>

Alternatively, you can copy the full component and paste it as the new content of userIndicator.

Review

This concludes this tutorial, in which we've added the ability for experience visitors to register for an account and start accessing parts of the experience that were previously open only to logged-in visitors. Next, we'll build on top of what we've done here to allow users to edit their profiles.