mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-21 04:39:06 +00:00
fix: authentication flow with React Query migration
- Fix middleware management in apiClient to properly handle auth tokens - Update ApiAuthProvider to correctly configure base URL and auth - Add missing NextAuth API route handler at app/api/auth/[...nextauth]/route.ts - Remove middleware ejection attempts (not supported by openapi-fetch) - Use global variables to store current auth token and API URL - Setup middleware once on initialization instead of repeatedly adding This fixes the login/logout flow that was broken after migrating from the useApi compatibility layer to native React Query hooks.
This commit is contained in:
6
www/app/api/auth/[...nextauth]/route.ts
Normal file
6
www/app/api/auth/[...nextauth]/route.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import NextAuth from "next-auth";
|
||||
import { authOptions } from "../../../lib/auth";
|
||||
|
||||
const handler = NextAuth(authOptions);
|
||||
|
||||
export { handler as GET, handler as POST };
|
||||
@@ -1,33 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useContext } from "react";
|
||||
import { useEffect, useContext, useRef } from "react";
|
||||
import { client, configureApiAuth } from "./apiClient";
|
||||
import useSessionAccessToken from "./useSessionAccessToken";
|
||||
import { DomainContext } from "../domainContext";
|
||||
|
||||
export function ApiAuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const { accessToken } = useSessionAccessToken();
|
||||
const { api_url } = useContext(DomainContext);
|
||||
// Store the current API URL globally
|
||||
let currentApiUrl: string | null = null;
|
||||
|
||||
useEffect(() => {
|
||||
// Configure base URL
|
||||
if (api_url) {
|
||||
// Set up base URL middleware once
|
||||
const baseUrlMiddlewareSetup = () => {
|
||||
client.use({
|
||||
onRequest({ request }) {
|
||||
if (currentApiUrl) {
|
||||
// Update the base URL for all requests
|
||||
const url = new URL(request.url);
|
||||
const apiUrl = new URL(api_url);
|
||||
const apiUrl = new URL(currentApiUrl);
|
||||
url.protocol = apiUrl.protocol;
|
||||
url.host = apiUrl.host;
|
||||
url.port = apiUrl.port;
|
||||
return new Request(url.toString(), request);
|
||||
}
|
||||
return request;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize base URL middleware once
|
||||
if (typeof window !== "undefined") {
|
||||
baseUrlMiddlewareSetup();
|
||||
}
|
||||
|
||||
export function ApiAuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const { accessToken } = useSessionAccessToken();
|
||||
const { api_url } = useContext(DomainContext);
|
||||
const initialized = useRef(false);
|
||||
|
||||
// Initialize middleware once on client side
|
||||
useEffect(() => {
|
||||
if (!initialized.current && typeof window !== "undefined") {
|
||||
baseUrlMiddlewareSetup();
|
||||
initialized.current = true;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Update the global API URL
|
||||
currentApiUrl = api_url;
|
||||
}, [api_url]);
|
||||
|
||||
useEffect(() => {
|
||||
// Configure authentication
|
||||
configureApiAuth(accessToken);
|
||||
}, [accessToken, api_url]);
|
||||
}, [accessToken]);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -22,16 +22,22 @@ export const client = createClient<paths>({
|
||||
// Create the React Query client wrapper
|
||||
export const $api = createFetchClient<paths>(client);
|
||||
|
||||
// Configure authentication
|
||||
export const configureApiAuth = (token: string | null | undefined) => {
|
||||
if (token) {
|
||||
// Store the current auth token
|
||||
let currentAuthToken: string | null | undefined = null;
|
||||
|
||||
// Set up authentication middleware once
|
||||
client.use({
|
||||
onRequest({ request }) {
|
||||
request.headers.set("Authorization", `Bearer ${token}`);
|
||||
if (currentAuthToken) {
|
||||
request.headers.set("Authorization", `Bearer ${currentAuthToken}`);
|
||||
}
|
||||
return request;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Configure authentication by updating the token
|
||||
export const configureApiAuth = (token: string | null | undefined) => {
|
||||
currentAuthToken = token;
|
||||
};
|
||||
|
||||
// Export typed hooks for convenience
|
||||
|
||||
Reference in New Issue
Block a user