Create an Authentication widget

CyberArk Identity Authentication Widget provides authorization, MFA and single-sign-on to your websites and mobile applications without using a password, while implementing standards like OIDC and SAML.

The following diagram illustrates an example of how a user can sign in to a website called Acme Inc. using the authentication widget.

The following functions are supported by the Authentication widget when it's integrated with a web app:

Quick Response (QR) Code user identification
Self-service password reset (SSPR) configuration
Self-service account unlock (SSAU)
Social media sign-in (applicable only for CyberArk-hosted widgets)
Forgot username self-service at sign in
Adaptive MFA
Multifactor Authentication
External IDP authentication (applicable only for CyberArk-hosted authentication pages)
Anti-phishing security image
Remember me (remember the last signed in username)

Before you begin

Specify trusted domains for API calls to prevent cross-origin resource sharing attacks before creating and deploying widgets.

In the Admin portal, go to Settings > Authentication > Security Settings.
In the API Security section, click Add under Specify Trusted DNS Domains for API Calls and select the domain that serves the widget page to the trusted domains of your tenant. For example, localhost.

Create an Authentication Widget

The following procedure describes how to create and customize an Authentication Widget.

Step 1: Add the Authentication Widget

Go to Apps & Widgets > Widgets, then on the top right corner, click Add widget.
Select Authentication Widget from the drop-down list.

The Get started page of the selected widget displays and you can customize the widget for your needs.

Step 2: Get started with the configuration

Update the following fields in the Get started tab:

Name	Description
Widget name	Enter a unique name for your widget. This is a required field.
Select the application that the user will be redirected to after authentication	Select a web app from the list of deployed applications to link to the widget. After a successful signin, you are redirected to the selected application. See Integrate a widget with the OIDC app for more information.

Name

Description

Widget name

Enter a unique name for your widget. This is a required field.

Select the application that the user will be redirected to after authentication

Select a web app from the list of deployed applications to link to the widget. After a successful signin, you are redirected to the selected application.

See Integrate a widget with the OIDC app for more information.

Step 3: Customize the Login form

In the Login form tab, you can customize the fields and corresponding labels that are displayed in the login form of an end user's application as follows:

In the Configuration section, perform the following actions:
- Select Enable social login to enable the user to log in to the app using their social media credentials.
- Select Enable forgot username link to add a link for the forgot password use case in the Login form.
Select a preferred language from the Language drop-down and see the content in the label editor change to the selected language. The Login form label editor is a JavaScript-based editor where you can customize the Login form labels.

You can expand the Script Help menu to get more details on the objects defined in the Login form.
Select Update Preview to preview the form as you edit the fields.

The language that appears on the Login screen of the user's application depends on the browser language selected by the end user.
Select Reset to revert the edited labels to their default descriptions.

Label Name	Description	Default text
UsernameHeader	Enter a name for the form.	Sign In
SocialLoginLabel	Enter the text that appears on the form when you select Enable social login field.	Or sign in with social media
StartOverLink	Enter the text that appears for the signin page with MFA challenges after selecting next to restart the login form.	Start Over
ForgotUsernameLabel	Enter the text that appears when you select the Enable forgot username link, to preview the link in the form.	Don't know username?
LoginNameLabel	Specify a hint for the Login name field header, for the end user to enter the username in the correct pattern.	Enter your username {login_name_hint}. The {login_name_hint} is a variable obtained from Login Customization section of the Account customization page and is displayed in English only.
LoginNamePlaceholder	Specify a hint for the Login name field, for the end user to enter the username in the correct pattern.	Your username {login_name_hint}
NextButtonText	Enter text on the button that takes the end user to the MFA challenge page upon selection.	Next
Authentication Header	Enter the header text that appears for Signin page with MFA challenges after selecting Next.	Authenticate to {company_name}. The {company_name} is a variable obtained from the General options section of the Account Customization page and is displayed in English only.
ChooseMFAPrompt	Specify the hint text for the user to select the required MFA prompt for the first challenge.	Choose authentication method
ChooseSecondFactorPrompt	Specify the hint text for the user to select the required MFA prompt for the second challenge.	Choose second authentication method
PasswordPrompt	Specify the hint text for the user to enter his password.	Enter the password associated with your username
ForgotPasswordLink	Enter the text that appears when the user has configured only password authentication. The link does not appear if other authentication challenges are configured.	Forgot your password?
PasswordLabel	Enter the label text for password field.	Password
PasswordMismatchPrompt	Specify a error message that appears when the user's new password does not match with the one entered in the confirm password field.	Passwords do not match.
ResetPasswordPrompt	Enter the header text for the page where user can reset the password.	Reset Your Password
NewPasswordPrompt	Specify the hint text for the New Password field.	New Password
ConfirmPasswordPrompt	Specify the hint text for the Confirm Password field.	Confirm Password
PasswordResetLabel	Enter the label text for Password reset button.	Password reset
MandatoryFieldPrompt	Specify the error message for the password field when left blank.	This field is mandatory
EnterCodePrompt	Specify the hint text to enter the code received for MFA challenge.	Enter code
AuthenticateButtonText	Enter the label text for the authentication button.	Authenticate
EmailLabel	Enter the label text for email MFA challenge configured.	Email - {email_address}. The {email_address} is a variable obtained from the registration details the user provides when he signs up and is displayed in English only.
SendEmailButtonText	Enter the label text for the send email button.	Send me an email
EmailSentLabel	Specify the label text for the email sent status.	Email sent!
EmailPrompt	Enter the prompt message to the user that the email is sent to the registered email address.	Email sent to {email_address}. Click the link or manually enter the code to authenticate. \n\nReturn to this app to continue.
TextMessageLabel	Enter the label text for the MFA challenge configured to share text message.	Text Message - * * {mobile_number}. The {mobile_number} is a variable obtained from the registration details the user provides when he signs up and is displayed in English only.
SendTextMessageButtonText	Enter the label text for the Send me a message button.	Send me a message
SMSSentLabel	Specify the label text for the message sent status.	Message Sent!
SMSPrompt	Enter the prompt message to the user that the message is sent to the registered mobile number.	Message sent to number * * {mobile_number}. Approve the notification or manually enter the code to authenticate\n\n
PhoneCallLabel	Enter the label text for the MFA challenge configured to make a phone call.	Phone - * * {mobile_number}
SendPhoneCallButtonText	Enter the label text for the Call me button.	Call me
CallingLabel	Enter the label text for showing the call status.	Calling you...
PhoneCallPrompt	Enter the prompt message to the user that the message is sent to the registered mobile number.	Attempting to call * * {mobile_number}.\n\nFollow the instructions to authenticate.

Step 4: Customize the Sign-up form

In the Sign-up form tab, you can create a form for the user to complete a one-time registration to an application. Select the Enable sign-up form checkbox to enable a sign up form, then configure the fields.

The Username, Password, Confirm Password, and Email fields are selected by default.

Step 5: Configure the Styling of the Login and Sign-up forms

Use the Styling tab to customize the look and feel of the widget to match your branding. This customization is reflected in the Login and Sign-up forms. For more details, see Customize portal and login windows.

Step 6: Configure the Deploy tab

The final step is to download the widget to host or embed it into your web apps. There are two ways to do this:

Click Download Html to download the HTML and embed it into your web apps.

For more details, see Embed the widget into your web app.
Click Copy URL to copy the URL of the authentication page and create a customized authentication page, hosted by CyberArk using the widget customization javascript editor.

For more details, see Embed a widget hosted by CyberArk.