After data-login_uri redirection from GSI script that redirect on POST backend endpoint, how to redirect to frontend with token

Question

My stack on this project is Reactjs frontend + Asp.net core backend

I have integrated in my React frontend the google button API to allow user to logged with their google account. And in this script , there is a parameter data-login_uri that's trigger after the user logged-in via google window and redirect to my ASP.NET CORE backend endpoint.

On this endpoint, that is a controller endpoint, Google send the tokenid that will be used to verify the authenticity of the user.

The problem is that from this endpoint , i want to redirect to another endpoint that /api/login that is my backend endpoint to just /login.

That is the GSI script integrated on my login.jsx page.

<div id="g_id_onload"
     data-client_id="XXX"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="https://localhost:44462/api/login"
     data-auto_prompt="false">
</div>
<div className="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     caca-zizi="sdfsdf"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

data-login_uri make the redirection to my ASP.Net core controller.

And here , my ASP.NET controller that receivee that tokenid from google, treat it and send back a generated token for the user

[ApiController]
[Route("api/")]
public class GoogleAuthController : Controller
{
    [HttpPost]
    [Route("login")]
    public async Task<StatusCodeResult> ReturnFromApi()
    {
        var tokenid  = HttpContext.Request.Form["credential"];
        GoogleJsonWebSignature.Payload payload =  await GoogleJsonWebSignature.ValidateAsync(tokenid);
        if (!payload.Audience.Equals(_config["ClientId"]))
               return BadRequest();
        ...

         return Ok(token);
     }
}

But with this, the return OK is still on the "/api/login" URL , so on my backend and if i use redirect("/login") i have find no method to add and object with the redirect method.

Answer 1

After 2 month , i think that i figure out why this wasn't possible.

React/Angular/Vue.js and other modern web framework are client-side rendering framework. That means web page rendering is managed by the browser.

In Client-side rendering framework, the server part is an API that delivers JSON or XML to the client, and isn’t involved in HTML rendering.

And the script is not making an api call to the backend but redirects us to the API backend url that cannot manage web page for these framework, so we are stuck.

My personal opinion is that the GSI POST redirection is for server-side rendering framework that can manage webpage from the server. (for example Blazor - ASP.NET)

So unfortunately, i think that we have to manage token directely from the browser (until google develop another solution).

Differences server and client side rendering