3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-04-28 17:56:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Use server side session API (#1684)

Browse source
This commit is contained in:
Luke Vella 2025-04-24 09:48:02 +01:00 • committed by GitHub
parent aba602ef89
commit 5c61057a84
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 219 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
View file

@ -1,9 +1,7 @@
"use client";
import { usePostHog } from "@rallly/posthog/client";
import { Button } from "@rallly/ui/button";
import { useMutation } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import React from "react";
import { Logo } from "@/components/logo";
@ -16,8 +14,6 @@ import { trpc } from "@/trpc/client";
type PageProps = { magicLink: string; email: string };
export const LoginPage = ({ magicLink, email }: PageProps) => {
const session = useSession();
const posthog = usePostHog();
const { t } = useTranslation();
const [error, setError] = React.useState<string | null>(null);
@ -28,15 +24,6 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
},
onSuccess: async (data) => {
if (!data.url.includes("auth/error")) {
// if login was successful, update the session
const updatedSession = await session.update();
if (updatedSession?.user) {
// identify the user in posthog
posthog?.identify(updatedSession.user.id, {
email: updatedSession.user.email,
name: updatedSession.user.name,
});
}
router.push(data.url);
} else {
setError(

11
apps/web/src/app/[locale]/(auth)/register/verify/components/otp-form.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { usePostHog } from "@rallly/posthog/client";
import { Button } from "@rallly/ui/button";
import {
Form,
@ -37,12 +36,11 @@ export function OTPForm({ token }: { token: string }) {
resolver: zodResolver(otpFormSchema),
});
const { timeZone } = useDayjs();
const { timeZone, weekStart, timeFormat } = useDayjs();
const locale = i18n.language;
const queryClient = trpc.useUtils();
const posthog = usePostHog();
const authenticateRegistration =
trpc.auth.authenticateRegistration.useMutation();
const searchParams = useSearchParams();
@ -52,6 +50,8 @@ export function OTPForm({ token }: { token: string }) {
token,
timeZone,
locale,
weekStart,
timeFormat,
code: data.otp,
});
@ -64,11 +64,6 @@ export function OTPForm({ token }: { token: string }) {
queryClient.invalidate();
posthog?.identify(res.user.id, {
email: res.user.email,
name: res.user.name,
});
signIn("registration-token", {
token,
redirectTo: searchParams?.get("redirectTo") ?? "/",

17
apps/web/src/app/[locale]/(space)/settings/preferences/actions.ts Normal file
View file

@ -0,0 +1,17 @@
"use server";
import { prisma } from "@rallly/database";
import { getUserId } from "@/next-auth";
export async function updateLocale(locale: string) {
const userId = await getUserId();
await prisma.user.update({
where: {
id: userId,
},
data: {
locale,
},
});
}

23
apps/web/src/app/[locale]/(space)/settings/components/date-time-preferences.tsx → apps/web/src/app/[locale]/(space)/settings/preferences/components/date-time-preferences.tsx
View file

@ -27,8 +27,8 @@ const formSchema = z.object({
type FormData = z.infer<typeof formSchema>;
const DateTimePreferencesForm = () => {
const { timeFormat, weekStart, timeZone, locale } = useDayjs();
const { preferences, updatePreferences } = usePreferences();
const { timeFormat, weekStart, timeZone } = useDayjs();
const { updatePreferences } = usePreferences();
const form = useForm<FormData>({
resolver: zodResolver(formSchema),
@ -126,25 +126,6 @@ const DateTimePreferencesForm = () => {
>
<Trans i18nKey="save" />
</Button>
{preferences.timeFormat || preferences.weekStart ? (
<Button
onClick={async () => {
updatePreferences({
weekStart: null,
timeFormat: null,
});
form.reset({
weekStart: locale.weekStart,
timeFormat: locale.timeFormat,
});
}}
>
<Trans
defaults="Use locale defaults"
i18nKey="useLocaleDefaults"
/>
</Button>
) : null}
</div>
</form>
</Form>

6
apps/web/src/app/[locale]/(space)/settings/components/language-preference.tsx → apps/web/src/app/[locale]/(space)/settings/preferences/components/language-preference.tsx
View file

@ -8,9 +8,10 @@ import { z } from "zod";
import { LanguageSelect } from "@/components/poll/language-selector";
import { Trans } from "@/components/trans";
import { usePreferences } from "@/contexts/preferences";
import { useTranslation } from "@/i18n/client";
import { updateLocale } from "../actions";
const formSchema = z.object({
language: z.string(),
});
@ -25,13 +26,12 @@ export const LanguagePreference = () => {
},
resolver: zodResolver(formSchema),
});
const { updatePreferences } = usePreferences();
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(async (data) => {
await updatePreferences({ locale: data.language });
await updateLocale(data.language);
i18n.changeLanguage(data.language);
form.reset({ language: data.language });
})}

4
apps/web/src/app/[locale]/(space)/settings/preferences/preferences-page.tsx
View file

@ -2,12 +2,12 @@
import { Trans } from "@/components/trans";
import { DateTimePreferences } from "../components/date-time-preferences";
import { LanguagePreference } from "../components/language-preference";
import {
SettingsContent,
SettingsSection,
} from "../components/settings-layout";
import { DateTimePreferences } from "./components/date-time-preferences";
import { LanguagePreference } from "./components/language-preference";
export function PreferencesPage() {
return (

71
apps/web/src/app/[locale]/layout.tsx
View file

@ -8,11 +8,11 @@ import { TooltipProvider } from "@rallly/ui/tooltip";
import { domAnimation, LazyMotion } from "motion/react";
import type { Viewport } from "next";
import { Inter } from "next/font/google";
import { SessionProvider } from "next-auth/react";
import React from "react";
import { TimeZoneChangeDetector } from "@/app/[locale]/timezone-change-detector";
import { UserProvider } from "@/components/user-provider";
import { PreferencesProvider } from "@/contexts/preferences";
import { getUser } from "@/data/get-user";
import { TimezoneProvider } from "@/features/timezone/client/context";
import { I18nProvider } from "@/i18n/client";
@ -33,32 +33,26 @@ export const viewport: Viewport = {
initialScale: 1,
};
async function loadLocale() {
let locale = getLocale();
const userId = await getUserId();
if (userId) {
const user = await getUser();
if (user.locale) {
locale = user.locale;
}
}
if (!supportedLngs.includes(locale)) {
return defaultLocale;
}
return locale;
}
export default async function Root({
children,
}: {
children: React.ReactNode;
}) {
const session = await auth();
const locale = await loadLocale();
let locale = getLocale();
const userId = await getUserId();
const user = userId ? await getUser() : null;
if (user?.locale) {
locale = user.locale;
}
if (!supportedLngs.includes(locale)) {
locale = defaultLocale;
}
return (
<html lang={locale} className={inter.className}>
@ -67,23 +61,48 @@ export default async function Root({
<I18nProvider locale={locale}>
<TRPCProvider>
<LazyMotion features={domAnimation}>
<SessionProvider session={session}>
<PostHogProvider>
<PostHogPageView />
<TooltipProvider>
<UserProvider>
<TimezoneProvider
initialTimezone={session?.user?.timeZone ?? undefined}
<UserProvider
user={
user
? {
id: user.id,
name: user.name,
email: user.email,
tier: user
? user.isPro
? "pro"
: "hobby"
: "guest",
image: user.image,
}
: session?.user
? {
id: session.user.id,
tier: "guest",
}
: undefined
}
>
<PreferencesProvider
initialValue={{
timeFormat: user?.timeFormat,
timeZone: user?.timeZone,
weekStart: user?.weekStart,
}}
>
<TimezoneProvider initialTimezone={user?.timeZone}>
<ConnectedDayjsProvider>
{children}
<TimeZoneChangeDetector />
</ConnectedDayjsProvider>
</TimezoneProvider>
</PreferencesProvider>
</UserProvider>
</TooltipProvider>
</PostHogProvider>
</SessionProvider>
</LazyMotion>
</TRPCProvider>
</I18nProvider>

22
apps/web/src/app/components/user-language-switcher.tsx
View file

@ -1,22 +0,0 @@
"use client";
import { useRouter } from "next/navigation";
import { LanguageSelect } from "@/components/poll/language-selector";
import { usePreferences } from "@/contexts/preferences";
import { useTranslation } from "@/i18n/client";
export function UserLanguageSwitcher() {
const { i18n } = useTranslation();
const { preferences, updatePreferences } = usePreferences();
const router = useRouter();
return (
<LanguageSelect
value={preferences.locale ?? i18n.language}
onChange={async (language) => {
await updatePreferences({ locale: language });
router.refresh();
}}
/>
);
}

10
apps/web/src/components/create-poll.tsx
View file

@ -11,7 +11,6 @@ import {
import { Form } from "@rallly/ui/form";
import { useToast } from "@rallly/ui/hooks/use-toast";
import { useRouter } from "next/navigation";
import { signIn, useSession } from "next-auth/react";
import React from "react";
import { useForm } from "react-hook-form";
import useFormPersist from "react-hook-form-persist";
@ -42,9 +41,8 @@ export interface CreatePollPageProps {
export const CreatePoll: React.FunctionComponent = () => {
const router = useRouter();
const { user } = useUser();
const { user, createGuestIfNeeded } = useUser();
const { toast } = useToast();
const session = useSession();
const form = useForm<NewEventData>({
defaultValues: {
title: "",
@ -84,11 +82,7 @@ export const CreatePoll: React.FunctionComponent = () => {
<form
onSubmit={form.handleSubmit(async (formData) => {
const title = required(formData?.title);
if (session.status !== "authenticated") {
await signIn("guest", {
redirect: false,
});
}
await createGuestIfNeeded();
await createPoll.mutateAsync(
{
title: title,

10
apps/web/src/components/discussion/discussion.tsx
View file

@ -26,7 +26,6 @@ import {
MoreHorizontalIcon,
TrashIcon,
} from "lucide-react";
import { signIn, useSession } from "next-auth/react";
import * as React from "react";
import { Controller, useForm } from "react-hook-form";
@ -57,8 +56,7 @@ function NewCommentForm({
}) {
const { t } = useTranslation();
const poll = usePoll();
const { user } = useUser();
const session = useSession();
const { user, createGuestIfNeeded } = useUser();
const { participants } = useParticipants();
const authorName = React.useMemo(() => {
@ -98,11 +96,7 @@ function NewCommentForm({
<form
className="w-full space-y-2.5"
onSubmit={handleSubmit(async ({ authorName, content }) => {
if (session.status !== "authenticated") {
await signIn("guest", {
redirect: false,
});
}
await createGuestIfNeeded();
await addComment.mutateAsync({ authorName, content, pollId });
reset({ authorName, content: "" });
onSubmit?.();

10
apps/web/src/components/new-participant-modal.tsx
View file

@ -7,7 +7,6 @@ import { FormMessage } from "@rallly/ui/form";
import { Input } from "@rallly/ui/input";
import * as Sentry from "@sentry/nextjs";
import { TRPCClientError } from "@trpc/client";
import { signIn, useSession } from "next-auth/react";
import { useForm } from "react-hook-form";
import z from "zod";
@ -91,8 +90,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
const isEmailRequired = poll.requireParticipantEmail;
const { user } = useUser();
const session = useSession();
const { user, createGuestIfNeeded } = useUser();
const isLoggedIn = !user.isGuest;
const { register, setError, formState, handleSubmit } =
useForm<NewParticipantFormData>({
@ -113,11 +111,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
<form
onSubmit={handleSubmit(async (data) => {
try {
if (session.status !== "authenticated") {
await signIn("guest", {
redirect: false,
});
}
await createGuestIfNeeded();
const newParticipant = await addParticipant.mutateAsync({
name: data.name,
votes: props.votes,

90
apps/web/src/components/user-provider.tsx
View file

@ -1,14 +1,11 @@
"use client";
import { usePostHog } from "@rallly/posthog/client";
import { useRouter } from "next/navigation";
import type { Session } from "next-auth";
import { signOut, useSession } from "next-auth/react";
import { signIn, signOut } from "next-auth/react";
import React from "react";
import { useSubscription } from "@/contexts/plan";
import { PreferencesProvider } from "@/contexts/preferences";
import { useTranslation } from "@/i18n/client";
import { trpc } from "@/trpc/client";
import { isOwner } from "@/utils/permissions";
import { useRequiredContext } from "./use-required-context";
@ -16,23 +13,20 @@ import { useRequiredContext } from "./use-required-context";
type UserData = {
id?: string;
name: string;
email?: string | null;
email?: string;
isGuest: boolean;
tier: "guest" | "hobby" | "pro";
timeZone?: string | null;
timeFormat?: "hours12" | "hours24" | null;
weekStart?: number | null;
image?: string | null;
locale?: string | null;
image?: string;
};
export const UserContext = React.createContext<{
user: UserData;
refresh: (data?: Record<string, unknown>) => Promise<Session | null>;
refresh: () => void;
ownsObject: (obj: {
userId?: string | null;
guestId?: string | null;
}) => boolean;
createGuestIfNeeded: () => Promise<void>;
logout: () => Promise<void>;
} | null>(null);
@ -58,16 +52,37 @@ export const IfGuest = (props: { children?: React.ReactNode }) => {
return <>{props.children}</>;
};
export const UserProvider = (props: { children?: React.ReactNode }) => {
const session = useSession();
const user = session.data?.user;
type BaseUser = {
id: string;
tier: "guest" | "hobby" | "pro";
image?: string;
name?: string;
email?: string;
};
type RegisteredUser = BaseUser & {
email: string;
name: string;
tier: "hobby" | "pro";
};
type GuestUser = BaseUser & {
tier: "guest";
};
export const UserProvider = ({
children,
user,
}: {
children?: React.ReactNode;
user?: RegisteredUser | GuestUser;
}) => {
const subscription = useSubscription();
const updatePreferences = trpc.user.updatePreferences.useMutation();
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const router = useRouter();
const posthog = usePostHog();
const isGuest = !user?.email;
const isGuest = !user || user.tier === "guest";
const tier = isGuest ? "guest" : subscription?.active ? "pro" : "hobby";
React.useEffect(() => {
@ -76,9 +91,7 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
email: user.email,
name: user.name,
tier,
timeZone: user.timeZone ?? null,
image: user.image ?? null,
locale: user.locale ?? i18n.language,
image: user.image,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -90,17 +103,20 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
user: {
id: user?.id,
name: user?.name ?? t("guest"),
email: user?.email || null,
email: user?.email,
isGuest,
tier,
timeZone: user?.timeZone ?? null,
image: user?.image ?? null,
locale: user?.locale ?? i18n.language,
image: user?.image,
},
refresh: async (data) => {
createGuestIfNeeded: async () => {
if (!user) {
await signIn("guest", {
redirect: false,
});
router.refresh();
return await session.update(data);
}
},
refresh: router.refresh,
logout: async () => {
await signOut();
posthog?.capture("logout");
@ -111,27 +127,7 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
},
}}
>
<PreferencesProvider
initialValue={{
locale: user?.locale ?? undefined,
timeZone: user?.timeZone ?? undefined,
timeFormat: user?.timeFormat ?? undefined,
weekStart: user?.weekStart ?? undefined,
}}
onUpdate={async (newPreferences) => {
if (!isGuest) {
await updatePreferences.mutateAsync({
locale: newPreferences.locale ?? undefined,
timeZone: newPreferences.timeZone ?? undefined,
timeFormat: newPreferences.timeFormat ?? undefined,
weekStart: newPreferences.weekStart ?? undefined,
});
}
await session.update(newPreferences);
}}
>
{props.children}
</PreferencesProvider>
{children}
</UserContext.Provider>
);
};

65
apps/web/src/contexts/preferences.tsx
View file

@ -1,16 +1,22 @@
"use client";
import type { TimeFormat } from "@rallly/database";
import React from "react";
import { useSetState } from "react-use";
import { useLocalStorage } from "react-use";
import { z } from "zod";
import { useRequiredContext } from "@/components/use-required-context";
import { useUser } from "@/components/user-provider";
import { trpc } from "@/trpc/client";
type Preferences = {
timeZone?: string | null;
locale?: string | null;
timeFormat?: TimeFormat | null;
weekStart?: number | null;
timeZone?: string;
timeFormat?: TimeFormat;
weekStart?: number;
};
const timeFormatSchema = z.enum(["hours12", "hours24"]);
type PreferencesContextValue = {
preferences: Preferences;
updatePreferences: (preferences: Partial<Preferences>) => Promise<void>;
@ -23,21 +29,58 @@ const PreferencesContext = React.createContext<PreferencesContextValue | null>(
export const PreferencesProvider = ({
children,
initialValue,
onUpdate,
}: {
children?: React.ReactNode;
initialValue: Partial<Preferences>;
onUpdate?: (preferences: Partial<Preferences>) => Promise<void>;
}) => {
const [preferences, setPreferences] = useSetState<Preferences>(initialValue);
const { user } = useUser();
const [preferredTimezone, setPreferredTimezone] = useLocalStorage(
"rallly.preferredTimezone",
initialValue.timeZone,
);
const [preferredTimeFormat, setPreferredTimeFormat] = useLocalStorage(
"rallly.preferredTimeFormat",
initialValue.timeFormat,
{
raw: false,
serializer: timeFormatSchema.parse,
deserializer: timeFormatSchema.optional().catch(undefined).parse,
},
);
const [preferredWeekStart, setPreferredWeekStart] = useLocalStorage(
"rallly.preferredWeekStart",
initialValue.weekStart,
);
const updatePreferences = trpc.user.updatePreferences.useMutation();
return (
<PreferencesContext.Provider
value={{
preferences,
preferences: {
timeZone: preferredTimezone,
timeFormat: preferredTimeFormat,
weekStart: preferredWeekStart,
},
updatePreferences: async (newPreferences) => {
setPreferences(newPreferences);
await onUpdate?.(newPreferences);
if (newPreferences.timeZone) {
setPreferredTimezone(newPreferences.timeZone);
}
if (newPreferences.timeFormat) {
setPreferredTimeFormat(newPreferences.timeFormat);
}
if (newPreferences.weekStart) {
setPreferredWeekStart(newPreferences.weekStart);
}
if (!user.isGuest) {
await updatePreferences.mutateAsync({
timeZone: newPreferences.timeZone ?? undefined,
timeFormat: newPreferences.timeFormat ?? undefined,
weekStart: newPreferences.weekStart ?? undefined,
});
}
},
}}
>

4
apps/web/src/data/get-user.ts
View file

@ -18,6 +18,8 @@ export const getUser = cache(async () => {
image: true,
locale: true,
timeZone: true,
timeFormat: true,
weekStart: true,
subscription: {
select: {
active: true,
@ -37,6 +39,8 @@ export const getUser = cache(async () => {
image: user.image ?? undefined,
locale: user.locale ?? undefined,
timeZone: user.timeZone ?? undefined,
timeFormat: user.timeFormat ?? undefined,
weekStart: user.weekStart ?? undefined,
isPro: user.subscription?.active ?? false,
};
});

27
apps/web/src/next-auth.ts
View file

@ -4,7 +4,6 @@ import { redirect } from "next/navigation";
import NextAuth from "next-auth";
import type { Provider } from "next-auth/providers";
import { cache } from "react";
import z from "zod";
import { CustomPrismaAdapter } from "./auth/adapters/prisma";
import { isEmailBanned, isEmailBlocked } from "./auth/helpers/is-email-blocked";
@ -17,13 +16,6 @@ import { OIDCProvider } from "./auth/providers/oidc";
import { RegistrationTokenProvider } from "./auth/providers/registration-token";
import { nextAuthConfig } from "./next-auth.config";
const sessionUpdateSchema = z.object({
locale: z.string().nullish(),
timeFormat: z.enum(["hours12", "hours24"]).nullish(),
timeZone: z.string().nullish(),
weekStart: z.number().nullish(),
});
const {
auth: originalAuth,
handlers,
@ -162,17 +154,7 @@ const {
return true;
},
async jwt({ token, session }) {
if (session) {
const parsed = sessionUpdateSchema.safeParse(session);
if (parsed.success) {
Object.entries(parsed.data).forEach(([key, value]) => {
token[key] = value;
});
} else {
console.error(parsed.error);
}
} else {
async jwt({ token }) {
const userId = token.sub;
const isGuest = userId?.startsWith("guest-");
@ -184,9 +166,6 @@ const {
select: {
name: true,
email: true,
timeFormat: true,
timeZone: true,
weekStart: true,
image: true,
},
});
@ -195,10 +174,6 @@ const {
token.name = user.name;
token.email = user.email;
token.picture = user.image;
token.timeFormat = user.timeFormat;
token.timeZone = user.timeZone;
token.weekStart = user.weekStart;
}
}
}

7
apps/web/src/trpc/routers/auth.ts
View file

@ -97,6 +97,8 @@ export const auth = router({
token: z.string(),
code: z.string(),
timeZone: z.string().optional(),
weekStart: z.number().min(0).max(6).optional(),
timeFormat: z.enum(["hours12", "hours24"]).optional(),
locale: z.string().optional(),
}),
)
@ -118,6 +120,8 @@ export const auth = router({
name,
email,
timeZone: input.timeZone,
timeFormat: input.timeFormat,
weekStart: input.weekStart,
locale: input.locale,
},
});
@ -139,6 +143,9 @@ export const auth = router({
name: user.name,
timeZone: input.timeZone,
locale: input.locale,
tier: "hobby",
weekStart: input.weekStart,
timeFormat: input.timeFormat,
},
},
});

14
apps/web/src/utils/dayjs.tsx
View file

@ -14,11 +14,11 @@ import relativeTime from "dayjs/plugin/relativeTime";
import timezone from "dayjs/plugin/timezone";
import updateLocale from "dayjs/plugin/updateLocale";
import utc from "dayjs/plugin/utc";
import { useParams } from "next/navigation";
import * as React from "react";
import { useAsync } from "react-use";
import { usePreferences } from "@/contexts/preferences";
import { useTranslation } from "@/i18n/client";
import { getBrowserTimeZone, normalizeTimeZone } from "@/utils/date-time-utils";
import { useRequiredContext } from "../components/use-required-context";
@ -203,11 +203,10 @@ export const DayjsProvider: React.FunctionComponent<{
};
};
}> = ({ config, children }) => {
const locale = useParams()?.locale as string;
const l = config?.locale ?? locale ?? "en";
const locale = config?.locale ?? "en";
const state = useAsync(async () => {
return await dayjsLocales[l].import();
}, [l]);
return await dayjsLocales[locale].import();
}, [locale]);
const preferredTimeZone = React.useMemo(
() =>
@ -234,7 +233,7 @@ export const DayjsProvider: React.FunctionComponent<{
}
const dayjsLocale = state.value;
const localeConfig = dayjsLocales[l];
const localeConfig = dayjsLocales[locale];
const localeTimeFormat = localeConfig.timeFormat;
if (config?.localeOverrides) {
@ -278,10 +277,11 @@ export const ConnectedDayjsProvider = ({
children,
}: React.PropsWithChildren) => {
const { preferences } = usePreferences();
const { i18n } = useTranslation();
return (
<DayjsProvider
config={{
locale: preferences.locale ?? undefined,
locale: i18n.language,
timeZone: preferences.timeZone ?? undefined,
localeOverrides: {
weekStart: preferences.weekStart ?? undefined,