Webservices with Authentik forward auth behind Nginx Proxy Manager and CORS

128 views Asked by At

I'm having some trouble setting up the Nginx Proxy Manager for proxy authentication through Authentik for my webservices without incurring in CORS.

I have a NPM host for my dashboard at dashboard.website.com (https://gethomepage.dev/latest/)

enter image description here

This is the custom configuration of the host

# Increase buffer size for large headers
# This is needed only if you get 'upstream sent too big header while reading response
# header from upstream' error when trying to access an application protected by goauthentik
proxy_buffers 8 16k;
proxy_buffer_size 32k;

# Make sure not to redirect traffic to a port 4443
port_in_redirect off;

location / {
    # Put your proxy_pass to your application here
    proxy_pass $forward_scheme://$server:$port;
    
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    
    # Set any other headers your application might need
    proxy_set_header Host $host;
    add_header "Access-Control-Allow-Origin" $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true';

    ##############################
    # authentik-specific config
    ##############################
    auth_request /outpost.goauthentik.io/auth/nginx;
    error_page 401 = @goauthentik_proxy_signin;
    auth_request_set $auth_cookie $upstream_http_set_cookie;
    add_header Set-Cookie $auth_cookie;

    # translate headers from the outposts back to the actual upstream
    auth_request_set $authentik_username $upstream_http_x_authentik_username;
    auth_request_set $authentik_groups $upstream_http_x_authentik_groups;
    auth_request_set $authentik_email $upstream_http_x_authentik_email;
    auth_request_set $authentik_name $upstream_http_x_authentik_name;
    auth_request_set $authentik_uid $upstream_http_x_authentik_uid;

    proxy_set_header X-authentik-username $authentik_username;
    proxy_set_header X-authentik-groups $authentik_groups;
    proxy_set_header X-authentik-email $authentik_email;
    proxy_set_header X-authentik-name $authentik_name;
    proxy_set_header X-authentik-uid $authentik_uid;
}

# all requests to /outpost.goauthentik.io must be accessible without authentication
location /outpost.goauthentik.io {
    proxy_pass http://192.168.1.139:5080/outpost.goauthentik.io;
    # ensure the host of this vserver matches your external URL you've configured
    # in authentik
    proxy_set_header Host $host;
    proxy_set_header X-Original-URL $scheme://$http_host$request_uri;
    add_header Set-Cookie $auth_cookie;
    auth_request_set $auth_cookie $upstream_http_set_cookie;

    proxy_pass_request_body off;
    proxy_set_header Content-Length "";
}

# Special location for when the /auth endpoint returns a 401,
# redirect to the /start URL which initiates SSO
location @goauthentik_proxy_signin {
    internal;
    add_header Set-Cookie $auth_cookie;
    return 302 /outpost.goauthentik.io/start?rd=$scheme://$http_host$request_uri;
    # For domain level, use the below error_page to redirect to your authentik server with the full redirect path
    # return 302 https://authentik.company/outpost.goauthentik.io/start?rd=$scheme://$http_host$request_uri;
}

In Authentik I have the dashboard application, the provider setup with default-authentication-flow and default-provider-authorization-implicit-consent (Authorize Application) for forward auth (domain level) on website.com, and the default authentik outpost for all my proxy providers.

First issue

When I go to dashboard.website.com it asks me for authentication in authentik, and then redirects me to the website, but I see a list of error messages in the console about CORS, and causing "API errors" from Homepage.

Access to fetch at 'https://auth.website.com/application/o/authorize/?client_id=xxxx&redirect_uri=https%3A%2F%2Fnginx.website.com%2Foutpost.goauthentik.io%2Fcallback%3FX-authentik-auth-callback%3Dtrue&response_type=code&scope=email+ak_proxy+openid+profile&state=xxxxxxx-k' (redirected from 'https://dashboard.website.com/api/hash') from origin 'https://dashboard.website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Second issue

Another problem I have is that sometimes when refreshing I get randomly redirected (passing through Authentik) to some of the URI that the webpage is trying to reach (for example to https://dashboard.website.com/api/bookmarks)

Third issue

When login through Authentik the login page tells me "Login to continue to nginx", but I want it to tell me the webservice I'm trying to reach. What can I do to fix this?

enter image description here

What am I doing wrong?

I already added

    add_header "Access-Control-Allow-Origin" $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true';

to the dashboard host but it's the first time I'm using Nginx and I'm not familiar with its configurations and how it should works. I presumed I had to add the Access-Control-Allow-Origin headers to my auth route but I didn't success in making it works without a 500 error.

0

There are 0 answers