Google Identity Services + Angular 18 + Popup/Redirect demo

Complete e2e demo of an integration with Sign in with Google using GSI and .NET 8.0 Web API (server-side)

Includes:

• Token validation server-side: await GoogleJsonWebSignature.ValidateAsync(credential);
• JwtSecurityTokenHandler & Claims managed server-side
• Identity managed in NgRx Signal Store + Session storage
• provideExperimentalZonelessChangeDetection Causes issues with [GSI_LOGGER]: Parameter client_id is not set correctly.

Designed as a skeleton project that can help bootstrap a new application with minimal changes

To handle the callback events from data-callback="handleResponse"

declare global {
  interface Window {
    handleResponse: (response: any) => void;
    ...
  }
}

window.handleResponse = (response: any) => { 
   ...
}

add the handlers to main.ts

and for Redirect URI https://localhost:7109/login-result server side:

app.MapPost("/login-result", [AllowAnonymous] async (HttpContext context) =>
{
    var form = await context.Request.ReadFormAsync();
    var result = await ValidateToken(form["credential"]!);

    context.Response.Redirect($"http://localhost:4200/login-result?jwt={result}");
});

Configuration Required (environment.ts / environment.development.ts)

google_client_id: '222000842037-qrfms25as5b680051uia4u6g3t60bgef.apps.googleusercontent.com'

Default Startup Page

The default page will provide you with the following two sign in options (Can't render both buttons in the same page):

and after succcessfully signing in