My lovely ASP is back....

next.config.mjs

@@ -10,6 +10,7 @@ const config = {
   reactStrictMode: true,
   images: {
     domains: [
+      "mixyboos.dev.fergl.ie",
       "cloudflare-ipfs.com",
       "avatars.githubusercontent.com",
       "mixyboos.twic.pics",

src/app/(loggedin)/dashboard/layout.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Sidebar from "@/lib/components/layout/sidebar/Sidebar";
+import Sidebar from "@/lib/components/layout/sidebar";
 import Loading from "@/lib/components/widgets/Loading";
 import { useSession } from "next-auth/react";
 import React from "react";
@@ -8,9 +8,10 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
   const { data: session } = useSession();
 
   if (!session) return <Loading />;
+
   return (
     <div className="mx-20 -mb-16 flex h-screen overflow-hidden">
-      <Sidebar session={session} />
+      <Sidebar />
       <div className="w-full">{children}</div>
     </div>
   );

src/app/debug/page.tsx

@@ -1,9 +1,10 @@
 import Session from "@/lib/components/debug/Session";
+import { authOptions } from "@/lib/services/auth/config";
 import { getServerSession } from "next-auth";
 import React from "react";
 
 const IndexPage = () => {
-  const session = getServerSession();
+  const session = getServerSession(authOptions);
   return <Session serverSession={session} />;
 };
 

src/lib/components/layout/sidebar/index.ts

@@ -0,0 +1,3 @@
+import Sidebar from "./sidebar";
+
+export default Sidebar;

src/lib/components/layout/sidebar/sidebar.tsx

@@ -15,14 +15,12 @@ import { CgSandClock } from "react-icons/cg";
 import { BiCategoryAlt } from "react-icons/bi";
 import Loading from "../../widgets/Loading";
 import UserImage from "../../widgets/UserImage";
-import { type Session } from "next-auth";
+import { useSession } from "next-auth/react";
 
-type DashboardSidebarProps = {
+const Sidebar = () => {
-  session: Session | undefined;
-};
-
-const DashboardSidebar = ({ session }: DashboardSidebarProps) => {
   const router = useRouter();
+  const { data: session } = useSession();
+
   const _sidebarItemClick = (path: string | undefined): void => {
     if (!path) return;
     if (path.includes("dashboard")) {
@@ -170,4 +168,4 @@ const DashboardSidebar = ({ session }: DashboardSidebarProps) => {
   );
 };
 
-export default DashboardSidebar;
+export default Sidebar;

src/lib/services/auth/config.ts

@@ -22,7 +22,7 @@ export const authOptions: AuthOptions = {
     CredentialsProvider({
       name: "Email and Password",
       credentials: {
-        userName: {
+        username: {
           label: "Username",
           type: "text",
           placeholder: "Username or email address",
@@ -40,7 +40,7 @@ export const authOptions: AuthOptions = {
             return false;
           }
           const token = await new AuthService().getAuthToken(
-            credentials.userName,
+            credentials.username,
             credentials.password,
           );
 
@@ -82,6 +82,7 @@ export const authOptions: AuthOptions = {
       return true;
     },
     async session({ session, token }) {
+      session.id = token.sub as string;
       session.user.accessToken = token.accessToken as string;
       session.user.displayName = token.displayName as string;
       session.user.profileImage = token.profileImage as string;

src/types/next-auth.d.ts

@@ -7,6 +7,7 @@ declare module "next-auth" {
    * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
    */
   interface Session {
+    id: string;
     user: User;
   }
   interface User {