Authentication Made Easy with IdentitySuite

If you're building a Single Page Application (SPA) with Angular, React, or Blazor WebAssembly, securing it properly is non-negotiable. The OAuth 2.0 Authorization Code flow with PKCE (Proof Key for Code Exchange) is the gold standard for SPAs—preventing attacks like token theft while keeping user data safe.

But let's be honest: setting up an OpenID Connect (OIDC) server can be daunting. Between configuring endpoints, managing keys, and ensuring compliance, it's easy to get lost in complexity.

That's where IdentitySuite comes in.

With IdentitySuite, you can deploy a production-ready OIDC server in minutes—no PhD in security required. In this guide, we'll walk you through:

1. Why the Authorization Code + PKCE flow is the only secure choice for SPAs.
2. Setting up IdentitySuite as your OIDC server with minimal configuration.
3. Configuring SPA clients (Angular, React, Blazor WebAssembly) to authenticate seamlessly.
4. Best practices to avoid common security pitfalls.

By the end, you'll have a fully authenticated SPA, minimal boilerplate code, and more time to focus on what matters: building great features. Let's dive in!

1. Why Authorization Code + PKCE is the Only Secure Choice for SPAs

"The Implicit Flow Trap (and Why You Should Avoid It)"

Why PKCE is Essential for Modern SPAs:

• Mitigates authorization code interception attacks - Even if attackers steal the authorization code, they can't exchange it for tokens without the code verifier.
• No client secrets required - Critical for SPAs where all frontend code is publicly accessible.
• Compliant with modern standards - Required by OAuth 2.1, FAPI (Financial API), and recommended by OWASP.
• Works seamlessly with mobile apps - Perfect for hybrid scenarios where you need both web and mobile clients.

The PKCE Flow in Action:

PKCE flow: Your SPA generates a code challenge, exchanges it securely, and receives tokens without exposing secrets.

2. Setting Up IdentitySuite as Your OIDC Server

"From Zero to Production-Ready OIDC in 5 Minutes"

IdentitySuite eliminates the complexity of manual OIDC configuration. Built on top of Openiddict and ASP.NET Core Identity, it provides enterprise-grade security with developer-friendly simplicity.

Step 1: Create Your Project

dotnet new blazor -o IdentitySuite --empty --interactivity Server --all-interactive

Step 2: Install IdentitySuite

dotnet add package IdentitySuite
# Choose your database provider:
dotnet add package IdentitySuite.EntityFrameworkCore.SqlServer
# OR PostgreSQL: dotnet add package IdentitySuite.EntityFrameworkCore.PostgreSql
# OR MySQL: dotnet add package IdentitySuite.EntityFrameworkCore.MySql
            

Step 3: Configure Your Database

Edit the configuration file in the IdentitySuite directory:

"ConnectionStrings": {
    "SqlServerConnection": "Server=(localdb)\\mssqllocaldb;Database=IdentitySuiteDb;Trusted_Connection=true;"
  },
  "Initialize": true                
            

Step 4: Minimal Program.cs Setup

using IdentitySuite;

var builder = WebApplication.CreateBuilder(args);

// 1. Registers all required services (authentication, authorization, etc.)
builder.AddIdentitySuiteServices();

var app = builder.Build();

// 2. Creates/updates the database based on configuration
await app.SetupIdentitySuiteDbAsync();

// 3. Enables all runtime services (authentication, routing, etc.)
app.UseIdentitySuiteServices();

await app.RunAsync();
            

Step 5: Run Your OIDC Server

dotnet run

3. Configuring SPA Clients for OIDC Authentication

"Connect Your Angular, React & Blazor Apps in Minutes"

Now that your IdentitySuite OIDC server is running, let's configure your SPA clients to authenticate with it. We'll cover the essential setup for each popular framework with minimal, production-ready code.

3.1 Blazor WebAssembly Configuration

Install the Authentication Package

Configure Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Oidc", options.ProviderOptions);
    options.ProviderOptions.ResponseType = "code";
});

await builder.Build().RunAsync();
            

Add wwwroot\appsettings.json

{
  "Oidc": {
    "Authority": "https://localhost:5000/", //your IdentitySuite address
    "ClientId": "blazor",
    "RedirectUri": "https://localhost:5010/authentication/login-callback",  //adjust the port with the number of your Blazor Wasm
    "PostLogoutRedirectUri": "https://localhost:5010/authentication/logout-callback", //adjust the port with the number of your Blazor Wasm
    "ResponseType": "code",
    "DefaultScopes": [ "openid", "profile", "email" ]
  }
}
            

