Gitlab-Migration/rheinsw-mono-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Centralize authentication logic and integrate token refresh mechanism

Browse Source 
- Introduce `AuthWrapper` component for streamlined session-based layouts and authentication handling.
- Add new utilities (`tokenUtils.ts`) for JWT decoding, token expiration checks, and refresh operations via Keycloak.
- Refactor `serverCall` and `authOptions` to use centralized token refresh logic, removing redundant implementations.
- Implement `ClientSessionProvider` for consistent session management across the client application.
- Simplify `RootLayout` by delegating authentication enforcement to `AuthWrapper`.
This commit is contained in:
Thatsaphorn
2025-07-11 23:42:41 +02:00
parent 6aae06635d
commit bdbaf36456
6 changed files with 272 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
internal_frontend/app/layout.tsx
View File

@@ -1,74 +1,37 @@
import type {Metadata} from "next"; import type {Metadata} from "next";
import "./globals.css"; import "./globals.css";
import {ThemeProvider} from "@/components/theme-provider"; import {ThemeProvider} from "@/components/theme-provider";
import {SidebarInset, SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar";
import {AppSidebar} from "@/components/app-sidebar";
import React from "react"; import React from "react";
import {Separator} from "@/components/ui/separator";
import {DynamicBreadcrumb} from "@/components/dynamic-breadcrumb";
import {getServerSession} from "next-auth";
import LoginScreen from "@/components/login-screen";
import {authOptions} from "@/lib/api/auth/authOptions";
import {ErrorBoundary} from "@/components/error-boundary"; import {ErrorBoundary} from "@/components/error-boundary";
import {Toaster} from "sonner"; import {Toaster} from "sonner";
import {AuthWrapper} from "@/components/auth-wrapper";
import {ClientSessionProvider} from "@/components/ClientSessionProvider";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Internal | Rhein Software", title: "Internal | Rhein Software",
description: "Internal Tools for Rhein Software Development", description: "Internal Tools for Rhein Software Development",
}; };
export default async function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const session = await getServerSession(authOptions);
return ( return (
<html lang="de" suppressHydrationWarning> <html lang="de" suppressHydrationWarning>
<body> <body>
<ErrorBoundary> <ErrorBoundary>
<ThemeProvider <ClientSessionProvider>
attribute="class" <ThemeProvider
defaultTheme="system" attribute="class"
enableSystem defaultTheme="system"
disableTransitionOnChange enableSystem
> disableTransitionOnChange
{session?.accessToken ? ( >
<SidebarProvider <AuthWrapper>{children}</AuthWrapper>
style={ <Toaster/>
{ </ThemeProvider>
"--sidebar-width": "calc(var(--spacing) * 72)", </ClientSessionProvider>
"--header-height": "calc(var(--spacing) * 12)",
} as React.CSSProperties
}
>
<AppSidebar/>
<SidebarInset>
<header
className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1"/>
<Separator
orientation="vertical"
className="mr-2 data-[orientation=vertical]:h-4"
/>
<DynamicBreadcrumb/>
</div>
</header>
<ErrorBoundary>
{children}
</ErrorBoundary>
</SidebarInset>
</SidebarProvider>
) : (
<ErrorBoundary>
<LoginScreen/>
</ErrorBoundary>
)}
<Toaster/>
</ThemeProvider>
</ErrorBoundary> </ErrorBoundary>
</body> </body>
</html> </html>

12
internal_frontend/components/ClientSessionProvider.tsx Normal file
View File

@@ -0,0 +1,12 @@
"use client";
import {SessionProvider} from "next-auth/react";
import React from "react";
interface Props {
children: React.ReactNode;
}
export function ClientSessionProvider({children}: Props) {
return <SessionProvider refetchInterval={180}>{children}</SessionProvider>;
}

63
internal_frontend/components/auth-wrapper.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import React from "react";
import {useSession} from "next-auth/react";
import {SidebarInset, SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar";
import {AppSidebar} from "@/components/app-sidebar";
import {Separator} from "@/components/ui/separator";
import {DynamicBreadcrumb} from "@/components/dynamic-breadcrumb";
import LoginScreen from "@/components/login-screen";
import {ErrorBoundary} from "@/components/error-boundary";
interface AuthWrapperProps {
children: React.ReactNode;
}
export function AuthWrapper({children}: AuthWrapperProps) {
const {data: session, status} = useSession();
if (status === "loading") {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
</div>
);
}
if (session?.accessToken) {
return (
<SidebarProvider
style={
{
"--sidebar-width": "calc(var(--spacing) * 72)",
"--header-height": "calc(var(--spacing) * 12)",
} as React.CSSProperties
}
>
<AppSidebar/>
<SidebarInset>
<header
className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1"/>
<Separator
orientation="vertical"
className="mr-2 data-[orientation=vertical]:h-4"
/>
<DynamicBreadcrumb/>
</div>
</header>
<ErrorBoundary>
{children}
</ErrorBoundary>
</SidebarInset>
</SidebarProvider>
);
}
return (
<ErrorBoundary>
<LoginScreen/>
</ErrorBoundary>
);
}

36
internal_frontend/lib/api/auth/authOptions.ts
View File

@@ -1,5 +1,6 @@
import KeycloakProvider from "next-auth/providers/keycloak"; import KeycloakProvider from "next-auth/providers/keycloak";
import type {NextAuthOptions} from "next-auth"; import type {NextAuthOptions} from "next-auth";
import {getAccessToken} from "@/lib/api/auth/tokenUtils";
interface TypedJWT { interface TypedJWT {
access_token?: string; access_token?: string;
@@ -20,9 +21,9 @@ if (!KEYCLOAK_CLIENT_SECRET) throw new Error("Missing KEYCLOAK_CLIENT_SECRET");
if (!KEYCLOAK_ISSUER) throw new Error("Missing KEYCLOAK_ISSUER"); if (!KEYCLOAK_ISSUER) throw new Error("Missing KEYCLOAK_ISSUER");
if (!NEXTAUTH_SECRET) throw new Error("Missing NEXTAUTH_SECRET"); if (!NEXTAUTH_SECRET) throw new Error("Missing NEXTAUTH_SECRET");
console.log("[auth] Using Keycloak provider:"); // console.log("[auth] Using Keycloak provider:");
console.log(" - Client ID:", KEYCLOAK_CLIENT_ID); // console.log(" - Client ID:", KEYCLOAK_CLIENT_ID);
console.log(" - Issuer:", KEYCLOAK_ISSUER); // console.log(" - Issuer:", KEYCLOAK_ISSUER);
async function isTokenValid(token: string): Promise<boolean> { async function isTokenValid(token: string): Promise<boolean> {
try { try {
@@ -60,22 +61,39 @@ export const authOptions: NextAuthOptions = {
return token; return token;
} }
const {access_token} = token as TypedJWT; const {access_token, refresh_token} = token as TypedJWT;
if (access_token) { if (access_token) {
const valid = await isTokenValid(access_token); // Use centralized getAccessToken function
if (!valid) { const tokenResult = await getAccessToken(access_token, refresh_token);
console.warn("[auth] Access token invalid — clearing session");
if (tokenResult.accessToken) {
token.access_token = tokenResult.accessToken;
if (tokenResult.refreshToken) {
token.refresh_token = tokenResult.refreshToken;
}
if (tokenResult.refreshed) {
console.log("[auth] Token refreshed successfully in JWT callback");
return token;
}
// If token wasn't refreshed, fall back to network validation
const valid = await isTokenValid(tokenResult.accessToken);
if (!valid) {
console.warn("[auth] Access token invalid — clearing session");
return {};
}
} else {
console.warn("[auth] No valid access token available — clearing session");
return {}; return {};
} }
} }
console.log("[auth] JWT callback: reusing existing token");
return token; return token;
}, },
async session({session, token}) { async session({session, token}) {
const {access_token, refresh_token} = token as TypedJWT; const {access_token, refresh_token} = token as TypedJWT;
console.log("[auth] Session callback: enriching session with tokens");
return { return {
...session, ...session,
accessToken: access_token, accessToken: access_token,

147
internal_frontend/lib/api/auth/tokenUtils.ts Normal file
View File

@@ -0,0 +1,147 @@
interface JwtPayload {
exp: number;
iat?: number;
sub?: string;
[key: string]: unknown; // for any extra claims
}
interface TokenRefreshResult {
access_token: string;
refresh_token?: string;
expires_in?: number;
}
// Function to decode JWT payload without verification (for local expiration check)
export function decodeJwtPayload(token: string): JwtPayload | null {
try {
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(
atob(base64)
.split('')
.map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
.join('')
);
return JSON.parse(jsonPayload);
} catch (error) {
console.error("[auth] Failed to decode JWT payload:", error);
return null;
}
}
// Function to check if token is expired or about to expire (within 5 minutes)
export function isTokenExpiring(token: string, bufferTimeMinutes: number = 5): boolean {
const payload = decodeJwtPayload(token);
if (!payload || !payload.exp) {
return true; // Consider invalid tokens as expired
}
const currentTime = Math.floor(Date.now() / 1000);
const expirationTime = payload.exp;
const bufferTime = bufferTimeMinutes * 60; // Convert minutes to seconds
const timeUntilExpiration = expirationTime - currentTime;
// Log token expiration warning message
if (timeUntilExpiration <= bufferTime) {
const expirationDate = new Date(expirationTime * 1000);
if (timeUntilExpiration <= 0) {
console.warn(`[auth] Token has already expired at ${expirationDate.toISOString()}`);
} else {
const minutesUntilExpiration = Math.floor(timeUntilExpiration / 60);
const secondsUntilExpiration = timeUntilExpiration % 60;
console.warn(`[auth] Token will expire in ${minutesUntilExpiration}m ${secondsUntilExpiration}s at ${expirationDate.toISOString()}`);
}
}
return timeUntilExpiration <= bufferTime;
}
// Function to refresh token using refresh token
export async function refreshAccessToken(refreshToken: string): Promise<TokenRefreshResult | null> {
try {
const {
KEYCLOAK_CLIENT_ID,
KEYCLOAK_CLIENT_SECRET,
KEYCLOAK_ISSUER,
} = process.env;
if (!KEYCLOAK_CLIENT_ID || !KEYCLOAK_CLIENT_SECRET || !KEYCLOAK_ISSUER) {
console.error("[auth] Missing Keycloak configuration for token refresh");
return null;
}
const tokenEndpoint = `${KEYCLOAK_ISSUER}/protocol/openid-connect/token`;
const response = await fetch(tokenEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
grant_type: 'refresh_token',
client_id: KEYCLOAK_CLIENT_ID,
client_secret: KEYCLOAK_CLIENT_SECRET,
refresh_token: refreshToken,
}),
});
if (!response.ok) {
console.error("[auth] Failed to refresh token:", response.status, response.statusText);
return null;
}
const data = await response.json();
return data as TokenRefreshResult;
} catch (error) {
console.error("[auth] Error refreshing token:", error);
return null;
}
}
// Helper function to get just the access token (for backward compatibility)
export async function getRefreshedAccessToken(refreshToken: string): Promise<string | null> {
const result = await refreshAccessToken(refreshToken);
return result?.access_token || null;
}
// Centralized function to get a valid access token (refreshing if needed)
export async function getAccessToken(accessToken?: string, refreshToken?: string): Promise<{
accessToken: string | null;
refreshToken?: string | null;
refreshed: boolean;
}> {
// If no access token provided, return null
if (!accessToken) {
return {accessToken: null, refreshed: false};
}
// Check if token is expiring within 1 minute (as requested in issue)
if (!isTokenExpiring(accessToken, 1)) {
return {accessToken, refreshed: false};
}
console.log("[auth] Access token is expiring within 1 minute, attempting refresh");
// If no refresh token, return the current token (might be expired)
if (!refreshToken) {
console.warn("[auth] No refresh token available for refresh");
return {accessToken, refreshed: false};
}
try {
const refreshResult = await refreshAccessToken(refreshToken);
if (refreshResult) {
return {
accessToken: refreshResult.access_token,
refreshToken: refreshResult.refresh_token || refreshToken,
refreshed: true
};
} else {
console.warn("[auth] Failed to refresh token, returning current token");
return {accessToken, refreshed: false};
}
} catch (error) {
console.error("[auth] Error refreshing token:", error);
return {accessToken, refreshed: false};
}
}

108
internal_frontend/lib/api/serverCall.ts
View File

@@ -1,89 +1,6 @@
import {getServerSession} from "next-auth"; import {getServerSession} from "next-auth";
import {authOptions} from "@/lib/api/auth/authOptions"; import {authOptions} from "@/lib/api/auth/authOptions";
interface JwtPayload {
exp: number;
iat?: number;
sub?: string;
[key: string]: unknown; // for any extra claims
}
// Function to decode JWT payload without verification (for local expiration check)
function decodeJwtPayload(token: string): JwtPayload | null {
try {
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(
atob(base64)
.split('')
.map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
.join('')
);
return JSON.parse(jsonPayload);
} catch (error) {
console.error("[auth] Failed to decode JWT payload:", error);
return null;
}
}
// Function to check if token is expired or about to expire (within 5 minutes)
function isTokenExpiredOrExpiring(token: string): boolean {
const payload = decodeJwtPayload(token);
if (!payload || !payload.exp) {
return true; // Consider invalid tokens as expired
}
const currentTime = Math.floor(Date.now() / 1000);
const expirationTime = payload.exp;
const bufferTime = 5 * 60; // 5 minutes buffer
return (expirationTime - currentTime) <= bufferTime;
}
// Function to refresh token using refresh token
async function refreshAccessToken(refreshToken: string): Promise<string | null> {
try {
const {
KEYCLOAK_CLIENT_ID,
KEYCLOAK_CLIENT_SECRET,
KEYCLOAK_ISSUER,
} = process.env;
if (!KEYCLOAK_CLIENT_ID || !KEYCLOAK_CLIENT_SECRET || !KEYCLOAK_ISSUER) {
console.error("[auth] Missing Keycloak configuration for token refresh");
return null;
}
const tokenEndpoint = `${KEYCLOAK_ISSUER}/protocol/openid-connect/token`;
const response = await fetch(tokenEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
grant_type: 'refresh_token',
client_id: KEYCLOAK_CLIENT_ID,
client_secret: KEYCLOAK_CLIENT_SECRET,
refresh_token: refreshToken,
}),
});
if (!response.ok) {
console.error("[auth] Failed to refresh token:", response.status, response.statusText);
return null;
}
const data = await response.json();
console.log("[auth] Token refreshed successfully");
return data.access_token;
} catch (error) {
console.error("[auth] Error refreshing token:", error);
return null;
}
}
export async function serverCall( export async function serverCall(
path: string, path: string,
method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH",
@@ -97,28 +14,15 @@ export async function serverCall(
}; };
if (session?.accessToken) { if (session?.accessToken) {
// Check if token is expired or about to expire // Use the access token from the session directly
if (isTokenExpiredOrExpiring(session.accessToken)) { // Token refresh is handled by the JWT callback in authOptions.ts
console.log("[auth] Access token is expired or about to expire, attempting refresh");
if (session.refreshToken) {
const newAccessToken = await refreshAccessToken(session.refreshToken);
if (newAccessToken) {
// Update the session with new token (note: this won't persist across requests)
session.accessToken = newAccessToken;
console.log("[auth] Using refreshed access token");
} else {
console.warn("[auth] Failed to refresh token, proceeding with expired token");
}
} else {
console.warn("[auth] No refresh token available, proceeding with expired token");
}
}
headers["Authorization"] = `Bearer ${session.accessToken}`; headers["Authorization"] = `Bearer ${session.accessToken}`;
// console.log("[auth] Using access token from session for API call");
} else {
console.warn("[auth] No access token available in session for API call");
} }
console.log("[api] Calling backend API: ", method, url, body); console.log("[api] Calling backend API - [" + method + "]", path, body ?? "");
return fetch(url, { return fetch(url, {
method, method,