feat(frontend): use __Host prefix for token cookie

This commit is contained in:
sam 2024-09-30 20:14:03 +02:00
parent 646c2694e1
commit 2b8e4c3e8d
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
8 changed files with 108 additions and 101 deletions

View file

@ -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,
});

View file

@ -1 +1,2 @@
export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp";
export const tokenCookieName = "__Host-pronounscc-token";

View file

@ -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);
}
}
}

View file

@ -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,
});

View file

@ -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) {

View file

@ -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,
});

View file

@ -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,

View file

@ -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"
}
}