Passwords are not necessary, a Oauth/OIDC approach

sequenceDiagram
  Frontend->>Frontend: loads script and initialize with CLIENT_ID
  Frontend->>+Google Identity Services: modal login
  Google Identity Services-->>Frontend: credentials
  Frontend->>+Our API Authentication Service: credentials
  Our API Authentication Service->>+Google Identity Services: validate credentials
  Google Identity Services-->>-Our API Authentication Service: confirmation
  Our API Authentication Service-->>-Frontend: ours generated tokens

<Suspense fallback={<p>Loading sign-in…</p>}>
  <AuthApp onAuthenticated={onAuthenticated} />
</Suspense>

//auth/src/AuthApp.tsx
import { useCallback, useEffect, useRef, useState } from 'react';
import { providers } from './auth/providers';
import type { AuthHandlers, AuthProvider, AuthResult } from './auth/types';
export interface AuthAppProps {
  /** Called with the provider result (incl. the Google-signed ID token). */
  onAuthenticated?: (result: AuthResult) => void;
}
// Mounts one provider's sign-in UI into a container div. Google renders its
// official button here; the effect runs once per provider, reading the latest
// handlers via a ref so changing callbacks doesn't re-mount the button.
function ProviderSlot({
  provider,
  handlers,
}: {
  provider: AuthProvider;
  handlers: AuthHandlers;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const handlersRef = useRef(handlers);
  handlersRef.current = handlers;
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const cleanup = provider.mount(el, {
      onResult: (r) => handlersRef.current.onResult(r),
      onError: (e) => handlersRef.current.onError(e),
    });
    return () => {
      if (typeof cleanup === 'function') cleanup();
      el.replaceChildren();
    };
  }, [provider]);
  return <div ref={ref} />;
}
export function AuthApp({ onAuthenticated }: AuthAppProps) {
  const [error, setError] = useState<string | null>(null);
  const onResult = useCallback(
          (result: AuthResult) => {
            setError(null);
            onAuthenticated?.(result);
          },
          [onAuthenticated],
  );
  const onError = useCallback((e: Error) => setError(e.message), []);
  return (
          <div style={{ display: 'grid', gap: 12, maxWidth: 320 }}>
            <h2 style={{ margin: 0 }}>Sign in</h2>
            {providers.map((provider) => (
                    <ProviderSlot
                            key={provider.id}
                            provider={provider}
                            handlers={{ onResult, onError }}
                    />
            ))}
            {error && <p style={{ color: 'crimson', margin: 0 }}>{error}</p>}
          </div>
  );
}
export default AuthApp;

//auth/src/auth/providers.ts
import { googleProvider } from './google';
import type { AuthProvider } from './types';
// The client-side sign-in providers shown in the auth widget. Google is first.
// Add another provider by implementing its `mount` and appending it here.
export const providers: AuthProvider[] = [googleProvider];

//auth/src/auth/google.ts
const GSI_SRC = 'https://accounts.google.com/gsi/client';
const CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID ?? '';
let gsiPromise: Promise<void> | null = null;
// Inject the Google Identity Services script once and resolve when ready.
function loadGsi(): Promise<void> {
  gsiPromise ??= new Promise<void>((resolve, reject) => {
    if (typeof window !== 'undefined' && 'google' in window) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = GSI_SRC;
    script.async = true;
    script.defer = true;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
    document.head.appendChild(script);
  });
  return gsiPromise;
}
// Decode the JWT payload for DISPLAY ONLY — the signature is NOT verified here.
// The backend must verify the token before trusting any of these claims.
function decodeIdToken(jwt: string): GoogleIdTokenClaims | undefined {
  try {
    const payload = jwt.split('.')[1];
    const b64 = payload.replace(/-/g, '+').replace(/_/g, '/');
    const json = decodeURIComponent(
            atob(b64)
                    .split('')
                    .map((c) => '%' + c.charCodeAt(0).toString(16).padStart(2, '0'))
                    .join(''),
    );
    return JSON.parse(json) as GoogleIdTokenClaims;
  } catch {
    return undefined;
  }
}
export const googleProvider: AuthProvider = {
  id: 'google',
  label: 'Continue with Google',
  mount(container, { onResult, onError }) {
    if (!CLIENT_ID) {
      onError(new Error('VITE_GOOGLE_CLIENT_ID is not set'));
      return;
    }
    let cancelled = false;
    loadGsi()
            .then(() => {
              if (cancelled) return;
              google.accounts.id.initialize({
                client_id: CLIENT_ID,
                ux_mode: 'popup',
                auto_select: false,
                callback: (resp) => {
                  onResult({
                    provider: 'google',
                    credential: resp.credential,
                    profile: decodeIdToken(resp.credential),
                  });
                },
              });
              google.accounts.id.renderButton(container, {
                type: 'standard',
                theme: 'outline',
                size: 'large',
                text: 'continue_with',
                shape: 'rectangular',
                logo_alignment: 'left',
              });
            })
            .catch((e) => onError(e instanceof Error ? e : new Error(String(e))));
    return () => {
      cancelled = true;
    };
  },
};

