The steps required to create a functional register flow for your webusers via the front end.
After reading this article you'll learn how to:
-
Create a register page
-
Send an email to a newly registered user
-
Activate a new user
-
Create a login for the webuser
Starting off
First things first, we'll start with an empty application. In this new application, the first thing that we need to do is create a WebUser model. Add the following properties to this model:
-
Checkbox 'Active', default unchecked
-
Text (single line) 'First name', required
-
Text (single line) 'Last name', required
-
Password 'Password'
-
Email address 'Email address', has to be unique & required
-
Text (single line), 'UUID'
Check if the WebUser model has a relation with the Role model, it should add the relation automatically if it doesn't then add the 'has and belongs to many' relation yourself.
Register page
Next up, let's create the register page. In this example, I'll use the Header and footer page template for simplicity, and make sure this page is public.
Drag a column component onto the page and add a Create form component on top of that. Add the following properties to the form:
Note that we didn't add the active nor the UUID property. Hit Save to finish up the page.
The 'Create' action
When we now navigate to our action tab we can see that the Create form has automatically generated an action. Let's add some more steps and create a bit more functionality to this initial action.
The first thing we should do is install two blocks from the block store, namely the 'generate random hex' & the Send e-mail via SMTP block. The first block will generate a random text based on a number of characters that you can specify yourself. The second one will allow us to send an email to a webuser. Install these blocks to your organizations before continuing.
Navigate back to the actions tab and refresh the page if you don't see the Generate random hex or the Send e-mail via SMTP function. When they appear drag the Generate random hex above the Create step on the canvas, and configure it like so:
This will cause the step to generate a 36-long character UUID that we will use later.
The next step is to save this UUID to the new webuser, open the create step and add 1 more property, select the web user's UUID, and then select the UUID variable we just created.
We'll also need to add a role to the new webuser. To do this add a new collection variable on the Create record step. Name the variable webuser_role and select the Role model. Create a filter that retrieves the desired role, in my case I want the webuser to get the application role, so I'll filter if the name is equal to my application name.
Hit Save and add it to the new webuser like this:
Alright, before we continue with the email function there's something to note. For this you need an email provider, your company might have one, in that case, feel free to use it. But for the sake of this example and the chance that someone might not have this available use Ethereal Email. This website is a fake SMTP service that we can use to send emails, simply click the 'create ethereal account' button, your account will be created and a temporary email will be set up for you that we can use.
All right, let's get back to our action and drag the Send e-mail via SMTP function onto our canvas after the Create record step. Configure it according to the SMTP configurations of your company or from Ethereal. For our template we'll need two template variables, one is the UUID we created earlier and the other variable is the first name of our newly created webuser, this will make the email a bit more personal.
We can now create our template, you can copy the template below or create your own template. Note that you need to manually add the template variables.
Hello ,
<br>
<br>
Welcome to the family! You can activate your account by <a href="https://[APPLICATIOND_IDENTIFIER].betty.app/activate/"><b>clicking here</b></a>.
<br>
<br>
With kind regards,
<br>
[YOUR_NAME or COMPANY_NAME]
The step will look like this:
Another note is that you can see that we use a URL in the body template above that doesn't exist yet. Let's fix that!
Activating account
Create a new page, use the header and footer template, and name the page as follows:
The ':uuid' part of the URL will be the unique UUID that we create for our webuser. If we would send the email to a new webuser the URL that he has to click to activate his account will be something like '[APPLICATION_NAME].betty.app/activate/9b69784e-9672-4ff1-97b5-064a549554da'. Using a colon : in the URL means that it'll contain an input variable in our case the input variable is the UUID.
And since we're already creating pages, quickly add a login page and a home page as well before we continue with the activating account functionality. Both pages use the header and footer template. For the home page make sure that the type is 'authenticated', the rest of the pages are public.
Head back to the activate page, drag a column component on the canvas and an update form on top of it. Configure the update form as follows:
The next thing that'll do is add our UUID in a page variable so that we can use it in our filter. Go to the variables tab of your page, delete any variables that were already present, and create a new one. Select 'Text' and make sure that the variable has the same name as the input in this case 'UUID'.
We can now use our input in the filter of the update form. Select the update form and change the filter so that it'll filter on the UUID of the webuser.
Since we don't need anything besides the UUID value; delete everything in the form except for the alert message and the hidden input. For our action, we need the input variable so make sure the hidden input is made like this:
Now, let's make sure the action is updated.
Navigate the action of the form, select the Start step and delete any input and action variables that are resent except the UUID variable.
We'll use the UUID input variable to retrieve the webuser. Go to the action variables and create the following webuser object.
Now head to the update step. Select the web_user_object and make sure the active property is checked.
This will make sure that our user will be activated when this action is triggered.
Now we can do some magic, we don't want the webuser to do anything on this page. All we want to do is make sure that the active checkbox is checked once he clicks the link in the email that we sent.
We'll use interactions to automatically submit this form and update the active status of the user after which he'll automatically get redirected to the login page and he'll receive a small alert informing him that his account activation has been successful.
The first interaction that we'll add is while the page is rendering we'll submit the update form.
When the form has been submitted we want to redirect the webuser to the login page. It'd be nice to show an alert informing the user his activation has succeeded. Before we continue add an input text variable on the login page called 'activated'.
Go back to the activate page and add the second interaction as follows:
Because we just added the 'activated' variable we can now give it a value, in this case, I'll use 'Y' to indicate that the activation was successful.
Login page
Navigate. to the login page. Drag a column component on the canvas and inside that a login form component. Select Web User as the authentication profile and the 'Home' page as the page the user gets redirected to.
To inform the user his activation has succeeded; add a conditional component above the alert of the login form. Configure it like so:
Inside the conditional component drag an alert component and configure it to make it look similar to this:
And of course, we only want activated users to be able to log in. Go to the action of the login form. And on the Start step add an action variable like this:
We'll use this in a conditional step to check if the webuser object is activated. Drag a conditional step above the authenticate user step that's already there.
Drag the authenticate user step in the success flow, this will only allow users who've activated their account to be eligible to log in to the application.
Select our active webuser object variable we just created to be true. Now ideally we'd drag the authenticate user step into the true flow but during the writing of this article variables used inside the conditional step aren't passed through and available as output for the finish step. To work around this simply install the raise error step from the block store.
With this step installed drag it into the 'else' flow. This will ensure that an error will be raised and it will stop the action. Keep the Authenticate user step after the Condition step, it'll trigger when the flow is true since if it's false the action will stop. We can now use the output 'jwt' from the authenticate user step in the finish step. In the future, this step will likely be redundant and it should be possible to use the Authenticate user in the true flow of the Condition step.
And that's it for the login part.
Home page and wrapping up
Once the user has logged in he'll land on the home page. Let's add a welcome message for the user and call it a day.
On the home page, add a column component and inside of it a Data container. Configure the Data container like this:
Now inside the Data container component add a title component and put a welcome message in there and select the webuser his name.
To finalize the application go over each page and hit the Play button in the top left corner to compile all the pages we've created.
You'll likely get an error while rendering:
To fix this, navigate to your authentication profile tab (found in the tools section), or click on the arrow in the error message. Select the login page, and now render the page again.
After that make sure the great of the pages are compiled by clicking the Play button and test the application by going to your register page and registering a user.
After registering head to your mailbox, either ethereal mail or the one of your organization. If you use ethereal mail you might have to create a new inbox if it has expired. Simply create a new mailbox and add the username and password to the register action.
When we click the link we'll get redirected to the activate webuser page which will activate the account and redirect the user to the login page.
Now we can log in!
And there we go, we're logged in.
We've just successfully registered a user, sent out an email to confirm the account, activated the account, and logged the user in.