Set up a sample app using React SPA

This topic describes how to set up a sample app using React SPA.

The React SPA sample application showcases the capabilities of the 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 front end.

Configure the CyberArk Identity tenant

If you don't have any existing CyberArk tenants, you can try a free trial tenant here.

Step 1: Create a role

1. Create a role, as described in Create roles.

2. Ensure that User Management> Role Management Rights are added to the role under the Administrative Rights section.

Step 2: Set up an authentication profile

Set up an authentication profile and add it to the policy under the Authentication Policies section. For more information, see Configure MFA for the User Portal.

Step 3: Create a policy

Create a policy, as described in Create a policy set and assign it to users.

Ensure that the above-created role is added to the policy.

Step 4: Set up an OpenID Connect application

1. In the Identity Administration portal, select Apps > Web Apps, then click Add Web Apps.

2. In the Custom section, click Add OpenID Connect app.

3. Open the OpenID Connect app you created in the above step.

4. In the Settings section, add an ID of your choice for the application ID.

5. Navigate to the Trust section. Enter the client secret. For example, $3CrE!4327.

   Add the 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 is changed.

   

7. To set up permissions for OpenID Connect, add the above-created role and provide Run permission to generate tokens.

   

   For more Information on OpenID Connect, see Use OpenID Connect.

8. To specify trusted DNS domains for API calls, include the web app domain in the trusted DNS domains for API Calls.

   1. Navigate to Settings > Authentication > Security Settings > API Security in the admin portal.

   2. Add an entry under Trusted DNS Domains for API Calls.

Step 5: Create an Authentication widget and configure it

Link the widget with the OpenID connect app created above.

Deploy an Angular Node sample app

This section includes a step-by-step guide to set up a sample app environment. It describes how to install the prerequisite tools and deploy the Angular Node sample app. The minimum required version of Node is 16.15.0.

Step 1: Install NODE.js

1. Download the Node.js installer from https://nodejs.org/en/download/ and run the file.

   It is highly recommended to download the 64-bit version.

   Node.js installer includes the NPM package manager.

2. Ensure that the path of Node.js is configured into the system PATH environment variable.

3. Use the commands below to check the Node.js installation.

   node -v

   npm -v

Step 2: Install the JS SDK

Install the SDK as described in Use the CyberArk Identity JavaScript SDK.

Step 3: Run the application

Install and run the application using the commands below.

Explore the Sign Up and Sign In widget

Using the widget, the customer application is embedded in the existing customer web application to perform the user authentication instead of regular redirection.

Overview

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

How it works:

1. A user registers an account with the CyberArk Identity server.

2. An admin maps the role in the CyberArk Admin portal for the newly registered user.

3. The user authenticates to the CyberArk Identity server.

Create an account and log in using the widget

The Sign Up widget in the sample web app secures end-user registration and the Sign In widget secures the end-user authentication.

1. Click Get Started in the widget card, to navigate to the Login protocols page.

   

2. Click Login in the Login protocols page. The Sign up and Sign in widgets show how the widget can be integrated into a client app.

   

3. Click Sign Up to display the CyberArk Identity Sign Up widget.

   

   Fill in the details to register and create an account.

   

4. After the user is created, use the Sign In widget to sign in to the sample app.

   

5. Click Next. The authentication challenges appear.

View user info

After a successful authentication using the widget, the user can navigate to the User Info page to explore the additional functionalities provided

Update the user profile

The Update your profile page displays the current user account details and provides an option to update the profile information. The profile information includes username, email address, display name, and mobile number. The user can edit the details and click the Update button to submit the details.

Updating the user profile invokes the /user/UpdateProfile endpoint, which updates the cloud user properties.

After the successful update, a success popup is displayed on the screen.

Explore OIDC flows

Using the OpenID Connect Web application connected with the widget that was used above for login, you can explore the following OIDC flows.

• Authorization

• Implicit

• Hybrid

Authorization code flow

When configuring public applications, such as mobile apps or single-page apps, where the client secret is not secure, this flow helps removes the use of client secrets, making it more secure.

This section provides more details about Authorization code flow in the React Sample app.

1. Select Authorization from the drop-down list and click Build Authorize URL.

   

2. Click Authorize to generate the authorization URL, after taking access permissions of the scopes requested (which were set up on the Settings page). The authorization code is sent with a preview of the Token Endpoint API.

   

3. Click Proceed to get the token set and claims using the access token (access_token).

   

4. Click Try Another Flow to log out this user and navigate to the home page of the sample app.

Implicit flow

The Implicit flow is the simplest and is typically used by JavaScript applications running in a browser. The access token under this flow is assumed to be used temporarily. By default, id_token is selected as the response type. If the token is also chosen, the response contains access_token along with id_token.

The following section provides more details about the Implicit code flow in the React sample app.

1. Select Implicit from the drop-down list and select the Token checkbox to get it as the response.

2. Click Build Authorize URL to get the URL as in the previous flow with the response types.

   

3. Click Authorize to authorize the response to be returned with the access token.

   

4. Click Proceed to get the claims information.

5. Click Another Flow to log out this user and navigate to the home page of the sample app.

Hybrid flow

The Hybrid flow is the combination of the Authorization code flow and the Implicit flow. The following section provides more details about the Hybrid code flow in the React sample app.

1. Select Hybrid from the drop-down list, choose the response types for additional information in the response, and click Build Authorize URL.

   

2. Click Authorize to view the Authorize response and the token endpoint preview.

   

3. Click Proceed to get a similar response to the Authorization code flow with a token set and claims.

4. Click Try Another Flow to log out this user and navigate to the home page of the sample app.

Introspect

Introspect creates a request to validate the JWT or opaque token by calling the introspect endpoint.

Set the clientId and clientSecret parameters for authorization and pass token as a parameter.

Click lntrospect to get the Introspect response containing the active status as true or false.