Add Authentication to App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>
            

3.2 Angular Configuration

Install OIDC Client Library

Add environment.ts

export const environment = {
  production: false,
  oauthConfig: {
    issuer: 'https://localhost:5000/', //your IdentitySuite address
    clientId: 'angular',
    redirectUri: window.location.origin,
    responseType: 'code',
    scope: 'openid profile email',
    showDebugInformation: true
  }
};
            

Configure app.module.ts

import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideBrowserGlobalErrorListeners(),
    importProvidersFrom(HttpClientModule),
    importProvidersFrom(OAuthModule.forRoot())
  ]
};
            

Setup Authentication Service

import { Injectable } from '@angular/core';
import { OAuthService, AuthConfig } from 'angular-oauth2-oidc';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oauthService: OAuthService) {
    this.configure();
  }
  private configure() {
    this.oauthService.configure(environment.oauthConfig as AuthConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
  login() {
    this.oauthService.initLoginFlow();
  }
  logout() {
    this.oauthService.logOut();
  }
  isAuthenticated(): boolean {
    return this.oauthService.hasValidAccessToken();
  }
  getIdTokenClaims(): Record<string, any> | null {
    const claims = this.oauthService.getIdentityClaims();
    return claims ? claims as Record<string, any> : null;
  }
  get accessToken(): string {
    return this.oauthService.getAccessToken();
  }
}
            

3.3 React Configuration

Install OIDC Client Library

Add .env

REACT_APP_OIDC_AUTHORITY=https://localhost:5000/ # your IdentitySuite address
REACT_APP_OIDC_CLIENT_ID=react
REACT_APP_OIDC_REDIRECT_URI=http://localhost:3000/ # adjust the port with the number of your React app
REACT_APP_OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:3000/ # adjust the port with the number of your React app
REACT_APP_OIDC_SCOPE=openid profile email
            

Configure PrivateRoute.tsx

import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from 'react-oidc-context';
import type { ReactElement } from 'react';
interface Props {
    children: ReactElement;
}

export function PrivateRoute({ children }: Props) {
    const auth = useAuth();
    const location = useLocation();

    if (auth.isLoading) {
        return <div>Loading...</div>;
    }
    if (!auth.isAuthenticated) {
        auth.signinRedirect({ state: { from: location } });
        return <div>Redirecting to login…</div>;
    }
    return children;
}
            

3.4 Register Your SPA Clients in IdentitySuite

Steps to register a new client in IdentitySuite

• Open the Applications/Resources menu and select Applications .
• Click Add and choose Single Page Application .
• Enter a Client ID and a Display Name .
• In the Application URLs tab, add Redirect URIs and Post Logout Redirect URIs .
• In the Allowed Scopes tab, enable the required scopes and click Save .

Each client registration should specify:

• Client ID: Unique identifier (e.g., "blazor-wasm-client")
• Allowed Grant Types: Authorization Code
• Require PKCE: Enabled
• Redirect URIs: Your SPA's callback URLs
• Allowed Scopes: openid, profile, and any custom scopes

4. Security Best Practices & Common Pitfalls

🔐 Essential Security Checklist

🚀 Performance & User Experience Tips

• Silent Token Renewal: Configure automatic token refresh to avoid interrupting user sessions
• Loading States: Always show appropriate loading indicators during authentication flows
• Error Handling: Provide clear, user-friendly error messages for authentication failures
• Deep Linking: Preserve the user's intended destination through the login flow

Conclusion

Congratulations! You've successfully set up a production-ready OIDC server with IdentitySuite and learned how to secure your SPA applications using industry-standard OAuth 2.0 + PKCE flows.

Next Steps

• Explore the complete example: Check out our GitHub repository with full working implementations
• Advanced configuration: Visit the IdentitySuite documentation for enterprise features

Ready to try it yourself? Explore the pricing plans, or get in touch with our team.

About IdentitySuite

IdentitySuite simplifies enterprise authentication for .NET developers. Built on proven technologies like ASP.NET Core Identity and Openiddict, we eliminate the complexity of OAuth 2.0 and OpenID Connect implementation while maintaining enterprise-grade security standards.