(Angular + Django REST) Suppress Browser Auth Dialog?

Published

I use JWT Authentication for my Angular + Django REST project. Recently the browser keeps showing the Basic auth dialog whenever the token expires. I heard that by removing/changing the WWW-Authenticate header can suppress the dialog but I could not get it to work.

On Django, I have tried to use a custom Response object to force the response header:

def BaseResponse(data, status=None, template_name=None, headers=None, content_type=None):
    response = Response(data, status, template_name, {'WWW-Authenticate': 'xBasic'}, content_type=None)
    response['WWW-Authenticate'] = 'xBasic'
    return response

Also I have tried to use a middleware:

AuthHeaderMiddleware.py

class AuthHeaderMiddleware(object):
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        return self.get_response(request)

    def process_response(self, request, response):
        if response.status == 401:
            r = Response(response.data, response.status, response.template_name, {'WWW-Authenticate': 'xBasic'}, response.content_type)
        return response

Middleware settings in settings.py:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    'corsheaders.middleware.CorsMiddleware',

    'middleware.AuthHeaderMiddleware',
]

The problem is the WWW-Authenticate header remains Basic for all 401 responses (but ‘xBasic’ for other statuses).

I use the djangorestframework-simplejwt package in Django.

On Angular, I have tried to force a blank token with the Bearer declaration for the Authorization header:

add_header(request, token=null) {
    var r = request.clone({ setHeaders: { 
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${request.withCredentials ? token : ''}`
     } });
    return r;
}

However if withCredentials is false (i.e. token is blank), Django always returns a 401 status.

Am I doing anything wrong or are there alternative methods to suppress the auth dialog?

Source: Angular Questions

Published
Categorized as angular, authentication, django, http, jwt Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq