Deploy Vue.js Okta Authentication app on Netlify

Question

I recently built a Vue.js application with Okta authentication. I am attempting to deploy this application on Netlify. After setting up a new project in Netlify, I imported the Vue.js application into the Netlify project from GitHub. I reconfigured the router in the application so that redirect_uri in the Okta initializer reflects the new Netlify URL:

import Auth from "@okta/okta-vue";

Vue.use(Auth, {
  issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
  client_id: "xxxxxxxxxxxxxxxxxxxx",
  redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
  scope: "openid profile email"
});

After deploying the application and clicking the login button, I should be redirected to the default Okta login page. However, I am instead redirected to a page that says "page not found: Looks like you've followed a broken link or entered a URL that doesn't exist on this site."

I even made sure to whitelist that URL in my Okta dashboard. Any idea why Netlify doesn't recognize the new redirect_uri? Thanks!

Matt Raible · Accepted Answer · 2020-01-22 17:33:45Z

5

Since you're deploying a SPA, you need to route all routes to your index.html and let Vue handle them.

According to this article, you need to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate:

/*    /index.html   200

For more info, see Netlify's docs.

answered Jan 22, 2020 at 17:33

Matt Raible

8,70910 gold badges71 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JS_is_awesome18 Over a year ago

Hi Matt, thanks. This solution worked in enabling a redirect to "xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback". However, I am now getting an error message in the console that the redirected URL is blocked by CORS policy. I understand what this policy means, but am not sure why it is blocked. I whitelisted this URL in the Okta dashboard. Will I need to add some kind of 'Access-Control-Allow-Origin' header somewhere in my app to override the block?

JS_is_awesome18 Over a year ago

I tried just now to add a _headers file in the project root, with the line /* Access-Control-Allow-Origin: *, but that still did not work. Am I on the right track though?

JS_is_awesome18 Over a year ago

Would you mind taking a look at another Vue.js/Okta issue? stackoverflow.com/questions/60582551/…

JS_is_awesome18 · Accepted Answer · 2020-01-22 18:39:54Z

3

I solved the CORS issue. In the Okta Dashboard, I added the redirecting URL as an original URL under API > Trusted Origins. I selected Add Origin to specify the base URL of the website, then selected CORS. See : https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end

answered Jan 22, 2020 at 18:39

JS_is_awesome18

1,7778 gold badges41 silver badges80 bronze badges

Collectives™ on Stack Overflow

Deploy Vue.js Okta Authentication app on Netlify

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related