session.user extended with id prop

README.md

@@ -1,8 +1,6 @@
 # ToDo
 * infinite scroll
     * https://stackoverflow.com/questions/67624601/how-to-implement-infinite-scroll-in-next-js
-* authentication with Google
-    * https://www.telerik.com/blogs/how-to-implement-google-authentication-nextjs-app-using-nextauth
 * multi-user support
 * bill amount entry
     * monthly bill amount summery
@@ -15,3 +13,7 @@ Authentication consists of the following parts:
     * `middleware.ts` = hooks-up `next-auth` into the page processing pipeline - user session is checked before any page is rendered 
     * `auth.ts` = defines how the authentication is done, and how session is checked (used by middleware)
     * `/app/api/[...nextauth]/route.ts` = defines route which shows an authentication form
+
+Source:
+* [How to Implement Google Authentication in a Next.js App Using NextAuth](https://www.telerik.com/blogs/how-to-implement-google-authentication-nextjs-app-using-nextauth)
+* [Next Js 14 Authentication on Edge Runtime](https://www.youtube.com/watch?v=rEopVx0FKGI)

app/lib/auth.ts

@@ -1,15 +1,34 @@
 import NextAuth, { NextAuthConfig } from 'next-auth';
 import GoogleProvider from 'next-auth/providers/google';
+import { Session } from 'next-auth';
 
 const authConfig: NextAuthConfig = {
    callbacks: {
-      // This method verifies if the user is logged in or not
-      // It is called by Next-Auth when the midleware calls
-      // the `auth` method (exported below)
+      // method verifies if the user is logged in or not
+      // -> is called by Next-Auth when the midleware calls the `auth` method (exported below)
       authorized({ auth, request: { nextUrl } }) {
          const isLoggedIn = !!auth?.user;
          return (isLoggedIn);
       },
+      // method is called when the user is not logged in
+      // this is a hack which takes user ID and assigns it temporaty to the token, which is then used to extend Session.user
+      // see: https://stackoverflow.com/questions/70409219/get-user-id-from-session-in-next-auth-client
+      jwt({ token, account, user }) {
+         if (account) {
+           token.accessToken = account.access_token
+           token.id = user?.id
+         }
+         return token
+      },
+      // method is called after the JWT token is created
+      // this is a hack which takes user ID temporaty assigned to the token and assigns it to the Session.user
+      // see: https://stackoverflow.com/questions/70409219/get-user-id-from-session-in-next-auth-client
+      async session({ session, token }:{ session:Session, token:any }) {
+         if(session.user && token) {
+            session.user.id = token.id;
+         }
+         return session;
+       },
    },
    providers: [
       GoogleProvider({

app/lib/types/next-auth.d.ts

@@ -0,0 +1,10 @@
+import NextAuth, { DefaultSession } from 'next-auth';
+import { JWT } from 'next-auth';
+
+declare module 'next-auth' {
+  interface Session {
+    user: {
+      id: string;
+    } & DefaultSession['user'];
+  }
+}