{ "provider": "google", "credential": "<google-id-token>", "profile": { ... } }

//com/weImpact/auth/controller/AuthController.kt
@PostMapping("/validate/oauth")
fun validateOAuth(@RequestBody req: OAuthLoginRequest, response: HttpServletResponse): TokenResponse {
  val email = try {
    validator.validate(req.credential)
  } catch (e: JwtException) {
    throw unauthorized()
  }
  // validate if the email exists
  val user = users.findByEmail(email) ?: throw unauthorized()
  // issue ours credentials
  return issueFor(user, response)
}

//com/weImpact/auth/security/OAuthCredentialValidator.kt
class OAuthCredentialValidator(
  trustedIssuers: List<String>,
  private val googleClientId: String,
  decoderForIssuer: (String) -> JwtDecoder = { JwtDecoders.fromIssuerLocation(it) },
) {
  private val decoders: Map<String, JwtDecoder> =
    trustedIssuers.associate { it.trim() to decoderForIssuer(it.trim()) }
  private val log = LoggerFactory.getLogger(OAuthCredentialValidator::class.java)
  fun validate(credential: String): String {
    val issuer = runCatching { SignedJWT.parse(credential).jwtClaimsSet.issuer }
      .getOrNull() ?: throw BadJwtException("missing or malformed iss")
    val decoder = decoders[issuer] ?: throw BadJwtException("untrusted issuer: $issuer")
    val jwt = decoder.decode(credential)
    if (googleClientId !in jwt.audience.orEmpty()) throw BadJwtException("unexpected audience")
    val email = jwt.getClaimAsString("email") ?: throw BadJwtException("missing email claim")
    if (jwt.getClaim<Any>("email_verified") != true) throw BadJwtException("email not verified")
    return email
  }
}

{ "accessToken": "<jwt>", "tokenType": "Bearer", "expiresIn": 900 }

private fun issueFor(user: User, response: HttpServletResponse): TokenResponse {
  if (user.status != UserStatus.ACTIVE) throw unauthorized()
  val institutionIds = memberships.findByUserId(user.id).map { it.institutionId }.toSet()
  val principal = AppPrincipal(user.id, user.email, user.role.name, institutionIds)
  val issued = tokens.issue(principal)
  // Refresh token leaves only as an HttpOnly cookie (unreadable by page JS → XSS-safe),
  // scoped to /refresh so it isn't attached to every request.
  response.addHeader(HttpHeaders.SET_COOKIE, refreshCookie(issued.refreshToken).toString())
  return TokenResponse(issued.accessToken, "Bearer", issued.expiresInSeconds)
}
private fun refreshCookie(token: String): ResponseCookie =
  ResponseCookie.from(REFRESH_COOKIE, token)
    .httpOnly(true)
    .secure(refreshCookieSecure)
    .sameSite(refreshCookieSameSite)
    .path("/")
    .maxAge(refreshTtl)
    .build()