grpc: Move /posts/<id> to backend

.vscode/launch.json

@@ -23,6 +23,13 @@
             "env": {
                 "PN_JUXTAPOSITION_UI_USE_PRESETS": "docker"
             }
+        },
+        {
+            "type": "node-terminal",
+            "name": "Rebuild gRPC",
+            "request": "launch",
+            "command": "npm rebuild @repo/grpc-client",
+            "cwd": "${workspaceFolder}"
         }
     ],
     "compounds": [

apps/juxtaposition-ui/package.json

@@ -26,6 +26,7 @@
     "ejs": "^3.1.10",
     "esbuild-plugin-copy": "^2.1.1",
     "express": "^4.21.2",
+    "express-async-errors": "^3.1.1",
     "express-prom-bundle": "^7.0.2",
     "express-rate-limit": "^7.5.0",
     "express-session": "^1.18.1",
@@ -49,7 +50,8 @@
     "redis": "^4.7.0",
     "sharp": "^0.33.5",
     "tga": "^1.0.7",
-    "tsx": "^4.19.3"
+    "tsx": "^4.19.3",
+    "zod": "^3.25.56"
   },
   "devDependencies": {
     "@pretendonetwork/eslint-config": "^0.0.8",

apps/juxtaposition-ui/src/api/post.ts

@@ -0,0 +1,65 @@
+import { apiFetchUser } from '@/fetch';
+import type { UserTokens } from '@/fetch';
+
+/* !!! HEY
+ * This type lives in apps/miiverse-api/src/services/internal/contract/post.ts
+ * Modify it there and copy-paste here! */
+
+/* This type is the contract for the frontend. If we make changes to the db, this shape should be kept. */
+export type PostDto = {
+	id: string;
+	title_id?: string; // number
+	screen_name: string;
+	body: string;
+	app_data?: string; // nintendo base64
+
+	painting?: string; // base64 or '', undef for PMs
+	screenshot?: string; // URL frag (leading /) or '', undef for PMs
+	screenshot_length?: number;
+
+	search_key?: string[]; // can be []
+	topic_tag?: string; // can be ''
+
+	community_id: string; // number
+	created_at: string; // ISO Z
+	feeling_id?: number;
+
+	is_autopost: boolean;
+	is_community_private_autopost: boolean;
+	is_spoiler: boolean;
+	is_app_jumpable: boolean;
+
+	empathy_count: number;
+	country_id: number;
+	language_id: number;
+
+	mii: string; // nintendo base64
+	mii_face_url: string; // full URL (cdn., r2-cdn.)
+
+	pid: number;
+	platform_id?: number;
+	region_id?: number;
+	parent: string | null;
+
+	reply_count: number;
+	verified: boolean;
+
+	message_to_pid: string | null;
+	removed: boolean;
+	removed_by?: number;
+	removed_at?: string; // ISO Z
+	removed_reason?: string;
+
+	yeahs: number[];
+};
+
+/**
+ * Fetches a Post for a given ID.
+ * @param tokens User to perform fetch as. Responses will be according to this users' permissions (user, moderator etc.)
+ * @param post_id The ID of the post to get.
+ * @returns Post object
+ */
+export async function getPostById(tokens: UserTokens, post_id: string): Promise<PostDto | null> {
+	const post = await apiFetchUser<PostDto>(tokens, `/api/v1/posts/${post_id}`);
+	return post;
+}

apps/juxtaposition-ui/src/config.ts

@@ -9,6 +9,8 @@ const schema = z.object({
 	logSensitive: zodCoercedBoolean().default(false),
 	httpPort: z.coerce.number().default(8080),
 	httpCookieDomain: z.string().default('.pretendo.network'),
+	/** "Safe" base origin for login-redirect validation */
+	httpBaseUrl: z.string().default('https://juxt.pretendo.network'),
 	/** Configures proxy trust (X-Forwarded-For etc.). Can be `true` to unconditionally trust, or
 	 *  provide a numeric hop count, or comma-seperated CIDR ranges.
 	 *  See https://expressjs.com/en/guide/behind-proxies.html
@@ -94,7 +96,8 @@ export const config = {
 	http: {
 		port: unmappedConfig.httpPort,
 		cookieDomain: unmappedConfig.httpCookieDomain,
-		trustProxy: unmappedConfig.httpTrustProxy
+		trustProxy: unmappedConfig.httpTrustProxy,
+		baseUrl: unmappedConfig.httpBaseUrl
 	},
 	metrics: {
 		enabled: unmappedConfig.metricsEnabled,

apps/juxtaposition-ui/src/fetch.ts

@@ -1,39 +1,72 @@
 import { Metadata } from 'nice-grpc';
 import { config } from '@/config';
 import { grpcClient } from '@/grpc';
+import type { PacketResponse } from '@repo/grpc-client/out/packet';
 
 export type FetchOptions = {
 	method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
-	headers?: Record<string, string>;
+	headers?: Record<string, string | undefined>;
 	body?: Record<string, any> | undefined | null;
 };
 
+export interface FetchError extends Error {
+	name: 'FetchError';
+	status: number;
+	response: any;
+}
+function FetchError(response: PacketResponse, message: string): FetchError {
+	const error = new Error(message) as FetchError;
+	error.name = 'FetchError';
+	error.status = response.status;
+	error.response = response.payload; // parse json?
+	return error;
+}
+
 function isErrorHttpStatus(status: number): boolean {
 	return status >= 400 && status < 600;
 }
 
-export async function apiFetch<T>(path: string, options?: FetchOptions): Promise<T> {
+export async function apiFetch<T>(path: string, options?: FetchOptions): Promise<T | null> {
 	const defaultedOptions = {
 		method: 'GET',
 		headers: {},
 		...options
 	};
 
 	const metadata = Metadata({
-		...defaultedOptions.headers,
 		'X-API-Key': config.grpc.miiverse.apiKey
 	});
 	const response = await grpcClient.sendPacket({
 		path,
 		method: defaultedOptions.method,
+		headers: JSON.stringify(defaultedOptions.headers),
 		payload: defaultedOptions.body ? JSON.stringify(defaultedOptions.body) : undefined
 	}, {
 		metadata
 	});
 
-	if (isErrorHttpStatus(response.status)) {
-		throw new Error(`HTTP error! status: ${response.status}`);
+	if (response.status === 404) {
+		return null;
+	} else if (isErrorHttpStatus(response.status)) {
+		throw FetchError(response, `HTTP error! status: ${response.status} ${response.payload}`);
 	}
 
 	return JSON.parse(response.payload) as T;
 }
+
+export type UserTokens = {
+	serviceToken?: string;
+	oauthToken?: string;
+};
+
+export async function apiFetchUser<T>(tokens: UserTokens, path: string, options?: FetchOptions): Promise<T | null> {
+	options = {
+		...options,
+		headers: {
+			'x-service-token': tokens.serviceToken,
+			'x-oauth-token': tokens.oauthToken,
+			...options?.headers
+		}
+	};
+	return apiFetch<T>(path, options);
+}

apps/juxtaposition-ui/src/middleware/consoleAuth.js

@@ -7,12 +7,15 @@ async function auth(request, response, next) {
 	if (request.session && request.session.user && request.session.pid && !request.isWrite) {
 		request.user = request.session.user;
 		request.pid = request.session.pid;
+		request.tokens = request.session.tokens;
 	} else {
+		request.tokens = { serviceToken: request.headers['x-nintendo-servicetoken'] };
 		request.pid = request.headers['x-nintendo-servicetoken'] ? await util.processServiceToken(request.headers['x-nintendo-servicetoken']) : null;
 		request.user = request.pid ? await util.getUserDataFromPid(request.pid) : null;
 
 		request.session.user = request.user;
 		request.session.pid = request.pid;
+		request.session.tokens = request.tokens;
 	}
 
 	// Set headers

apps/juxtaposition-ui/src/middleware/webAuth.js

@@ -24,14 +24,14 @@ async function webAuth(request, response, next) {
 			response.clearCookie('token_type', { domain: cookieDomain, path: '/' });
 			if (request.path === '/login') {
 				response.locals.lang = util.processLanguage();
-				request.token = request.cookies.access_token;
+				request.tokens = {};
 				request.paramPackData = null;
 				return next();
 			}
 		}
 	}
 
-	request.token = request.cookies.access_token;
+	request.tokens = { oauthToken: request.cookies.access_token };
 
 	// Open access pages
 	if (isStartOfPath(request.path, '/users/') ||

apps/juxtaposition-ui/src/server.js

@@ -3,6 +3,7 @@ const cookieParser = require('cookie-parser');
 const session = require('express-session');
 const { RedisStore } = require('connect-redis');
 const expressMetrics = require('express-prom-bundle');
+require('express-async-errors'); // See package docs
 const database = require('@/database');
 const { logger } = require('@/logger');
 const { loggerHttp } = require('@/loggerHttp');
@@ -75,23 +76,36 @@ app.use(juxt_web);
 logger.info('Creating 404 status handler');
 app.use((req, res) => {
 	req.log.warn('Page not found');
+	res.status(404);
 	res.render(req.directory + '/error.ejs', {
 		code: 404,
-		message: 'Page not found'
+		message: 'Page not found',
+		id: req.id
 	});
 });
 
 // non-404 error handler
 logger.info('Creating non-404 status handler');
-app.use((error, request, response) => {
-	const status = error.status || 500;
+app.use((error, req, res, next) => {
+	if (res.headersSent) {
+		return next(error);
+	}
+
+	// small hack because token expiry is weird
+	if (error.status === 401) {
+		req.session.user = undefined;
+		req.session.pid = undefined;
+		return res.redirect(`/login?redirect=${req.originalUrl}`);
+	}
 
-	response.status(status);
+	const status = error.status || 500;
+	res.status(status);
 
-	response.json({
-		app: 'api',
-		status,
-		error: error.message
+	req.log.error(error, 'Request failed!');
+	res.render(req.directory + '/error.ejs', {
+		code: status,
+		message: 'Error',
+		id: req.id
 	});
 });
 

apps/juxtaposition-ui/src/services/juxt-web/routes/console/posts.js

@@ -12,6 +12,7 @@ const upload = multer({ dest: 'uploads/' });
 const redis = require('@/redisCache');
 const { config } = require('@/config');
 const router = express.Router();
+const { getPostById } = require('@/api/post');
 
 const postLimit = rateLimit({
 	windowMs: 15 * 1000, // 30 seconds
@@ -41,7 +42,10 @@ const yeahLimit = rateLimit({
 });
 
 router.get('/:post_id/oembed.json', async function (req, res) {
-	const post = await database.getPostByID(req.params.post_id.toString());
+	const post = await getPostById(req.tokens, req.params.post_id);
+	if (!post) {
+		return res.sendStatus(404);
+	}
 	const doc = {
 		author_name: post.screen_name,
 		author_url: 'https://juxt.pretendo.network/users/show?pid=' + post.pid
@@ -108,16 +112,17 @@ router.post('/new', postLimit, upload.none(), async function (req, res) {
 router.get('/:post_id', async function (req, res) {
 	const userSettings = await database.getUserSettings(req.pid);
 	const userContent = await database.getUserContent(req.pid);
-	let post = await database.getPostByID(req.params.post_id.toString());
-	if (post === null) {
+
+	const post = await getPostById(req.tokens, req.params.post_id);
+	if (!post) {
 		return res.redirect('/404');
 	}
 	if (post.parent) {
-		post = await database.getPostByID(post.parent);
-		if (post === null) {
-			return res.sendStatus(404);
+		const parent = await getPostById(req.tokens, post.parent);
+		if (!parent) {
+			return res.redirect('/404');
 		}
-		return res.redirect(`/posts/${post.id}`);
+		return res.redirect(`/posts/${parent.id}`);
 	}
 	const community = await database.getCommunityByID(post.community_id);
 	const communityMap = await util.getCommunityHash();
@@ -165,7 +170,7 @@ router.post('/:post_id/new', postLimit, upload.none(), async function (req, res)
 
 router.post('/:post_id/report', upload.none(), async function (req, res) {
 	const { reason, message, post_id } = req.body;
-	const post = await database.getPostByID(post_id);
+	const post = await getPostById(req.tokens, post_id);
 	if (!reason || !post_id || !post) {
 		return res.redirect('/404');
 	}

apps/juxtaposition-ui/src/services/juxt-web/routes/web/login.js

@@ -8,22 +8,22 @@ const { logger } = require('@/logger');
 const cookieDomain = config.http.cookieDomain;
 
 router.get('/', async function (req, res) {
-	res.render(req.directory + '/login.ejs', { toast: null });
+	res.render(req.directory + '/login.ejs', { toast: null, redirect: req.query.redirect ?? '/' });
 });
 
 router.post('/', async (req, res) => {
-	const { username, password } = req.body;
+	const { username, password, redirect } = req.body;
 	const login = await util.login(username, password).catch((e) => {
 		switch (e.details) {
 			case 'INVALID_ARGUMENT: User not found':
-				res.render(req.directory + '/login.ejs', { toast: 'Username was invalid.' });
+				res.render(req.directory + '/login.ejs', { toast: 'Username was invalid.', redirect });
 				break;
 			case 'INVALID_ARGUMENT: Password is incorrect':
-				res.render(req.directory + '/login.ejs', { toast: 'Password was incorrect.' });
+				res.render(req.directory + '/login.ejs', { toast: 'Password was incorrect.', redirect });
 				break;
 			default:
 				logger.error(e, `Login error for ${username}`);
-				res.render(req.directory + '/login.ejs', { toast: 'Invalid username or password.' });
+				res.render(req.directory + '/login.ejs', { toast: 'Invalid username or password.', redirect });
 				break;
 		}
 	});
@@ -33,7 +33,7 @@ router.post('/', async (req, res) => {
 
 	const PNID = await util.getUserDataFromToken(login.accessToken);
 	if (!PNID) {
-		return res.render(req.directory + '/login.ejs', { toast: 'Invalid username or password.' });
+		return res.render(req.directory + '/login.ejs', { toast: 'Invalid username or password.', redirect });
 	}
 
 	let discovery = await database.getEndPoint(config.serverEnvironment);
@@ -65,7 +65,11 @@ router.post('/', async (req, res) => {
 	res.cookie('access_token', login.accessToken, { domain: cookieDomain, maxAge: expiration });
 	res.cookie('refresh_token', login.refreshToken, { domain: cookieDomain });
 	res.cookie('token_type', 'Bearer', { domain: cookieDomain });
-	res.redirect('/');
+
+	/* Only allow relative URLs (leading /) or absolute ones on config.http.baseUrl. */
+	const safe_redirect = new URL(redirect, config.http.baseUrl).origin == config.http.baseUrl ? redirect : '/';
+
+	res.redirect(safe_redirect);
 });
 
 module.exports = router;