Skip to main content
Version: v1

Getting Started (Angular)

Last updated on
tip

This guide is specifically for the Angular version of our getting started app. If you're interested in the React 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-angular.git

Change directory into the repo:

cd getting-started-angular

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. Set your Region​

Set the REGION variable according to where your account was created: 

export REGION="us" | "eu"
set REGION="us" | "eu"

5. 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. Run the following command to configure the TENANT_ID variable:

export TENANT_ID=<tenant_id>
set TENANT_ID=<tenant_id>

6. 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. Run the following command to set the API_TOKEN variable: 
export API_TOKEN=<api-token>
set API_TOKEN=<api-token>

7. 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 Realm ID from the response and set an environment variable for it:
export REALM_ID=<realm-id>
set REALM_ID=<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:8082/auth/callback. OIDC auth callbacks are handled on the backend and 8082 is the port where the backend is served on.
  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 to http://localhost:8082. Angular handles routing on the backend and 8082 is the port where the backend is served on.
  8. In the same Authenticator Config tab, set the Trusted Origin to: http://localhost:8083. API requests from the SDK are made from the frontend, so we need to specify port 8083 since that is the port where the frontend is served on.
  9. Click Submit to save your changes.

Complete your example application's configuration​

Next, we'll set the Application ID, Authenticator Configuration ID, App Client ID and App Secrets variables in your environment.

From the Admin Console:

  1. From the navigation bar, click Applications, then select the application created on the step above.
  2. Copy the Application ID from the response and set an environment variable:
export APPLICATION_ID=<application-id>
set APPLICATION_ID=<application-id>
  1. Copy the Client ID from the response and set an environment variable:
export APP_CLIENT_ID=<app-client-id>
set APP_CLIENT_ID=<app-client-id>
  1. Copy the Client Secret from the response and set an environment variable:
export APP_CLIENT_SECRET=<app-client-secret>
set APP_CLIENT_SECRET=<app-client-secret>

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

  1. Click on the Authenticator Config tab, copy the Authenticator Configuration ID, and set an environment variable for it:
export AUTH_CONFIG_ID=<authenticator-config-id>
set AUTH_CONFIG_ID=<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

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.