Best Practice for Avoiding Browser 401 Auth popup Prompt?

[nickatpwell]

So I’m working on the web side of a mobile + web app and I’m running into an issue where a request to sync gateway makes the browser do its Basic Authorization prompt dialog if there isn’t a valid session.

What I wanted to do was have the app make a call (via swagger) to whatever endpoint the user needs for that part of the app, and if it throws back 401 unauthorized, update the state in the app to bring the user back to the login page clear the old cookie etc .

How do I do web authentication without running into this weird browser popup?

Put sync gateway behind nginx proxy and tweak the responses if its 401 so that the browser won’t do the popup?

Maybe there’s some way to disable the basic auth headers in config file?

I’m running react, redux, swagger, and the sync gateway is on different host so requests are using CORS.

I’ve found a similar topic but not really a solution

Is there a way to disable Sync Gateway basic auth requests in browser?

I recently found out we had the Guest user enabled in our development and production instances. I disabled it since I don’t want a bot being able to fill our db with random documents. I now have the problem that sync gateway sends a basic auth 401 response if a user tries to do something on our site and they are not logged in. It is a rare occurrence (e.g. a request takes a long time to get sent and they happen to click Log Out before it is sent) but I don’t want users to ever see a confusing ba…

If I enable guest user like in their solution, I’m still not sure how to programmatically determine whether the user needs to log back in.

How do you guys normally handle old/non-existent sync gateway sessions in web app?

Thanks!

[jens]

How are you sending the request? With an XHR?

[nickatpwell]

Yep XHR, I’m using swagger-client and the sync gateway public endpoint swagger spec.

One thing I think I’m going to try this morning is putting the sync gateway behind a nginx reverse proxy a-la this guide

https://developer.couchbase.com/documentation/mobile/current/guides/sync-gateway/nginx/index.html

And then filter out the WWW-Authentication: header that is triggering the browser to do prompt the user for credentials.

I don’t think that I’m using any basic auth in my app but we’ll see if everything breaks soon.

[jens]

It seems wrong to me that the browser would pop up a password alert when an XHR gets a 401, but there are probably complicated reasons for it.

I know that CouchDB deliberately breaks its 401 responses, by omitting the required WWW-Authentication: header, for exactly this reason. We didn’t do that in SG. But as you point out, you can use a proxy to do the same workaround.

[nickatpwell]

Alright that seems to have done it. I’ve been using the sync gateway docker build and just built on top of that a bit to include nginx so that I could add the all important

proxy_hide_header WWW-Authenticate;

Now my app can properly catch 401 status responses without the browser goin’ crazy. My mobile side seems to be unaffected

This feels weird that I have to rewrite responses from sync gateway. Is there a more ‘proper’ way that I’m supposed to be handing interactions between a web app and sync gateway?