Entry Identity Platform
Search
⌃K
⚛

JavaScript (React)

Estimated time: 4 minutes

Create an app

There is a step-by-step guide how to add Entry to the React app published here.
If you have completed the workspace configuration from Entry Dashboard, skip this and proceed to Run a sample app locally​
The basis of any integration is creating a client app in your workspace.
  1. 1.
    Choose your App ID: it must be an ASCII combination that your app will use for integration.
  2. 2.
    Set App Protocol to openid-connect - Entry uses this protocol for seamless secure integrations, originating from customer apps.

Configure your App

Next, you will configure your App and receive the parameters you will need to save on your backend.

Configure your redirect URIs

For local development
Here we are providing the settings for your local development, assuming that you will be running a quickstart sample from our repo.
  1. 1.
    Put http://localhost:3000/* in Valid Redirect URIs field - you will need this so that Entry would send you back to your app after successful login. On the screenshot below it's highlighted in blue.
  2. 2.
    Put http://localhost:3000 in Web Origins field - you will need this so that Entry would know origins to access data in the workspace. On the screenshot below it's highlighted in yellow.
  3. 3.
    Copy your Secret Key - you will need it for configuring your example.
  4. 4.
    Copy a domain part of the Authorization Endpoint (highlighted in green): in this case it's https://entry-dev.xix.ai/auth/realms/test-alex-12
That's it! Now you are ready to test Entry with a sample app or to integrate it with your app based on our quickstart.

Run a sample app locally

Explore a sample app
Estimated time: 2 minutes
This is the part of the repo that stores the sample code:
  1. 1.
    Open your terminal.
  2. 2.
    Clone the repo and go to the react-typescript directory: git clone https://github.com/XIX-Entry/quickstarts.git && cd react-typescript
  3. 3.
    Make sure to read and install the dependencies mentioned in react-typescript/README.md file, both inPrerequisites and Running locally parts
  4. 4.
    Open react-typescript/src/oidc-config.ts file with your favorite text editor and put your settings into the file:
    1. 1.
      client_id should be your App ID from above, in this case quickstart-app
    2. 2.
      client_secret should be your Secret key
    3. 3.
      authority should be Authorization Endpoint we've copied before: e.g. https://entry.xix.ai/auth/realms/YOUR_WORKSPACE_NAME
  5. 5.
    Run your application with npm start command.
  6. 6.
    Open your sample app in any browser at http://localhost:3000 - you will be able to log in to your sample app with Entry, and after being redirected, you will see the raw content of your user profile.
​
Previous
Python (Flask)
Next - Fundamentals
Core concepts
Last modified 10mo ago