Fix session not persisted after login on page reload (#133)

* prefer session cookie and keep login state

* format

* cleanup

* add missing proxies

* Revert "add missing proxies"

This reverts commit cda19b1.

* Revert "cleanup"

This reverts commit 52c2222.

* Revert "prefer session cookie and keep login state"

This reverts commit aeaf45b.

* simplify changes

* acess `siteURL` via nuxt.options instead of `useRuntimeConfig`

Author: ComfortablyCoding

.directus/docker-compose.yaml

@@ -47,7 +47,6 @@ services:
 
       # These is helpful for local developement but should probably be removed in production
       CORS_ENABLED: 'true'
-      REFRESH_TOKEN_COOKIE_DOMAIN: 'localhost'
       EXTENSIONS_AUTO_RELOAD: 'true'
 
       WEBSOCKETS_ENABLED: 'true'

.env.example

@@ -3,7 +3,7 @@
 
 DIRECTUS_URL="https://your-instance.directus.app"
 DIRECTUS_SERVER_TOKEN="your_directus_server_token_for_server_only_routes"
-SITE_URL="http://localhost:3000"
+NUXT_PUBLIC_SITE_URL="http://localhost:3000"
 
 # Stripe Setup (If you want to allow payments within the portal)
 STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxx

modules/directus/index.ts

@@ -1,17 +1,18 @@
-import { fileURLToPath } from 'url';
+import { createDirectus, readItems, readSingleton, rest } from '@directus/sdk';
 import {
-	defineNuxtModule,
+	addImports,
+	addImportsDir,
 	addPlugin,
 	createResolver,
-	addImportsDir,
-	addImports,
+	defineNuxtModule,
 	extendRouteRules,
 	useLogger,
 } from '@nuxt/kit';
 import { defu } from 'defu';
-import { createDirectus, rest, readItems, readSingleton } from '@directus/sdk';
+import { joinURL } from 'ufo';
+import { fileURLToPath } from 'url';
 
-import type { Schema, Globals } from '../../types';
+import type { Globals, Schema } from '../../types';
 
 const log = useLogger();
 
@@ -157,7 +158,9 @@ export default defineNuxtModule({
 		addImportsDir(composables);
 
 		// ** Build Logic **
-		const directus = createDirectus<Schema>(moduleOptions.rest.baseUrl).with(rest());
+		const directus = createDirectus<Schema>(joinURL(nuxt.options.runtimeConfig.public.siteUrl, '/api/proxy')).with(
+			rest(),
+		);
 
 		// Handle Redirects
 		try {

modules/directus/runtime/plugins/auth.ts

@@ -1,24 +1,10 @@
-import type { RestClient, AuthenticationClient } from '@directus/sdk';
-import type { Schema } from '~/types/schema';
-
 import auth from '../middleware/auth';
-import guest from '../middleware/guest';
 import common from '../middleware/common';
+import guest from '../middleware/guest';
 
-import {
-	defineNuxtPlugin,
-	addRouteMiddleware,
-	useRuntimeConfig,
-	useState,
-	useDirectusAuth,
-	useRoute,
-	useNuxtApp,
-} from '#imports';
+import { addRouteMiddleware, defineNuxtPlugin, useDirectusAuth, useRuntimeConfig, useState } from '#imports';
 
 export default defineNuxtPlugin(async () => {
-	const nuxtApp = useNuxtApp();
-	const $directus = nuxtApp.$directus as RestClient<Schema> & AuthenticationClient<Schema>;
-
 	try {
 		const config = useRuntimeConfig().public.directus;
 
@@ -35,23 +21,9 @@ export default defineNuxtPlugin(async () => {
 		const { _loggedIn } = useDirectusAuth();
 
 		if (initialized.value === false) {
-			const { path } = useRoute();
-
-			const { fetchUser, _loggedIn } = useDirectusAuth();
-			const token = await $directus.getToken();
-
-			if (token) {
-				await fetchUser({});
-			} else {
-				const isCallback = path === '/auth/callback';
-				const isLoggedIn = _loggedIn.get() === 'true';
+			const { fetchUser } = useDirectusAuth();
 
-				if (isCallback || isLoggedIn) {
-					if (token) {
-						await fetchUser({});
-					}
-				}
-			}
+			await fetchUser({});
 		}
 
 		initialized.value = true;

modules/directus/runtime/plugins/directus.ts

@@ -1,16 +1,16 @@
-import { createDirectus, rest, authentication } from '@directus/sdk';
+import { authentication, createDirectus, rest } from '@directus/sdk';
+import { joinURL } from 'ufo';
 import type { Schema } from '~/types/schema';
 
-import { defineNuxtPlugin, useRuntimeConfig, useRoute } from '#imports';
+import { defineNuxtPlugin, useRoute, useRuntimeConfig } from '#imports';
 
 export default defineNuxtPlugin((nuxtApp) => {
 	const route = useRoute();
 	const config = useRuntimeConfig();
-	const directusURL = config.public.directus.rest.baseUrl as string;
 
-	const directus = createDirectus<Schema>(directusURL, { globals: { fetch: $fetch } })
-		.with(authentication('cookie', { credentials: 'include' }))
-		.with(rest({ credentials: 'include' }));
+	const directus = createDirectus<Schema>(joinURL(config.public.siteUrl, '/api/proxy'), { globals: { fetch: $fetch } })
+		.with(authentication('session'))
+		.with(rest());
 
 	// ** Live Preview Bits **
 	// Check if we are in preview mode

pages/projects.vue

@@ -47,7 +47,7 @@ const metadata = computed(() => {
 	const seo = pageData?.seo as SEO;
 	return {
 		title: seo?.title ?? pageData?.title ?? undefined,
-		description: seo?.meta_description ?? pageData.headline ? stripHTML(pageData?.headline as string) : undefined,
+		description: (seo?.meta_description ?? pageData.headline) ? stripHTML(pageData?.headline as string) : undefined,
 		image: globals?.og_image ? fileUrl(globals?.og_image) : undefined,
 	};
 });

server/api/proxy/[...].ts

@@ -0,0 +1,16 @@
+import { joinURL } from 'ufo';
+
+export default defineEventHandler(async (event) => {
+	const config = useRuntimeConfig();
+
+	if (!config.public.directus.rest.baseUrl) {
+		throw new Error('Missing `runtimeConfig.apiURL` configuration.');
+	}
+
+	const target = joinURL(config.public.directus.rest.baseUrl, event.path.replace(/^\/api\/proxy\//, ''));
+
+	return proxyRequest(event, target, {
+		cookieDomainRewrite: new URL(config.public.siteUrl).hostname,
+		cookiePathRewrite: '/',
+	});
+});