How to Create an OIDC App on Okta

This page is designed for authors of the Okta developer blog. However, these snippets of code might be useful for anyone wanting to set up Okta OIDC apps.

Table of Contents

• Use the Admin Console to Register Your App
• Blog Post Syntax
• Configuration Options
• Examples
  • Angular
  • React
  • Vue
  • Node + Express
  • Ionic
  • React Native
  • Okta Spring Boot Starter
  • ASP.NET Core
  • Service
  • Maven
  • OIDC Debugger
  • Custom Authorization Server

Use the Admin Console to Register Your App

To describe how to set up a new application on Okta manually, you can use integrator.md, maven.md, and oidcdebugger.md includes.

These will render step-by-step Admin Console instructions for manual setup. You can optionally mention the Okta CLI Client (or Okta Maven Plugin) as alternatives for automation. Screenshots are discouraged because they’re hard to keep up-to-date.

Blog Post Syntax

The basic syntax you will need to use manual setup instructions in your post is:

{% include setup/integrator.md type="spa" loginRedirectUri="http://localhost:3000/callback" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Single-Page Application as the application type, then click Next

5. Enter an app integration name

6. In the Grant type section, ensure that both Authorization Code and Refresh Token are selected
7. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:3000/callback
   • Sign-out redirect URIs: http://localhost:3000
8. In the Controlled access section, select the appropriate access level
9. Click Save

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

Configuration Options

Supported values for type: spa, web, native, and service

Other parameters you can pass in:

Examples

This section shows examples for different types of apps and frameworks.

• Angular, React, Vue
• Node + Express
• Ionic
• React Native
• Spring Boot
• ASP.NET Core
• Service

Angular

{% include setup/integrator.md type="spa" framework="Angular" loginRedirectUri="http://localhost:4200/callback" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Single-Page Application as the application type, then click Next

5. Enter an app integration name

6. In the Grant type section, ensure that both Authorization Code and Refresh Token are selected
7. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:4200/callback
   • Sign-out redirect URIs: http://localhost:4200
8. In the Controlled access section, select the appropriate access level
9. Click Save

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

React

{% include setup/integrator.md type="spa" framework="React" loginRedirectUri="http://localhost:3000/callback" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Single-Page Application as the application type, then click Next

5. Enter an app integration name

6. In the Grant type section, ensure that both Authorization Code and Refresh Token are selected
7. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:3000/callback
   • Sign-out redirect URIs: http://localhost:3000
8. In the Controlled access section, select the appropriate access level
9. Click Save

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

Vue

{% include setup/integrator.md type="spa" framework="Vue"
   loginRedirectUri="http://localhost:8080/callback" signup="false" %}

This will render the following HTML:

Sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Single-Page Application as the application type, then click Next

5. Enter an app integration name

6. In the Grant type section, ensure that both Authorization Code and Refresh Token are selected
7. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:8080/callback
   • Sign-out redirect URIs: http://localhost:8080
8. In the Controlled access section, select the appropriate access level
9. Click Save

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

Node + Express

{% include setup/integrator.md type="web" loginRedirectUri="http://localhost:8080/authorization-code/callback" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Web Application as the application type, then click Next

5. Enter an app integration name

6. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:8080/authorization-code/callback
   • Sign-out redirect URIs: http://localhost:8080
7. In the Controlled access section, select the appropriate access level
8. Click Save

OKTA_OAUTH2_ISSUER="https://dev-133337.okta.com/oauth2/default"
OKTA_OAUTH2_CLIENT_ID="0oab8eb55Kb9jdMIr5d6"
OKTA_OAUTH2_CLIENT_SECRET="NEVER-SHOW-SECRETS"

Ionic

{% include setup/integrator.md type="native" 
   loginRedirectUri="[http://localhost:8100/callback,com.okta.dev-133337:/callback]" 
   logoutRedirectUri="[http://localhost:8100/logout,com.okta.dev-133337:/logout]" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Native Application as the application type, then click Next

5. Enter an app integration name

6. Configure the redirect URIs:
   • Redirect URI: [http://localhost:8100/callback,com.okta.dev-133337:/callback]
   • Post Logout Redirect URI: [http://localhost:8100/logout,com.okta.dev-133337:/logout] (where dev-133337.okta.com is your Okta domain name). Your domain name is reversed to provide a unique scheme to open your app on a device.
7. In the Controlled access section, select the appropriate access level
8. Click Save

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

React Native

{% include setup/integrator.md type="native" 
   loginRedirectUri="com.okta.dev-133337:/callback" 
   logoutRedirectUri="com.okta.dev-133337:/callback" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Native Application as the application type, then click Next

5. Enter an app integration name

6. Configure the redirect URIs:
   • Use com.okta.dev-133337:/callback for both the Redirect URI and Post Logout Redirect URI (where dev-133337.okta.com is your Okta domain name). Your domain name is reversed to provide a unique scheme to open your app on a device.
7. In the Controlled access section, select the appropriate access level
8. Click Save

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6

Okta Spring Boot Starter

{% include setup/integrator.md type="web" framework="Okta Spring Boot Starter" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Web Application as the application type, then click Next

5. Enter an app integration name

6. Configure the redirect URIs:
   • Accept the default redirect URI values:
   • Sign-in redirect URIs: http://localhost:8080/login/oauth2/code/okta
   • Sign-out redirect URIs: http://localhost:8080
7. In the Controlled access section, select the appropriate access level
8. Click Save

okta.oauth2.issuer=https://dev-133337.okta.com/oauth2/default
okta.oauth2.client-id=0oab8eb55Kb9jdMIr5d6
okta.oauth2.client-secret=NEVER-SHOW-SECRETS

ASP.NET Core

{% capture note %}
> Note that the TCP port 5001 must be the same used by the application. You can see it in the messages displayed in the terminal when you start the application with **`dotnet run`**.
{% endcapture %}
{% include setup/integrator.md type="web" note=note framework="ASP.NET Core"
   loginRedirectUri="http://localhost:5001/authorization-code/callback"
   logoutRedirectUri="http://localhost:5001/signout/callback" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Web Application as the application type, then click Next

5. Enter an app integration name

6. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:5001/authorization-code/callback
   • Sign-out redirect URIs: http://localhost:5001/signout/callback
7. In the Controlled access section, select the appropriate access level
8. Click Save

Note that the TCP port 5001 must be the same used by the application. You can see it in the messages displayed in the terminal when you start the application with dotnet run.

OKTA_OAUTH2_ISSUER="https://dev-133337.okta.com/oauth2/default"
OKTA_OAUTH2_CLIENT_ID="0oab8eb55Kb9jdMIr5d6"
OKTA_OAUTH2_CLIENT_SECRET="NEVER-SHOW-SECRETS"

Service

{% include setup/integrator.md type="service" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select API Services as the application type, then click Next

5. Enter an app integration name

6. In the Controlled access section, select the appropriate access level
7. Click Save

OKTA_OAUTH2_ISSUER="https://dev-133337.okta.com/oauth2/default"
OKTA_OAUTH2_CLIENT_ID="0oab8eb55Kb9jdMIr5d6"
OKTA_OAUTH2_CLIENT_SECRET="NEVER-SHOW-SECRETS"

Maven

{% include setup/maven.md %}

This will render the following HTML:

Run the Okta Maven Plugin from your app’s folder:

./mvnw com.okta:okta-maven-plugin:register

Answer a few questions (name, email, and company), and it will generate a new Okta developer account for you. If you already have an Okta account registered, use login instead of register.

Then, configure your Spring Boot application to use Okta for authentication:

./mvnw com.okta:okta-maven-plugin:spring-boot

This will set up a new OIDC application for you and write your Okta settings to your src/main/resources/application.properties file.

NOTE: You can also use the Okta Admin Console to create your app. See Create a Spring Boot App for more information.

OIDC Debugger

{% include setup/oidcdebugger.md %}

This will render the following HTML:

An easy way to get an access token is to generate one using OpenID Connect Debugger. Open the site in a new window or tab. Fill in your client ID, and use https://{yourOktaDomain}/oauth2/default/v1/authorize for the Authorize URI. Select code for the response type and Use PKCE.

Custom Authorization Server

When you need to use a custom authorization server instead of the default one, add the customAuthServer parameter:

{% include setup/integrator.md type="spa" framework="React" 
   loginRedirectUri="http://localhost:3000/callback" 
   customAuthServer="default" %}

This will render the following HTML:

Before you begin, you’ll need an Okta Integrator Free Plan account. To get one, sign up for an Integrator account. Once you have an account, sign in to your Integrator account. Next, in the Admin Console:

1. Go to Applications > Applications
2. Click Create App Integration
3. Select OIDC - OpenID Connect as the sign-in method
4. Select Single-Page Application as the application type, then click Next

5. Enter an app integration name

6. In the Grant type section, ensure that both Authorization Code and Refresh Token are selected
7. Configure the redirect URIs:
   • Sign-in redirect URIs: http://localhost:3000/callback
   • Sign-out redirect URIs: http://localhost:3000
8. In the Controlled access section, select the appropriate access level
9. Click Save

NOTE: When using a custom authorization server, you need to set up authorization policies. Complete these additional steps:

1. In the Admin Console, go to Security > API > Authorization Servers
2. Select your custom authorization server (default)
3. On the Access Policies tab, ensure you have at least one policy:
   • If no policies exist, click Add New Access Policy
   • Give it a name like “Default Policy”
   • Set Assign to to “All clients”
   • Click Create Policy
4. For your policy, ensure you have at least one rule:
   • Click Add Rule if no rules exist

   • Give it a name like “Default Rule”

   • Set Grant type is to “Authorization Code”

   • Set User is to “Any user assigned the app”
   • Set Scopes requested to “Any scopes”
   • Click Create Rule

For more details, see the Custom Authorization Server documentation.

Issuer:    https://dev-133337.okta.com/oauth2/default
Client ID: 0oab8eb55Kb9jdMIr5d6