In this step, we'll add the ability for non-registered users to sign up for an account within our application experience.
Create the Endpoints#
First, we'll need two new endpoints to respond to our "Create Account" page requests. In the experience menu, click the "Endpoints" menu item, then click the "Add" button at the top right of the list.
This endpoint is responsible for handling requests to view the "Create Account" page. From the "New Endpoint" page ...
- Leave the
- Set the
- Change the
All public users.
Save the route, then return to the endpoints list page and click "Add" to add the other route.
This endpoint is responsible for handling form submissions from the "Create Account" page.
- Set the
- Set the
- Change the
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. In the experience menu, click the "Views" menu item, then click the "Add" button at the top right of the "Pages" list.
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.
- 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.
- Select your previously created layout for the page's
- Copy this snippet and paste it in for the page's
Once the page is ready, click "Create Page" to save your work.
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.
- Copy this snippet and paste it for the component's
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
- Download the workflow template, then import the file
endpoint-create-account.flowas a new experience workflow.
- Update each of the endpoint triggers to point to the
GET /create-accountendpoints you created above.
- Update the endpoint reply nodes to point to your
- Enable the workflow (since imported workflows are by default disabled).
As a general overview, this workflow handles the following:
- If a user visits
/create-account, we respond to the request with our new
Create Accountpage – unless the user is already logged in, in which case they are redirected to our experience Home page.
- When that user submits the
Create Accountform, 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 Accountpage 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.
Link to the Feature#
Finally, let's give our experience visitors a way to reach our new "Create Account" page by updating our navigation.
Page Edits: Log In
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
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.