React SPA Sample App

This Sample Application showcases the capabilities of CyberArk Identity Widget linked with an OpenID connect application and includes an OpenID Connect playground with all possible grant flows. This app uses React JS as the frontend.

CyberArk Identity react JS sample app can be obtained from the downloaded GitHub repository
https://github.com/cyberark/identity-sample-spa-react

CyberArk Identity Tenant Configuration

If you don't have any existing CyberArk tenants, you can try a free trial tenant [here]. (https://www.idaptive.com/free-trial)

Step 1: Create a user

• To create a user refer here.
• Ensure that is OAuth confidential client checkbox has been selected. .

Step 2: Create a role

• To create a role refer here.
• Ensure that User Management, Role Management, and Application Management rights are added to the role under the Administrative Rights section.
• Ensure that OAuth confidential client is added to the role under the Assigned Applications section.

Step 3: Setup an Authentication Profile

• Set up an Authentication profile and add it to the policy under the Authentication Policies section. For more information, refer to here.

Step 4: Create a Policy

• To create a policy, refer here.
• Ensure that the above-created role is added to the policy.

Step 5: Setup an OpenID Connect Application

1. Navigate to the CyberArk Admin portal and click Web Apps under the Apps section.

2. Click Add Web Apps and navigate to the Custom section->Add OpenID Connect app.
3. Open the OpenID Connect app created in the above step.
4. In the Settings section, add an ID of your choice for the Application ID.
5. Navigate to Trust Section

   Enter client secret (E.g.: $3CrE!4327)

   • Add Resource application URL for the sample app.

http://localhost:3000/Resource

6. Add the Redirect destinations for the sample app.

http://localhost:3000/RedirectResource

Based on your app configuration the URL configuration should be changed.

7. Add the following scope in the OIDC app.

• Setup Permissions for OpenID Connect.
  * Add the above-created role and provide Run permission to generate Tokens.

For more Information on OpenID Connect, refer to here .

Specify Trusted DNS Domains for API Calls

📘

Administrator privileges

To add a trusted domain, you require administrator privileges.

• Include Web App Domain in Trusted DNS Domains for API Calls.
  • Navigate to Settings -> Authentication -> Security Settings -> API Security in the admin portal.
  • Add an entry under Trusted DNS Domains for API Calls.

localhost

Step 6: Setup an OAuth2 Client

1. Navigate to the CyberArk Admin portal and click Web Apps under the Apps section.
2. Click add Web Apps and navigate to the Custom section -> add OAuth2 Client.
3. Open the OAuth2 Client app created in the above step.
4. In the Settings section, add an ID of your choice for the Application ID.
5. Navigate to the General Usage section, and add Resource application URL for the sample app.

localhost

6. Navigate to Tokens section, select the Client Creds and Resource Owner checkboxes.

7. Navigate to the Scope section, and add Authorized Scope based on your need. For more information about the scope, refer here.

Step 7: Create an Authentication Widget and configure it as follows.

• To create an Authenticaion Widget refer here
• Link the widget with the OpenID connect app created above.

React SPA Deployment Guide

A step-by-step guide to setting up a sample app environment

Overview

This guide will help you install the prerequisite tools and deploy the React SPA sample app.

Before you begin

Install NODE.js

• Download the Node.js installer from https://nodejs.org/en/download/ and run the file(highly recommended to download 64-bit version).
• Node.js installer includes the NPM package manager.
• Ensure that the path of Node.js is configured into the system PATH environment variable.
• Use the commands below to check Node.js installation.
• Minimum version of node required is 16.15.0.

node -v
npm -v

Install JS SDK

• Install the JavaScript SDK from here

Run

Run the application

npm install
npm start

Explore Sign Up and Sign In widget

Using the widget, the customer application will embed to the existing customer web application to perform the user authentication instead of regular redirection.

Introduction to Sign Up / Sign In Widget
CyberArk provides a widget that customers can use to avail of the sign-up and sign-in capabilities in their applications.
The Sign Up / Sign In widget can be integrated into a custom application where the organization can authenticate end-users identities using CyberArk Identity.

Widget overview

• User can register an account with the CyberArk Identity server.
• Admin needs to map the role in the CyberArk Admin portal for newly registered users.
• User will authenticate to CyberArk Identity server.

Widget Usage

• The Sign Up/ Sign In widget in the sample web app secures their end-user registration and authentication using CyberArk Sign Up/Sign In widget, respectively.

• Ensure all mandatory information is filled in on the Settings page.

• On clicking the Get Started button of the widget's card, it should navigate to the login protocols page. On clicking the Login button from the login protocols page, it has a Sign Up / Sign In widget.

Widget Exploration

• On the click of the Sign Up button, the CyberArk Identity Sign Up widget will appear. Users will be able to register and create an account.

• Post creation of the user, the Sign In widget appears through which the user can sign in to the sample app.

• The authentication challenges appear when clicked on the Next button, responding to which the user authenticates.

📘

Note:

We use OAuth Authorization with PKCE flow to get an access token upon successful response. Use the access token in the authorization header for subsequent requests in a sample application.

User Info

After successful authentication using the widget, the user will navigate to the "user info" page, where the user can explore additional functionalities provided.