How to integrate Okta SAML to Vue SPA

Questions
#1

My client provided a set of

  • Identity Provider Single Sign-On URL
  • Identity Provider Issuer
  • X.509 Certificate
  • DP metadata
    and required me to integrate Okta SAML 2.0 Auth to an existing Vue SPA

How the above information can help me to do the integration?

What should I note about and how to start with it?

Thanks!!!

#2

Hello Steve,
Please have a look at this post which covers the same topic. This should hopefully get you started.

Let us know if you have any questions.

#3

@erik
Thanks for your reply. However, the post that you provided is not enough to solve my problem. It’s too abstract. Could you please provide more detail about how to integrate Oka SAML to a SPA?

I mean the development document indicated that WEB APPLICATION(Server-side rendering, e.g, PHP, Go, .Net) is the ONLY platform in OKTA that support SAML protocol. However, SAP such as React, Angular and Vue are not included in the category of WEB APPLICATION. So, is there any way to integrate SAML to a SPA?

#4

Hi @steve,

SAML requires metadata exchange between the IDP (Okta) and the SP (your app) which is not possible if you don’t have a server side component.

The ideal way to enable SSO for your SPA if it doesn’t have a server side component is using Open ID Connect. Okta has an SDK for Vue JS : https://www.npmjs.com/package/@okta/okta-vue
You can find some samples here: https://github.com/okta/samples-js-vue

However, if you need to use SAML without server side component you could perhaps leverage features of your web server to add a SAML interceptor. You can find an example here: https://medium.com/@farasath/enable-single-sign-on-for-your-spas-hosted-on-apache-http-server-97b466067910

Thank you,
Raj