check /status before getting user details

frontend/apps/remark42/app/common/api.ts

@@ -9,9 +9,10 @@ import {
   Sorting,
   BlockTTL,
   Image,
+  StatusResponse,
   EmailSubVerificationStatus,
 } from './types';
-import { apiFetcher, adminFetcher } from './fetcher';
+import { apiFetcher, adminFetcher, authFetcher } from './fetcher';
 
 /* API methods */
 
@@ -61,7 +62,14 @@ export const removeMyComment = (id: Comment['id']): Promise<void> =>
 export const getPreview = (text: string): Promise<string> => apiFetcher.post('/preview', {}, { text });
 
 export function getUser(): Promise<User | null> {
-  return apiFetcher.get<User | null>('/user').catch(() => null);
+  return authFetcher.get<StatusResponse>('/status')
+    .then((resp) => {
+      if (resp.user) {
+        // verify that user is logged in first as otherwise we get an error 401 for unlogged user
+        return apiFetcher.get<User | null>('/user').catch(() => null);
+      }
+      return Promise.resolve(null);
+    });
 }
 
 export const uploadImage = (image: File): Promise<Image> => {

frontend/apps/remark42/app/common/types.ts

@@ -10,6 +10,11 @@ export type User = {
   paid_sub?: boolean;
 };
 
+export interface StatusResponse {
+  status: string;
+  user?: string;
+}
+
 /** data which is used on user-info page */
 export type Profile = Pick<User, 'id' | 'name' | 'picture'> & { current?: '1' };
 

frontend/packages/api/clients/index.ts

@@ -16,6 +16,11 @@ export interface User {
 	paid_sub?: boolean
 }
 
+export interface StatusResponse {
+	status: string;
+	user?: string;
+}
+
 export type OAuthProvider =
 	| 'apple'
 	| 'facebook'

frontend/packages/api/clients/public.ts

@@ -1,4 +1,4 @@
-import type { ClientParams, Provider, User } from './index'
+import type { ClientParams, Provider, User, StatusResponse } from './index'
 import { createFetcher } from '../lib/fetcher'
 import { API_BASE } from '../consts'
 
@@ -82,6 +82,7 @@ export type Vote = -1 | 1
 
 export function createPublicClient({ siteId: site, baseUrl }: ClientParams) {
 	const fetcher = createFetcher(site, `${baseUrl}${API_BASE}`)
+	const authFetcher =  createFetcher(site,`${baseUrl}/auth`)
 
 	/**
 	 * Get server config
@@ -94,7 +95,14 @@ export function createPublicClient({ siteId: site, baseUrl }: ClientParams) {
 	 * Get current authorized user
 	 */
 	async function getUser(): Promise<User | null> {
-		return fetcher.get<User | null>('/user').catch(() => null)
+		return authFetcher.get<StatusResponse>('/status')
+			.then((resp: StatusResponse) => {
+				if (resp.user) {
+					// verify that user is logged in first as otherwise we get an error 401 for unlogged user
+					return fetcher.get<User | null>('/user').catch(() => null);
+				}
+				return Promise.resolve(null);
+			});
 	}
 
 	/**

frontend/packages/api/tests/clients/public.test.ts

@@ -97,11 +97,32 @@ describe<Context>('Public Client', (publicClient) => {
 		})
 	})
 
-	const userCases = [null, { id: '1', username: 'user' }]
-	userCases.forEach((user) => {
-		publicClient('should return user', async ({ client }) => {
-			mockEndpoint('/remark42/api/v1/user', { body: user })
-			await expect(client.getUser()).resolves.toEqual(user)
-		})
-	})
+	const userCases = [
+		{ status: 'not logged in', user: null },
+		{ status: 'logged in', user: { id: '1', username: 'user' } },
+	];
+
+	userCases.forEach((testCase) => {
+		publicClient(`should return user when status is ${testCase.status}`, async ({ client }) => {
+			if (!testCase.user) {
+				mockEndpoint('/remark42/auth/status', { body: { status: testCase.status } });
+			} else {
+				mockEndpoint('/remark42/auth/status', {
+					body: {
+						status: testCase.status,
+						user: testCase.user.username
+					}
+				});
+			}
+			const userMock = mockEndpoint('/remark42/api/v1/user', { body: testCase.user });
+
+			await expect(client.getUser()).resolves.toEqual(testCase.status === 'logged in' ? testCase.user : null);
+
+			if (testCase.status === 'not logged in') {
+				expect(userMock.req).not.toHaveBeenCalled();
+			} else {
+				expect(userMock.req).toBeDefined();
+			}
+		});
+	});
 })