Blog

This is a two part series that will walk you step by step how to integrate Okta OIDC authentication for Single Page Applications. This 2 part series will cover:

• Part 1: Create a OIDC SPA Application in Okta
• Part 2: Integrate the Okta application with any SPA that runs on Javascript, Angular, React, Vue

By the end of this tutorial you will be able to successfully setup Okta OIDC authentication for any SPA that runs on Angular, React, Vue

Create an account in developer.okta.com. If the application integration is for an Enterprise application then we do not need to create a new developer account. We can use the same Okta developer account created for the enterprise.

Click on Applications in the left menu and Create App Integration

Select OIDC – OpenID Connect option. This tutorial will cover only single sign on authentication without login widget.

Select Single-Page Application option and Next

• Provide an application name and logo. Select Implicit(hybrid option). The implicit option will provide both id token and access token.
• Provide a callback uri in the sign-in redirect uri option. There can be multiple redirect uri options added. This is particularly useful when you have different application environments like Development, Test and Production where each uri can be specific to each environment.
• Provide a sign out redirect uri for signing out of the application if you are implementing log out in your application. This is optional.
• You can skip on Group Assignments for now if you are planning to manually assign access for this application. Select Allow Everyone in your organization to access if the application access is for everyone.

• Click on Save

The application is successfully created. Please note the client ID which we will be using to integrate with the SPA application.

Use Assignments to assign this app to People/Groups

In the next tutorial we will integrate this new application with the code.