1

New to vue and am using vue-cli3 to scaffold a simple authentication app for auth0, auth0-plugin.surge.sh. My router.js module is:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Callback from "./views/Callback.vue";

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/callback",
      name: "callback",
      component: Callback
    }
  ]
});

// very basic "setup" of a global guard
router.beforeEach((to, from, next) => {
  // check if "to"-route is "callback" and allow access
  if (to.name == "callback") {
    next();
  } else if (router.app.$auth.isAuthenticated()) {
    // if authenticated allow access
    next();
  } else {
    // trigger auth0 login if not been authenticated before.
    // router.app refers to the root Vue instance the router was injected into
    router.app.$auth.login();
  }
});

export default router;

I am expecting when auth0 does callback to auth-plugin.surge.sh/callback I should get redirected to Callback component via vue-router. Instead I am getting a 404 error for the /callback page. The webpack dev server works as expected. The same error is occurring when using the serve npm package. Reading the Vue-cli deployment documentation it makes it seem very straightforward that deploying to surge.sh doesn't require any special measures. I have googled and scoured this site but find nothing that solves my problem. Any help much appreciated.

Alan
  • 1,067
  • 1
  • 23
  • 37

1 Answers1

0

ok so it turns out that you need a 200.html file as stated on surge's website Adding a 200.html page for the server as a catch all route when using vue-router. If anybody has experience with the serve npm package using the -s option I'd be interested in knowing how you got it working. Hope this helps someone else when deploying a SPA. A good write-up on Server configuration when deploying SPA's I found here

Alan
  • 1,067
  • 1
  • 23
  • 37
  • I stumbled on this and I was wondering if you got this working? I added the 200.html catch all page, but when my app after login goes to the callback route, it just returns the 200 html page. Any additional configuration needed to be done on surge side? – Angelo Sep 18 '19 at 04:15
  • Yes I got it working on surge.sh. See above link for working example. My repo is at https://github.com/alank90/auth-plugin if you want to look at the source. – Alan Sep 19 '19 at 13:56