CORS issue when redirect to Google OAuth endpoint

Question

We are trying to do Google Auth using React as a client and .NET as backend (identity without UI).

First, we try to access "external-login" endpoint on backend from frontend. But then CORS issue arise.

        [Route("external-login")]
        public async Task<IActionResult> ExternalLogin(string provider, string returnUrl, CancellationToken cancellationToken)
        {
            var command = new GenerateExternalAuthPropertiesCommand(provider, returnUrl);

            var properties = await _mediator.Send(command, cancellationToken);
            return Challenge(properties, provider);
        }

So frontend(domain1.com) calls backend(domain2.com), the backend does redirection to Google OAuth endpoint. Actually, it tries to do OPTIONS request to google endpoint and for sure it failed.

Then we decided to make the same origin(scheme, domain and port) through the Nginx. So let's say we have a server, there is domain.com which points to Nginx.

We set

domain.com/auth/front as a reverse_proxy pass for frontend container

domain.com/auth/back as a reverse_proxy pass for backend container.

it works: we can access the backend endpoint via domain.com/auth/back/test and frontend endpoints via domain.com/auth/front/test.

Now OPTIONS request disappeared, but still, we face CORS issue when we access Google endpoint.

Any ideas, guys?

Answer 1

So the problem was simple. After discussing it with colleagues it turned out that the XHR request cannot do that. To make this work - we need to change the XHR call to a simple tag. Why it didn't work? - Because of security, XHR requests shouldn't be allowed to do such requests with redirects so CORS blocked it. With the form, it will redirect the user which gives visibility and the Antiforgery token gives security from a malicious js execution standpoint.