Merge pull request #41 from Teknologforeningen/nextauth_fixes

Nextauth fixes

.env

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_BASE_URL=https://cms.tf.fi
-NEXT_PUBLIC_GOOGLE_CALENDAR_ID=[email protected]
+NEXT_PUBLIC_GOOGLE_CALENDAR_ID=[email protected]
+NEXT_TELEMETRY_DISABLED=1

components/Page.tsx

@@ -1,6 +1,6 @@
 import { NextPage } from 'next'
 import { PageType } from '@models/page'
-import { marked } from 'marked'
+import { marked, RendererObject } from 'marked'
 import { NavbarLink } from '@lib/api/navbar'
 import Header from '@components/header'
 import { NationLogo } from '@components/footer/Logos'
@@ -9,7 +9,7 @@ import TableOfContents from '@components/TableOfContents'
 import PageSection from '@components/PageSection'
 import Unauthorized from '@components/Unauthorized'
 
-const renderer: marked.RendererObject = {
+const renderer: RendererObject = {
   image(href: string | null): string {
     return `<img class='event-page-image' src=${href} alt='bild' />`
   },

components/TableOfContents.tsx

@@ -6,22 +6,18 @@ const TableOfContents = ({ sections }: { sections: Section[] }) => {
   return (
     <>
       <h2>Innehållsförteckning</h2>
-      <table className="table-auto border-separate text-sm">
-        <tbody>
-          {sections.map((section, i) => (
-            <tr key={i}>
-              {section.attributes.title && (
-                <Link
-                  className="no-underline hover:underline"
-                  href={`#${titleToAnchor(section.attributes.title)}`}
-                >
-                  {section.attributes.title}
-                </Link>
-              )}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      {sections.map(
+        (section, i) =>
+          section.attributes.title && (
+            <Link
+              key={i}
+              className="no-underline hover:underline"
+              href={`#${titleToAnchor(section.attributes.title)}`}
+            >
+              {section.attributes.title}
+            </Link>
+          )
+      )}
     </>
   )
 }

lib/api/privatepage.ts

@@ -3,10 +3,10 @@ import { PageType } from '@models/page'
 import strapi from '@lib/api/strapi'
 
 export async function fetchPrivatePage(
-  sessionToken: string,
+  sessionToken?: string,
   slug?: string
 ): Promise<PageType | null> {
-  if (slug === undefined) return null
+  if (slug === undefined || sessionToken === undefined) return null
   const query = qs.stringify({
     populate: {
       sections: {

package.json

@@ -20,7 +20,7 @@
     "classnames": "^2.3.1",
     "framer-motion": "^10.13.0",
     "googleapis": "105",
-    "marked": "^5.1.0",
+    "marked": "^8.0.0",
     "next": "^13.4.6",
     "next-auth": "^4.23.1",
     "qs": "^6.11.0",

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

@@ -9,6 +9,9 @@ const options: NextAuthOptions = {
       clientId: process.env.KEYCLOAK_CLIENT_ID || 'strapi',
       clientSecret: process.env.KEYCLOAK_CLIENT_SECRET || 'strapi',
       issuer: process.env.KEYCLOAK_ISSUER,
+      httpOptions: {
+        timeout: 10000,
+      },
     }),
   ],
   session: {
@@ -17,16 +20,17 @@ const options: NextAuthOptions = {
   callbacks: {
     async session({ session, token }) {
       session.user.token = token.jwt
-      return { ...session, jwt: token.jwt, id: token.id }
+      return session
     },
     async jwt({ token, user, account }) {
       if (user) {
         const response = await fetch(
           `${process.env.NEXT_PUBLIC_BASE_URL}/api/auth/keycloak/callback?access_token=${account?.access_token}`
         )
-        const data = await response.json()
-        token.jwt = data.jwt
-        token.id = data.user.id
+        if (response.ok) {
+          const data = await response.json()
+          token.jwt = data.jwt
+        }
       }
       return token
     },

pages/medlem/[privatePage].tsx

@@ -19,18 +19,20 @@ const PrivatePage: NextPage<PrivatePageProps> = ({
   session,
   ...props
 }: PrivatePageProps) => (
-  <Page {...props} isPrivate={true} unauthorized={!session || !props.page} />
+  <Page {...props} isPrivate={true} unauthorized={session === null} />
 )
 
 export const getServerSideProps: GetServerSideProps<{
   session: Session | null
 }> = async (context) => {
   const query = context.query.privatePage
   const slug = query instanceof Array ? query[0] : query
-  const session = await getSession(context)
-  const page = session?.user?.token
-    ? await fetchPrivatePage(session?.user.token, slug)
-    : null
+  let session = await getSession(context)
+  const page = await fetchPrivatePage(session?.user.token, slug)
+  // Reset the session if page fetch failed as it's most likely caused by an invalid session token
+  if (page === null) {
+    session = null
+  }
   const { logos, navbarLinks } = await getLayoutProps()
   return {
     props: {

pages/nyheter/[slug].tsx

@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
 import { PostType } from '@models/post'
-import { marked } from 'marked'
+import { marked, RendererObject } from 'marked'
 import { fetchPost, fetchPosts } from '@lib/api/post'
 import { getLayoutProps } from '@utils/helpers'
 import { NationLogo } from '@components/footer/Logos'
@@ -14,7 +14,7 @@ type Props = {
   navbarLinks: NavbarLink[]
 }
 
-const renderer: marked.RendererObject = {
+const renderer: RendererObject = {
   image(href: string | null): string {
     return `<img class='event-page-image' src=${href} alt='bild' />`
   },

yarn.lock

@@ -2076,10 +2076,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-marked@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-5.1.0.tgz#cf51f03ba04dfb3469774029fd0106d258658767"
-  integrity sha512-z3/nBe7aTI8JDszlYLk7dDVNpngjw0o1ZJtrA9kIfkkHcIF+xH7mO23aISl4WxP83elU+MFROgahqdpd05lMEQ==
+marked@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-8.0.0.tgz#e808c02daf9d72485477d3ff9a4e193fec94a4db"
+  integrity sha512-RI/D5csFVreNrFchdKFSdV38GDHJdD7OdmbNWYzGvApPb0A9pyypgfHC/FBH4ugmRE8cr7yg/TH7tu8585eMhA==
 
 merge-stream@^2.0.0:
   version "2.0.0"