Integrating OpenID Connect (OIDC) Authentication in Angular and React

 
npm i angular-oauth2-oidc

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://YOUR_ISSUER',                 // e.g. https://idp.example.com/realms/myrealm
  clientId: 'YOUR_CLIENT_ID',
  redirectUri: window.location.origin + '/auth/callback',
  postLogoutRedirectUri: window.location.origin + '/',
  responseType: 'code',
  scope: 'openid profile email',
  strictDiscoveryDocumentValidation: false,      // set true if issuer matches exactly and uses https in prod
  showDebugInformation: true,                    // disable in production
  requireHttps: false,                           // only for local dev on http
};

import { Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oauthService: OAuthService) {}

  async init(): Promise<void> {
    this.oauthService.configure(authConfig);
    this.oauthService.setupAutomaticSilentRefresh();

    // Loads discovery document and tries login via redirect callback
    await this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  login(): void {
    this.oauthService.initCodeFlow();
  }

  logout(): void {
    this.oauthService.logOut();
  }

  get isLoggedIn(): boolean {
    return this.oauthService.hasValidAccessToken();
  }

  get accessToken(): string {
    return this.oauthService.getAccessToken();
  }

  get idTokenClaims(): object | null {
    return this.oauthService.getIdentityClaims() || null;
  }
}

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OAuthModule } from 'angular-oauth2-oidc';
import { AppComponent } from './app.component';
import { AuthService } from './auth/auth.service';

export function initAuth(auth: AuthService) {
  return () => auth.init();
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    OAuthModule.forRoot({
      resourceServer: {
        allowedUrls: ['http://localhost:8080/api'], // your backend API
        sendAccessToken: true,
      },
    }),
  ],
  providers: [
    { provide: APP_INITIALIZER, useFactory: initAuth, deps: [AuthService], multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app-routing.module.ts
const routes: Routes = [
  { path: 'auth/callback', component: EmptyCallbackComponent },
  // ...
];

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.auth.isLoggedIn) {
      this.auth.login();
      return false;
    }
    return true;
  }
}

{ path: 'dashboard', canActivate: [AuthGuard], component: DashboardComponent }

// main.tsx or index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { AuthProvider } from "react-oidc-context";
import App from "./App";

const oidcConfig = {
  authority: "https://YOUR_ISSUER",
  client_id: "YOUR_CLIENT_ID",
  redirect_uri: window.location.origin + "/auth/callback",
  post_logout_redirect_uri: window.location.origin + "/",
  response_type: "code",
  scope: "openid profile email",
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AuthProvider {...oidcConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

// AuthCallback.tsx
import { useEffect } from "react";
import { useAuth } from "react-oidc-context";

export default function AuthCallback() {
  const auth = useAuth();

  useEffect(() => {
    // react-oidc-context automatically processes the callback on this route
  }, []);

  if (auth.isLoading) return <div>Signing you in…</div>;
  if (auth.error) return <div>Error: {auth.error.message}</div>;

  // Once user is loaded, route away (your router logic here)
  return <div>Signed in. You can close this page.</div>;
}

import { useAuth } from "react-oidc-context";

export function RequireAuth({ children }: { children: React.ReactNode }) {
  const auth = useAuth();

  if (auth.isLoading) return <div>Loading…</div>;
  if (!auth.isAuthenticated) {
    auth.signinRedirect();
    return null;
  }
  return <>{children}</>;
}

<RequireAuth>
  <Dashboard />
</RequireAuth>

import { useAuth } from "react-oidc-context";

export function useApi() {
  const auth = useAuth();

  return async (url: string) => {
    const token = auth.user?.access_token;
    const res = await fetch(url, {
      headers: token ? { Authorization: `Bearer ${token}` } : {},
    });
    return res.json();
  };
}