Session expiry

package.json

@@ -12,6 +12,7 @@
     "@radix-ui/themes": "^2.0.3",
     "@types/bcryptjs": "^2.4.6",
     "bcryptjs": "^2.4.3",
+    "dayjs": "^1.11.10",
     "lucide-react": "^0.311.0",
     "next": "14.0.4",
     "next-auth": "^4.24.5",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   bcryptjs:
     specifier: ^2.4.3
     version: 2.4.3
+  dayjs:
+    specifier: ^1.11.10
+    version: 1.11.10
   lucide-react:
     specifier: ^0.311.0
     version: 0.311.0(react@18.2.0)
@@ -2038,6 +2041,10 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+    dev: false
+
   /debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:

src/app/api/auth/[...nextauth]/route.ts

@@ -1,9 +1,9 @@
-import NextAuth from "next-auth";
+import NextAuth, { AuthOptions } from "next-auth";
 import CredentialProvider from "next-auth/providers/credentials";
 import { sha256sum } from "@/lib/util";
 import { validateCredentials } from "@/lib/db";
 
-export const authOptions = {
+export const authOptions: AuthOptions = {
   providers: [
     CredentialProvider({
       name: 'Mail account',
@@ -30,6 +30,10 @@ export const authOptions = {
       },
     }),
   ],
+  session: {
+    strategy: 'jwt',
+    maxAge: 4 * 60 * 60 // 4 hours
+  },
 };
 
 const handler = NextAuth(authOptions);

src/lib/components/ui/NavigationPanel.tsx

@@ -5,6 +5,10 @@ import { Avatar, Box, Button, Card, Flex, IconButton, Popover, Text } from "@rad
 import { BookUserIcon, HomeIcon } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
 
 export default function NavigationPanel() {
   const session = useSession();
@@ -35,7 +39,10 @@ export default function NavigationPanel() {
                         radius="full"
                         fallback={session.data.user.name?.slice(0, 1) || "@"}
                       />
-                      <Text size='4'>{session.data.user.email}</Text>
+                      <Flex direction="column">
+                        <Text size='4'>{session.data.user.email}</Text>
+                        <Text weight="light" size="2">Session valid for {dayjs(session.data.expires).fromNow(true)}</Text>
+                      </Flex>
                     </Flex>
                   </Card>