Vue authguard 404 on anything but home page

I have a vue app deployed statically (azure static web apps) using social login. Everything works fine locally - I have an authguard applied to home (/) and a /checkin route.

Once deployed however, I can browse to /checkin from the home page fine but if I refresh that page (or the browser “wakes up” on mobile) I get a 404 not found. (I can refresh home without a problem)

I did read using the dev keys may cause this so I’ve switched to a “real” facebook app with id and secret but encounter the same problem.

auth guard:

import { getInstance } from "./index";

export const authGuard = (to, from, next) => {
  const authService = getInstance();

  const fn = () => {
    // If the user is authenticated, continue with the route
    if (authService.isAuthenticated) {
      return next();
    }

    // Otherwise, log in
    authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } });
  };

  // If loading has already finished, check the auth state using `fn()`
  if (!authService.loading) {
    return fn();
  }

  // Watch for the loading property to change before checking isAuthenticated
  authService.$watch("loading", (loading) => {
    if (loading === false) {
      return fn();
    }
  });
};

Routes

{

    path: "/",

    name: "Home",

    component: Home,

    beforeEnter: authGuard,

  },

  {

    path: "/checkin",

    name: "Checkin",

    component: HelloWorld,

    beforeEnter: authGuard,

  },

The fact it works locally makes me wonder if I need to add some route config to the azure host but I’m not sure what I’d need to add?

Many thanks