feat(frontend): use __Host prefix for token cookie
This commit is contained in:
		
							parent
							
								
									646c2694e1
								
							
						
					
					
						commit
						2b8e4c3e8d
					
				
					 8 changed files with 108 additions and 101 deletions
				
			
		|  | @ -1,6 +1,7 @@ | |||
| import { parse as parseCookie, serialize as serializeCookie } from "cookie"; | ||||
| import { API_BASE } from "~/env.server"; | ||||
| import { ApiError, ErrorCode } from "./api/error"; | ||||
| import { tokenCookieName } from "~/lib/utils"; | ||||
| 
 | ||||
| export type RequestParams = { | ||||
| 	token?: string; | ||||
|  | @ -39,7 +40,7 @@ export default async function serverRequest<T>( | |||
| 	return (await resp.json()) as T; | ||||
| } | ||||
| 
 | ||||
| export const getToken = (req: Request) => getCookie(req, "pronounscc-token"); | ||||
| export const getToken = (req: Request) => getCookie(req, tokenCookieName); | ||||
| 
 | ||||
| export function getCookie(req: Request, cookieName: string): string | undefined { | ||||
| 	const header = req.headers.get("Cookie"); | ||||
|  | @ -57,4 +58,5 @@ export const writeCookie = (cookieName: string, value: string, maxAge: number | | |||
| 		path: "/", | ||||
| 		sameSite: "lax", | ||||
| 		httpOnly: true, | ||||
| 		secure: true, | ||||
| 	}); | ||||
|  |  | |||
|  | @ -1 +1,2 @@ | |||
| export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp"; | ||||
| export const tokenCookieName = "__Host-pronounscc-token"; | ||||
|  |  | |||
|  | @ -13,7 +13,7 @@ import { LoaderFunctionArgs } from "@remix-run/node"; | |||
| import { useChangeLanguage } from "remix-i18next/react"; | ||||
| import { useTranslation } from "react-i18next"; | ||||
| 
 | ||||
| import serverRequest, { getCookie, writeCookie } from "./lib/request.server"; | ||||
| import serverRequest, { getToken, writeCookie } from "./lib/request.server"; | ||||
| import Meta from "./lib/api/meta"; | ||||
| import Navbar from "./components/nav/Navbar"; | ||||
| import { User, UserSettings } from "./lib/api/user"; | ||||
|  | @ -26,11 +26,12 @@ import { errorCodeDesc } from "./components/ErrorAlert"; | |||
| import { Container } from "react-bootstrap"; | ||||
| import { ReactNode } from "react"; | ||||
| import BaseNavbar from "~/components/nav/BaseNavbar"; | ||||
| import { tokenCookieName } from "~/lib/utils"; | ||||
| 
 | ||||
| export const loader = async ({ request }: LoaderFunctionArgs) => { | ||||
| 	const meta = await serverRequest<Meta>("GET", "/meta"); | ||||
| 
 | ||||
| 	const token = getCookie(request, "pronounscc-token"); | ||||
| 	const token = getToken(request); | ||||
| 	let setCookie = ""; | ||||
| 
 | ||||
| 	let meUser: User | undefined; | ||||
|  | @ -43,7 +44,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { | |||
| 		} catch (e) { | ||||
| 			// If we get an unauthorized error, clear the token, as it's not valid anymore.
 | ||||
| 			if ((e as ApiError).code === ErrorCode.AuthenticationRequired) { | ||||
| 				setCookie = writeCookie("pronounscc-token", token, 0); | ||||
| 				setCookie = writeCookie(tokenCookieName, token, 0); | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
|  |  | |||
|  | @ -19,6 +19,7 @@ import { Trans, useTranslation } from "react-i18next"; | |||
| import { Form, Button, Alert } from "react-bootstrap"; | ||||
| import ErrorAlert from "~/components/ErrorAlert"; | ||||
| import i18n from "~/i18next.server"; | ||||
| import { tokenCookieName } from "~/lib/utils"; | ||||
| 
 | ||||
| export const meta: MetaFunction<typeof loader> = ({ data }) => { | ||||
| 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }]; | ||||
|  | @ -53,7 +54,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { | |||
| 			}, | ||||
| 			{ | ||||
| 				headers: { | ||||
| 					"Set-Cookie": writeCookie("pronounscc-token", resp.token!), | ||||
| 					"Set-Cookie": writeCookie(tokenCookieName, resp.token!), | ||||
| 				}, | ||||
| 			}, | ||||
| 		); | ||||
|  | @ -90,7 +91,7 @@ export const action = async ({ request }: ActionFunctionArgs) => { | |||
| 
 | ||||
| 		return redirect("/auth/welcome", { | ||||
| 			headers: { | ||||
| 				"Set-Cookie": writeCookie("pronounscc-token", resp.token), | ||||
| 				"Set-Cookie": writeCookie(tokenCookieName, resp.token), | ||||
| 			}, | ||||
| 			status: 303, | ||||
| 		}); | ||||
|  |  | |||
|  | @ -19,6 +19,7 @@ import { AuthResponse, AuthUrls } from "~/lib/api/auth"; | |||
| import { ApiError, ErrorCode } from "~/lib/api/error"; | ||||
| import ErrorAlert from "~/components/ErrorAlert"; | ||||
| import { User } from "~/lib/api/user"; | ||||
| import { tokenCookieName } from "~/lib/utils"; | ||||
| 
 | ||||
| export const meta: MetaFunction<typeof loader> = ({ data }) => { | ||||
| 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }]; | ||||
|  | @ -61,7 +62,7 @@ export const action = async ({ request }: ActionFunctionArgs) => { | |||
| 		return redirect("/", { | ||||
| 			status: 303, | ||||
| 			headers: { | ||||
| 				"Set-Cookie": writeCookie("pronounscc-token", resp.token), | ||||
| 				"Set-Cookie": writeCookie(tokenCookieName, resp.token), | ||||
| 			}, | ||||
| 		}); | ||||
| 	} catch (e) { | ||||
|  |  | |||
|  | @ -1,10 +1,11 @@ | |||
| import { ActionFunction } from "@remix-run/node"; | ||||
| import { writeCookie } from "~/lib/request.server"; | ||||
| import { tokenCookieName } from "~/lib/utils"; | ||||
| 
 | ||||
| export const action: ActionFunction = async () => { | ||||
| 	return new Response(null, { | ||||
| 		headers: { | ||||
| 			"Set-Cookie": writeCookie("pronounscc-token", "token", 0), | ||||
| 			"Set-Cookie": writeCookie(tokenCookieName, "token", 0), | ||||
| 		}, | ||||
| 		status: 204, | ||||
| 	}); | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| import { ActionFunction } from "@remix-run/node"; | ||||
| import { UserSettings } from "~/lib/api/user"; | ||||
| import serverRequest, { getCookie, writeCookie } from "~/lib/request.server"; | ||||
| import serverRequest, { getToken, writeCookie } from "~/lib/request.server"; | ||||
| 
 | ||||
| // Handles theme switching
 | ||||
| // Remix itself handles redirecting back to the original page after the setting is set
 | ||||
|  | @ -15,7 +15,7 @@ export const action: ActionFunction = async ({ request }) => { | |||
| 	const body = await request.formData(); | ||||
| 	const theme = (body.get("theme") as string | null) || "auto"; | ||||
| 
 | ||||
| 	const token = getCookie(request, "pronounscc-token"); | ||||
| 	const token = getToken(request); | ||||
| 	if (token) { | ||||
| 		await serverRequest<UserSettings>("PATCH", "/users/@me/settings", { | ||||
| 			token, | ||||
|  |  | |||
|  | @ -1,93 +1,93 @@ | |||
| { | ||||
|   "error": { | ||||
|     "heading": "An error occurred", | ||||
|     "validation": { | ||||
|       "too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.", | ||||
|       "too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.", | ||||
|       "disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>", | ||||
|       "generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}", | ||||
|       "generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}" | ||||
|     }, | ||||
|     "errors": { | ||||
|       "authentication-error": "There was an error validating your credentials.", | ||||
|       "authentication-required": "You need to log in.", | ||||
|       "bad-request": "Server rejected your input, please check anything for errors.", | ||||
|       "forbidden": "You are not allowed to perform that action.", | ||||
|       "generic-error": "An unknown error occurred.", | ||||
|       "internal-server-error": "Server experienced an internal error, please try again later.", | ||||
|       "member-not-found": "Member not found, please check your spelling and try again.", | ||||
|       "user-not-found": "User not found, please check your spelling and try again." | ||||
|     }, | ||||
|     "title": "An error occurred", | ||||
|     "more-info": "Click here for a more detailed error" | ||||
|   }, | ||||
|   "navbar": { | ||||
|     "view-profile": "View profile", | ||||
|     "settings": "Settings", | ||||
|     "log-out": "Log out", | ||||
|     "log-in": "Log in or sign up" | ||||
|   }, | ||||
|   "user": { | ||||
|     "avatar-alt": "Avatar for @{{username}}", | ||||
|     "heading": { | ||||
|       "names": "Names", | ||||
|       "pronouns": "Pronouns", | ||||
|       "members": "Members" | ||||
|     }, | ||||
|     "member-avatar-alt": "Avatar for {{name}}", | ||||
|     "member-hidden": "This member is unlisted, and not shown in your public member list.", | ||||
|     "own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>", | ||||
|     "create-member-button": "Create member", | ||||
|     "no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>" | ||||
|   }, | ||||
|   "member": { | ||||
|     "avatar-alt": "Avatar for {{name}}", | ||||
|     "own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit profile</6>", | ||||
|     "back": "Back to {{name}}" | ||||
|   }, | ||||
|   "log-in": { | ||||
|     "callback": { | ||||
|       "title": { | ||||
|         "discord-success": "Log in with Discord", | ||||
|         "discord-register": "Register with Discord" | ||||
|       }, | ||||
|       "success": "Successfully logged in!", | ||||
|       "success-link": "Welcome back, <1>@{{username}}</1>!", | ||||
|       "redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.", | ||||
|       "remote-username": { | ||||
|         "discord": "Your discord username" | ||||
|       }, | ||||
|       "username": "Username", | ||||
|       "sign-up-button": "Sign up", | ||||
|       "invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.", | ||||
|       "invalid-username": "Invalid username", | ||||
|       "username-taken": "That username is already taken, please try something else." | ||||
|     }, | ||||
|     "title": "Log in", | ||||
|     "form-title": "Log in with email", | ||||
|     "email": "Email address", | ||||
|     "password": "Password", | ||||
|     "log-in-button": "Log in", | ||||
|     "register-with-email": "Register with email", | ||||
|     "3rd-party": { | ||||
|       "title": "Log in with another service", | ||||
|       "desc": "If you prefer, you can also log in with one of these services:", | ||||
|       "discord": "Log in with Discord", | ||||
|       "google": "Log in with Google", | ||||
|       "tumblr": "Log in with Tumblr" | ||||
|     }, | ||||
|     "invalid-credentials": "Invalid email address or password, please check your spelling and try again." | ||||
|   }, | ||||
|   "welcome": { | ||||
|     "title": "Welcome", | ||||
|     "header": "Welcome to pronouns.cc!", | ||||
|     "blurb": "{welcome.blurb}", | ||||
|     "customize-profile": "Customize your profile", | ||||
|     "customize-profile-blurb": "{welcome.customize-profile-blurb}", | ||||
|     "create-members": "Create members", | ||||
|     "create-members-blurb": "{welcome.create-members-blurb}", | ||||
|     "custom-preferences": "Customize your preferences", | ||||
|     "custom-preferences-blurb": "{welcome.custom-preferences-blurb}", | ||||
|     "profile-button": "Go to your profile" | ||||
|   } | ||||
| 	"error": { | ||||
| 		"heading": "An error occurred", | ||||
| 		"validation": { | ||||
| 			"too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.", | ||||
| 			"too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.", | ||||
| 			"disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>", | ||||
| 			"generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}", | ||||
| 			"generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}" | ||||
| 		}, | ||||
| 		"errors": { | ||||
| 			"authentication-error": "There was an error validating your credentials.", | ||||
| 			"authentication-required": "You need to log in.", | ||||
| 			"bad-request": "Server rejected your input, please check anything for errors.", | ||||
| 			"forbidden": "You are not allowed to perform that action.", | ||||
| 			"generic-error": "An unknown error occurred.", | ||||
| 			"internal-server-error": "Server experienced an internal error, please try again later.", | ||||
| 			"member-not-found": "Member not found, please check your spelling and try again.", | ||||
| 			"user-not-found": "User not found, please check your spelling and try again." | ||||
| 		}, | ||||
| 		"title": "An error occurred", | ||||
| 		"more-info": "Click here for a more detailed error" | ||||
| 	}, | ||||
| 	"navbar": { | ||||
| 		"view-profile": "View profile", | ||||
| 		"settings": "Settings", | ||||
| 		"log-out": "Log out", | ||||
| 		"log-in": "Log in or sign up" | ||||
| 	}, | ||||
| 	"user": { | ||||
| 		"avatar-alt": "Avatar for @{{username}}", | ||||
| 		"heading": { | ||||
| 			"names": "Names", | ||||
| 			"pronouns": "Pronouns", | ||||
| 			"members": "Members" | ||||
| 		}, | ||||
| 		"member-avatar-alt": "Avatar for {{name}}", | ||||
| 		"member-hidden": "This member is unlisted, and not shown in your public member list.", | ||||
| 		"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>", | ||||
| 		"create-member-button": "Create member", | ||||
| 		"no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>" | ||||
| 	}, | ||||
| 	"member": { | ||||
| 		"avatar-alt": "Avatar for {{name}}", | ||||
| 		"own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit profile</6>", | ||||
| 		"back": "Back to {{name}}" | ||||
| 	}, | ||||
| 	"log-in": { | ||||
| 		"callback": { | ||||
| 			"title": { | ||||
| 				"discord-success": "Log in with Discord", | ||||
| 				"discord-register": "Register with Discord" | ||||
| 			}, | ||||
| 			"success": "Successfully logged in!", | ||||
| 			"success-link": "Welcome back, <1>@{{username}}</1>!", | ||||
| 			"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.", | ||||
| 			"remote-username": { | ||||
| 				"discord": "Your discord username" | ||||
| 			}, | ||||
| 			"username": "Username", | ||||
| 			"sign-up-button": "Sign up", | ||||
| 			"invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.", | ||||
| 			"invalid-username": "Invalid username", | ||||
| 			"username-taken": "That username is already taken, please try something else." | ||||
| 		}, | ||||
| 		"title": "Log in", | ||||
| 		"form-title": "Log in with email", | ||||
| 		"email": "Email address", | ||||
| 		"password": "Password", | ||||
| 		"log-in-button": "Log in", | ||||
| 		"register-with-email": "Register with email", | ||||
| 		"3rd-party": { | ||||
| 			"title": "Log in with another service", | ||||
| 			"desc": "If you prefer, you can also log in with one of these services:", | ||||
| 			"discord": "Log in with Discord", | ||||
| 			"google": "Log in with Google", | ||||
| 			"tumblr": "Log in with Tumblr" | ||||
| 		}, | ||||
| 		"invalid-credentials": "Invalid email address or password, please check your spelling and try again." | ||||
| 	}, | ||||
| 	"welcome": { | ||||
| 		"title": "Welcome", | ||||
| 		"header": "Welcome to pronouns.cc!", | ||||
| 		"blurb": "{welcome.blurb}", | ||||
| 		"customize-profile": "Customize your profile", | ||||
| 		"customize-profile-blurb": "{welcome.customize-profile-blurb}", | ||||
| 		"create-members": "Create members", | ||||
| 		"create-members-blurb": "{welcome.create-members-blurb}", | ||||
| 		"custom-preferences": "Customize your preferences", | ||||
| 		"custom-preferences-blurb": "{welcome.custom-preferences-blurb}", | ||||
| 		"profile-button": "Go to your profile" | ||||
| 	} | ||||
| } | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue