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 the Endpoints
First, we’ll need two new endpoints to respond to our “Create Account” page requests. Navigate to the “Experience” tab, then click the “Add” button at the top right of the list.
GET /create-account
This endpoint is responsible for handling requests to view the “Create Account” page. From the “New Endpoint” page …
- Leave the
Method
set asGET
. - Set the
Route
to/create-account
. - Change the
Access Control
toAll public users
.
Save the route, then return to the endpoints list page and click “Add” to add the other route.
POST /create-account
This endpoint is responsible for handling form submissions from the “Create Account” page.
- Set the
Method
toPOST
. - Set the
Route
to/create-account
. - Change the
Access Control
toAll 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 the “Views” tab, 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.
Name
the pageCreate Account
.- 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
Layout
. - Choose
Custom
for thePage Type
. - 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.
Name
the componentprofileForm
.- 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.
- Download the workflow template, then import the file
endpoint-create-account.flow
as a new experience workflow. - Update each of the endpoint triggers to point to the
POST /create-account
andGET /create-account
endpoints you created above. - Update the endpoint reply nodes to point to your
Create Account
page. - 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 newCreate 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 theCreate 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.
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
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.
Was this page helpful?
Still looking for help? You can also search the Losant Forums or submit your question there.