Email Authentication

Email Authentication Features and Email Authentication Component work together to enable Studio Users to build apps that require app end users to sign in with an authorized email address.

The Email Authentication Component is part of the Authentication Component Set.

Jump to: How to Configure Email Authentication

Email Authentication Features Properties

Overview Section:
  • Name - Sets the name of the feature in the app. It is defaulted to Assets but can be changed.
  • Service Uri - This is an uneditable
  • Microservice Type - Select the Microservice Type. Choose between Normal, Auth, or PWA Config. The default is set to Normal. 
Authentication Section:
  • Login Page - Sets the Page app users will be directed to when Authentication is turned on for a Page in the app.
  • On Success Redirect Page - Sets the Page app users will be directed to after successfully logging into the app.
  • + Add New - This button opens a new window that allows Studio Users to add an Email List or Email Pattern.
    • Email List - This is used to connect to a user list stored in the Lumavate platform database. Studio Users do not have access to set up a user list in the platform database.
    • Email Pattern - This allows Studio Users to set up authorized domains or specific email addresses. 

    To configure, Studio Users need to name the Security Group and enter an allowed email or email domain. 

    To authorize all emails within an organization enter an asterisk before the email domain. For example, to authorize all Lumavate email addresses, enter: *@lumavate.com

    To authorize specific emails, enter them as a list separated by a comma with no additional spacing. For example: support@lumavate.com,hello@lumavate.com

Text Section:
This section contains error messages app users will receive based on various uses cases. Studio Users can customize the error messages with any content desired. Required variables are noted.
  • Invalid Token Text
  • Expired Token Text - Requires the variable {{ renewLink }} be used.
  • Already Used Token Text 
  • Token Renewed Confirmation 
  • No Invitation Notification 
Email Template Section:

Studio Users can customize the email templates and subject lines with any content desired. Required email variables are noted below.

  • Subject - This is the subject line of the email that is sent when Email Verification is the selected Auth Type in the Email Authentication Component.
  • Text Content - This is the text version of the email sent when Email Verification is the selected Auth Type in the Email Authentication Component. The variable {{ activationLink }} is required to be included in the email as it will provide the app user with the necessary app link. 
  • HMTL Content - This is the HTML version of the email sent when Email Verification is the selected Auth Type in the Email Authentication Component. The variable {{ activationLink }} is required to be included in the email as it will provide the app user with the necessary app link.
  • Subject - This is the subject line of the email that is sent when Email and Access Code Verification is the selected Auth Type in the Email Authentication Component.
  • Text Content - This is the text version of the email sent when Email and Access Code Verification is the selected Auth Type in the Email Authentication Component. The variable {{ activationCode }} is required to be included in the email as it will provide the app user with the necessary one-time code. 
  • HTML Content - This is the HTML version of the email sent when Email and Access Code Verification is the selected Auth Type in the Email Authentication Component. The variable {{ activationCode }} is required to be included in the email as it will provide the app user with the necessary one-time code. 
Advanced Section:
  • Max Duration - How long, in seconds, the activation code or activation link sent to app users is valid. The property's default setting is 300 (seconds), or 5 minutes.
  • Max Duration - How long, in seconds, a user can remain logged into the app before they would be required to sign in again. The property's default setting is 2592000 (seconds), or 30 days. If a user clears their cache, they will be required to sign in again.
  • Security Key - A unique alphanumeric identifier prepopulated when the Feature is added. Studio Users should not change or remove this security key.
  • Allow Multiple Sessions - Toggles on or off whether app users will be allowed to log into the app from multiple devices at once.
  • Unique User per Activation - Toggles on or off a user's ability to have a unique profile per app. This setting only applies when the Profile Feature and Email Authentication are used in the same app.
  • Profile Service Uri - This setting only applies when the Profile Feature and Email Authentication are used in the same app.

Email Authentication Component Properties

  • Component Id - Sets the name of the Email Authentication Component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  • Auth Type

    Sets the authorization method from a dropdown with two options. Authorized email addresses are set up in the Email Authentication Feature within the Authentication Section.      

    • Email Verification - This option will email app users a secure link to access the app. The email sent to users is configured in the Email Authentication Feature, under the Email Template Section.
    • Email and Access Code Verification - This option will email app users a one-time code to enter into the app to gain access.  The email sent to users is configured in the Email Authentication Feature, under the Email Template Section.
  • Theme Color - Sets the color of the button. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Text - Sets the text that appears in the button.

Email Authentication Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:
  • Column Start - Sets the column where the Component will start. 
  • Column Span - Sets how many columns the Component will span. 
  • Padding - (Left, Right, Top, and Bottom) Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
  • Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.

How to Configure Email Authentication

1
Create a Login Page. Either add a new Page to the app or open an existing Page and add the Email Authentication Component to the Page
To add the Component: 
  1. Click the Green + Icon, located in the bottom right corner. 
  2. Either scroll to the Email Authentication Component in the list or begin typing Email Authentication to search the list. 
  3. Select the Email Authentication Component. The Email Authentication Component will appear at the bottom of the Content list in the left-hand column. The Email Authentication Properties will appear in the right-hand column.  
2
Configure the Email Authentication Properties. To configure, Studio Users need to select the Auth Type.
3
Save the Page updates.
4
Add the Email Authentication Feature to the app. 
To add the Feature: 
  1. Click the + sign located in the top left of the screen. A new window will open. 
  2. Under the Features section select Email Authentication. The Email Authentication Feature will appear at the bottom of the Content list in the left-hand column. 
5
Set the Microservice Type to Auth.
6
Expand the Authentication Section. 
7
Set the Login Page to the Page set up in Step 1. 
8
Under On Success Redirect Page, select the Page users will see after successfully logging into the app.
9
Click + Add New button. A new window will open. Select Email Pattern to configure the app's authorized user groups.
10
Click on the newly added Email Pattern and configure it. Repeat Steps 9 and 10 as needed.
To configure:
  1. Name the Security Group.
  2. Enter an allowed email or email domain. To authorize all emails within an organization enter an asterisk before the email domain. For example, to authorize all Lumavate email addresses, enter: *@lumavate.com
11
Click Save.
12
Turn the Authentication Security on for each required Page. 
To add the Component: 
  1. Click the Pencil Icon next to a Page. 
  2. Under Page Properties, expand the Security Section. 
  3. Select All logged in users or Specified user group(s) to require app users to login before viewing the content on that Page. The Login Page for the app should be set to <None> as this will allow all app users to access the Login Page.

Still need help? Contact Us Contact Us