Issue with Submitting Vue.js SPA to OIN: No Option for PKCE Flow and SPA with Vue Application Type

Hello,

I am currently facing an issue while attempting to submit my Vue.js Single Page Application (SPA) to the Okta Integration Network (OIN). My application is built using Vue and has been configured with OIDC, utilizing the PKCE (Proof Key for Code Exchange) flow for secure authentication. This configuration works perfectly in my development environment.

However, during the OIN submission process, I encountered the following challenges:

  1. There is no option to select a Vue SPA or any SPA-specific application type within the OIN wizard.
  2. The OIN wizard does not provide an option to select or configure the PKCE flow.

Due to the absence of these options, I am unable to submit my application with the correct configuration. Specifically, I am receiving an error stating that the client is invalid when attempting to use the same OIDC configuration that works in my development environment.

Is there a recommended way to configure a Vue.js SPA using the PKCE flow for OIN submission, or are there alternative steps I should follow? Any guidance or support on how to correctly submit my SPA to the OIN would be greatly appreciated.

Thank you!

Hi,

You can’t publish integrations with the following Okta features in the OIN catalog:

  • SPA apps: SPA apps aren’t accepted in the OIN Wizard. You can only submit cloud-based SaaS apps (web apps with a back end) in the OIN Wizard.
1 Like

Thank you for your response. Could you please provide guidance on how I can create an OIN integration for my SPA application, which uses Vue for the front end? Should I proceed with the web application integration instead?

Any assistance would be greatly appreciated, as I have already spent considerable time on this issue.

Hi there @shubham_27,

Welcome to the community!

Can you tell me about your app? I’m a dev advocate supporting OIN submission developers like yourself, so I’d love to hear more about it. Feel free to DM me if you don’t want to provide public details. :slight_smile:

You may want to consider using the Backend for Frontend (BFF) pattern for your app. In this pattern, you’ll retain your Vue frontend, but delegate authentication to a backend service that acts like an intermediary for your application system. By following the BFF pattern, you’ll create a web application type of Okta app, which is supported by the OIN.

You can read more about the BFF pattern in this post

Give us a holler if you run into any troubles or questions!

Hi,

Thank you for your response, it helped me a lot.

I have now made the necessary changes to my application and switched the Okta OIDC app type from SPA to WEB APP. The SP-initiated flow is working fine, and the IDP flow also functions properly on my local machine. However, when I attempt to publish my app on OIN, the testing for the IDP flow fails, even though the SP flow passes successfully. The error logs aren’t providing a clear reason for the failure, despite the IDP flow working without issues locally.

Could you please provide any insights or suggestions for resolving this issue?

Thank you!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Hello, I’m Poul with the Developer Support Team.

I just wanted to circle back as we were able to get this resolved, it was related to a failed /authorize call being made when testing the OIN submission. Once the /authorize call was successfully made, it had passed the tests for the OIN submission.

1 Like