Skip to main content
Version: v1

Getting Started (React)

Last updated on
tip

This guide is specifically for the React version of our getting started app. If you're interested in the Angular version, you can check that out here.

In this guide we will show you how to create and configure your account and connect a demo application to it. This app will demonstrate common workflows like creating a passkey and using it to authenticate.

info

Try it out 🚀 ​

Want to see Universal Passkeys in action with no coding needed? Try it out

Start by cloning the example app (for developers)

If you're not a developer or don't want to download the code yet, you can use the Try It Out 🚀 experience: Try it out 🚀

1. Check the basics​

The Beyond Identity Example Application is made up of a node.js backend and a NextJS frontend. You'll need standard developer tools to get it up and running.

macOS, Windows and Linux​

  1. Git: Download and install git: https://git-scm.com/downloads

  2. NodeJS: Download and install nodejs: https://nodejs.org/en/download/

  3. Yarn: Download and install yarn: https://classic.yarnpkg.com/lang/en/docs/install/

2. Download the example application​

Clone the repo​

The source code for the example application is hosted in Github.

git clone https://github.com/gobeyondidentity/getting-started.git

Change directory into the repo:

cd getting-started

3. Create a Tenant​

Head to the signup form and fill out your info.

If you've already created a tenant, you can log in using the following links:

This process creates various resources described in Beyond Identity's architecture. It also creates a passkey that allows you to log into the Beyond Identity Console without a password. Due to the nature of passkeys, the credential created on signup only works with the Console. New passkeys must be created in the correct realm for accessing other applications. To learn more about what happens behind the scenes when you sign up for a developer account, see Account Setup.

Once your tenant has been created with Beyond Identity, you can continue to configure the sample app, get an API token, a tenant_id, a realm_id and some other configuration parameters.

4. Make a copy of the config file​

Run the following command from the home directory for the example app:

cp .env.local.example .env.local
copy .env.local.example .env.local

5. Set your Region variable on the config file​

Edit .env.local and set the value of the REGION variable according to where your account was created (us or eu).

6. Get your Tenant ID​

Log into the Admin Console, then to get your Tenant ID:

  1. On the navigation bar to the left click Home.

  2. Click Edit Realm on the top right side of your screen, copy the Tenant ID value.

  3. Edit .env.local and paste the value of the TENANT_ID variable from the clipboard.

7. Create an API token​

From the Admin Console, create an API Token for your tenant by:

  1. Click Applications.
  2. Click Beyond Identity Management API.
  3. Click API Tokens.
  4. Create a token and click the copy button, use the API Token to set the environment variables as shown below.
  5. Edit .env.local and paste the value of the API_TOKEN variable from the clipboard.

8. Configure Beyond Identity to manage identities for your app​

So far, only the Admin Realm exists for your Beyond Identity tenant. You don't want your app's users to be created there! The steps below create a set of Beyond Identity resources that will contain your end users' identities.

Create a Realm​

We need to create a new Realm to hold identities and configuration:

From the Admin Console:

  1. Click the Realm selector on the top-left.
  2. Click Create New Realm.
  3. Type the name of your new realm. Click Create Realm.
  4. Click Switch to Realm.
  5. From the Realm's Home page, click Edit.
  6. Copy the value for Realm ID and paste it on the .env.local file under REALM_ID.

Create an Application​

Next, we we'll create a new Application that contains the configuration for your end users:

From the Admin Console:

  1. From the navigation bar, click Apps, then click Add app.
  2. Type a name for your new Application.
  3. Set the Protocol to "OIDC".
  4. Set the Client Type to "Confidential".
  5. Scroll to Redirect URIs, type http://localhost:8083/api/auth/callback/beyondidentity
  6. Ensure "Token Endpoint Auth Method" is set to "Client Secret Basic".
  7. Click on the Authenticator Config tab, change the Configuration Type to Embedded and set the Invoke URL and Trusted Origin values to: http://localhost:8083
  8. Click Submit to save your changes.

Complete your example application's configuration​

Next, we'll copy the Application ID, Authenticator Configuration ID, App Client ID and App Secrets into the .env.local configuration.

From the Admin Console:

  1. From the navigation bar, click Applications, then select the application created on the step above.
  2. Copy the value for Application ID and paste it on the .env.local file under APPLICATION_ID.
  3. Copy the value for Client ID and paste it on the .env.local file under APP_CLIENT_ID.
  4. Copy the value for Client Secret and paste it on the .env.local file under APP_CLIENT_SECRET.

Next, copy the Authenticator Config ID into the config file:

  1. Click on the Authenticator Config tab, Copy the value for Authenticator Config ID and paste it on the .env.local file under AUTHENTICATOR_CONFIG_ID.

Learn more about Authenticator Configurations.

9. Running the example application​

The example application uses the Beyond Identity Embedded JavaScript SDK.

Start the backend and frontend​

Install dependencies

yarn install

and run with:

yarn start

A new browser tab should open automatically. If it doesn't, open a web browser and navigate to http://localhost:8083. The example application will now appear and allow you to create passkeys in the browser.

You can also see this example in action by visiting: https://acme.beyondidentity.com/

What's next?​

You can use the example application above to create one or more passkeys and log in with them.

Check out workflow guides for more detailed information starting with Account Setup.

info

Questions? Need a hand to get started?​

Join our Slack community.