# How to integrate Okta SAML to Vue SPA

**URL:** <https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650>\
**Category:** SAML\
**Created:** [January 27, 2021, 4:21pm UTC](https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650 "2021-01-27T16:21:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@steve](https://devforum.okta.com/u/steve)\
**Post date:** [January 27, 2021, 4:21pm UTC](https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650/1 "2021-01-27T16:21:30Z")

</div>

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!!!

---

<div class="post-metadata">

**Author:** ![erik](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@erik](https://devforum.okta.com/u/erik)\
**Post date:** [January 28, 2021, 12:30am UTC](https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650/2 "2021-01-28T00:30:54Z")

</div>

Hello Steve,  
Please have a look at this [post](https://devforum.okta.com/t/single-application-can-support-both-spa-and-saml/11213/3) which covers the same topic. This should hopefully get you started.

Let us know if you have any questions.

---

<div class="post-metadata">

**Author:** ![steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@steve](https://devforum.okta.com/u/steve)\
**Post date:** [January 28, 2021, 7:16am UTC](https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650/3 "2021-01-28T07:16:05Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![rajnadimpalli](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rajnadimpalli](https://devforum.okta.com/u/rajnadimpalli)\
**Post date:** [January 28, 2021, 10:55am UTC](https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650/4 "2021-01-28T10:55:22Z")

</div>

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](https://www.npmjs.com/package/@okta/okta-vue)  
You can find some samples here: [https://github.com/okta/samples-js-vue](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](https://medium.com/@farasath/enable-single-sign-on-for-your-spas-hosted-on-apache-http-server-97b466067910)

Thank you,  
Raj

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [January 26, 2024, 6:26pm UTC](https://devforum.okta.com/t/how-to-integrate-okta-saml-to-vue-spa/12650/5 "2024-01-26T18:26:22Z")

</div>

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