feat: use custom session and user types

app/layout/Layout.tsx

@@ -12,6 +12,7 @@ import Navigation from './Navigation';
 import BottomAlertProvider from './BottomAlert';
 import { useSession } from 'next-auth/react';
 import { useEffect } from 'react';
+import { User } from 'next-auth';
 
 const headerPlusFooterHeight = '152px';
 
@@ -108,11 +109,11 @@ const routes: Route[] = [
   { path: '/realm', label: 'Realm Profile', roles: ['user'], hide: true },
 ];
 
-const LeftMenuItems = ({ currentUser, currentPath }: { currentUser: any; currentPath: string }) => {
-  let roles = ['guest'];
+const LeftMenuItems = ({ currentUser, currentPath }: { currentUser: Partial<User>; currentPath: string }) => {
+  let roles: string[] = ['guest'];
 
   if (currentUser) {
-    roles = currentUser?.client_roles?.length > 0 ? currentUser.client_roles : ['user'];
+    roles = currentUser?.client_roles?.length! > 0 ? currentUser.client_roles! : ['user'];
   }
 
   const isCurrent = (path: string) => currentPath === path || currentPath.startsWith(`${path}/`);
@@ -158,7 +159,7 @@ const RightMenuItems = () => (
 function Layout({ children, onLoginClick, onLogoutClick }: any) {
   const router = useRouter();
   const { data } = useSession();
-  const currentUser: any = data?.user;
+  const currentUser: Partial<User> = data?.user!;
   const pathname = router.pathname;
 
   const rightSide = currentUser ? (

app/page-partials/my-dashboard/RealmRightPanel.tsx

@@ -1,18 +1,10 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useRouter } from 'next/router';
-import { useForm } from 'react-hook-form';
-import Loader from 'react-loader-spinner';
-import ResponsiveContainer, { MediaRule } from 'components/ResponsiveContainer';
-import Button from '@button-inc/bcgov-theme/Button';
-import Checkbox from '@button-inc/bcgov-theme/Checkbox';
+import React, { useState } from 'react';
 import Tabs from 'components/Tabs';
-import { withBottomAlert, BottomAlert } from 'layout/BottomAlert';
-import { UserSession } from 'types/user-session';
 import styled from 'styled-components';
 import { RealmProfile } from 'types/realm-profile';
 import RealmEdit from './RealmEdit';
 import RealmURIs from './RealmURIs';
-import RealmIDIR from './RealmIDIR';
+import { User } from 'next-auth';
 
 const Container = styled.div`
   font-size: 1rem;
@@ -50,7 +42,7 @@ const Container = styled.div`
 
 interface Props {
   realm: RealmProfile;
-  currentUser: UserSession;
+  currentUser: Partial<User>;
   onUpdate: (realm: RealmProfile) => void;
   onCancel: () => void;
 }

app/pages/api/auth/[...nextauth].ts

@@ -46,6 +46,7 @@ export const authOptions: NextAuthOptions = {
       issuer: process.env.SSO_URL,
       profile(profile) {
         return {
+          ...profile,
           id: profile.sub,
           name: profile.name,
           email: profile.email,
@@ -85,12 +86,6 @@ export const authOptions: NextAuthOptions = {
       if (token) {
         session.accessToken = token.accessToken;
         session.user = token.user;
-        session.user.client_roles = token.client_roles || []; // Adding roles to session.user here
-        session.user.given_name = token.given_name;
-        session.user.family_name = token.family_name;
-        session.user.preferred_username = token.preferred_username;
-        session.user.email = token.email;
-        session.user.idir_username = token.idir_username;
       }
 
       return session;

app/pages/my-dashboard.tsx

@@ -14,6 +14,7 @@ import ResponsiveContainer, { MediaRule } from 'components/ResponsiveContainer';
 import { getRealmProfiles } from 'services/realm';
 import { getSurvey } from 'services/survey';
 import { useSession } from 'next-auth/react';
+import { User } from 'next-auth';
 
 const AlignCenter = styled.div`
   text-align: center;
@@ -39,7 +40,7 @@ const mediaRules: MediaRule[] = [
 
 function MyDashboard() {
   const { data } = useSession();
-  const currentUser: any = data?.user;
+  const currentUser: Partial<User> = data?.user!;
   const [loading, setLoading] = useState<boolean>(false);
   const [answered, setAnswered] = useState<boolean>(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);

app/types/next-auth.d.ts

@@ -0,0 +1,24 @@
+import NextAuth, { DefaultSession } from 'next-auth';
+
+declare module 'next-auth' {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    accessToken: string;
+    user: User & DefaultSession['user'];
+  }
+
+  interface User {
+    id: string;
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+    client_roles: string[];
+    given_name: string | null;
+    family_name: string | null;
+    preferred_username: string | null;
+    email: string | null;
+    idir_username: string | null;
+  }
+}