Azure Static Webb App restiction access for unauthenticated users

Question

I am trying to restrict access to certain pages of my app to authenticated users only. Hovewer, if anonymous user clicks page for first time it loads and after refresh user is getting 401 error.

Here is my react router

    <Switch>
        <Route path='/' exact component={Dashboard} />
        <Route path='/records' component={Records} />
        <Route path='/livecam' component={LiveCamera} />
        <Route path='/debug' component={Debug} />
        <Route path='/settings' component={Settings} />
    </Switch>

And my Azure Static web app routes:

{
"routes": [
    {
        "route": "/records*",
        "allowedRoles": ["authenticated"]
    },
    {
        "route": "/livecam*",
        "allowedRoles": ["authenticated"]
    },
    {
        "route": "/settings",
        "allowedRoles": ["admin"]
    }
],
"navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/assets/*.{png,jpg,jpeg,gif,bmp}", "/static/css/*"]
},
"mimeTypes": {
    ".json": "text/json"
},
"responseOverrides": {
    "400": {
        "rewrite": "/invalid-invitation-error.html"
    }
}

}

Thanks!

Answer 1

I found solution. To force server-side routing it is required to add forceRefresh parameter to react router.

<BrowserRouter forceRefresh={true}>