Create an Authentication widget

The 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.

Before you begin

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

  1. In the Admin portal, go to Settings > Authentication > Security Settings.

  2. 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

  1. Go to Apps & Widgets > Widgets, then on the top right corner, click Add widget.

  2. 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 web apps 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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.