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!

Can you clarify exactly what "anonymous user clicks page for first time it loads"? Like they start from `"/"` and click a link to navigate to a specific page? *Then* after a page reload there's a 401 response? — Drew Reese, Aug 12 '22 at 16:10
Users start with route "/". Click "/records" - it works Refresh page "/records" it fails with 401 My expectation is that once user click link to /records it will fail immediatly. As I undestrand issue is that routing is happening on client side instead of server side, that`s why first attempt now working as expected. — Sergiy Kostenko, Aug 16 '22 at 18:56
Anything here in the [CRA deployments](https://create-react-app.dev/docs/deployment/#azure) docs for Azure helpful? — Drew Reese, Aug 16 '22 at 19:10

score 0 · Accepted Answer · answered Aug 24 '22 at 11:10

0

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

<BrowserRouter forceRefresh={true}>

answered Aug 24 '22 at 11:10

Sergiy Kostenko

273
1
2
11

Azure Static Webb App restiction access for unauthenticated users

1 Answers1