fix: store profile picture in db to prevent header overload

app/routes/auth/login/page.tsx

@@ -1,6 +1,6 @@
 import { AlertCircle } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Form, redirect, useSearchParams } from "react-router";
+import { Form, Link as RouterLink, redirect, useSearchParams } from "react-router";
 
 import Button from "~/components/button";
 import Card from "~/components/card";
@@ -139,11 +139,11 @@ export default function Page({ loaderData, actionData }: Route.ComponentProps) {
             </Button>
           </Form>
           {isOidcConnectorEnabled ? (
-            <Link to="/oidc/start">
+            <RouterLink to="/oidc/start" prefetch="none" reloadDocument>
               <Button className="mt-2 w-full" disabled={oidcErrorCodes.length > 0} variant="light">
                 Single Sign-On
               </Button>
-            </Link>
+            </RouterLink>
           ) : undefined}
         </Card>
       </div>

app/routes/auth/oidc-callback.ts

@@ -103,6 +103,7 @@ export async function loader({ request, context }: Route.LoaderArgs) {
     const userId = await context.auth.findOrCreateUser(claims.sub, {
       name,
       email: userInfo.email,
+      picture,
     });
 
     try {
@@ -122,7 +123,6 @@ export async function loader({ request, context }: Route.LoaderArgs) {
           name,
           email: userInfo.email,
           username,
-          picture,
         }),
       },
     });

app/server/db/schema.ts

@@ -24,6 +24,7 @@ export const users = sqliteTable("users", {
   sub: text("sub").notNull().unique(),
   name: text("name"),
   email: text("email"),
+  picture: text("picture"),
   role: text("role").notNull().default("member"),
   headscale_user_id: text("headscale_user_id").unique(),
   created_at: integer("created_at", { mode: "timestamp" }).$default(() => new Date()),

app/server/web/auth.ts

@@ -51,7 +51,6 @@ interface CookiePayload {
     name: string;
     email?: string;
     username?: string;
-    picture?: string;
   };
 }
 
@@ -149,9 +148,11 @@ export class AuthService {
         role,
         headscaleUserId: user.headscale_user_id ?? undefined,
       },
-      profile: payload.profile ?? {
-        name: user.name ?? user.sub,
-        email: user.email ?? undefined,
+      profile: {
+        name: payload.profile?.name ?? user.name ?? user.sub,
+        email: payload.profile?.email ?? user.email ?? undefined,
+        username: payload.profile?.username,
+        picture: user.picture ?? undefined,
       },
     };
   }
@@ -278,7 +279,7 @@ export class AuthService {
    */
   async findOrCreateUser(
     subject: string,
-    profile?: { name?: string; email?: string },
+    profile?: { name?: string; email?: string; picture?: string },
   ): Promise<string> {
     const [existing] = await this.opts.db
       .select()
@@ -292,6 +293,7 @@ export class AuthService {
         .set({
           name: profile?.name,
           email: profile?.email,
+          picture: profile?.picture,
           last_login_at: new Date(),
           updated_at: new Date(),
         })
@@ -305,6 +307,7 @@ export class AuthService {
       sub: subject,
       name: profile?.name,
       email: profile?.email,
+      picture: profile?.picture,
       role: "member",
       caps: capsForRole("member"),
     });