local https and ssr auth (#215)

frontend/.gitignore

@@ -26,3 +26,6 @@ logs
 pnpm-lock.yaml
 
 .npmrc
+
+server.crt
+server.key

frontend/README.md

@@ -13,6 +13,18 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu
 
 ## Setup
 
+Set the following mapping in your `/etc/hosts` file
+`127.0.0.1 local.beaconcha.in`
+
+Create server certificates for locally running on https, by runing this comands in the console
+```bash
+openssl genrsa 2048 > server.key
+chmod 400 server.key
+openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
+```
+Set the following env variable (needed to load local mock data): 
+`export NODE_TLS_REJECT_UNAUTHORIZED=0`
+
 Make sure to install the dependencies:
 
 copy .npmrc-example to .npmrc and replace YOURKEY with your fontawesome API key
@@ -33,7 +45,7 @@ bun install
 
 ## Development Server
 
-Start the development server on `http://localhost:3000`:
+Start the development server on `https://local.beaconcha.in:3000/`:
 
 ```bash
 # npm

frontend/components/bc/DataWrapper.vue

@@ -5,9 +5,6 @@ const { getUser } = useUserStore()
 
 await useAsyncData('get_user', () => getUser())
 
-// TODO: load user on server once we fix SSR
-await useAsyncData('get_user', () => getUser(), { server: false })
-
 </script>
 <template>
   <slot />

frontend/composables/useCustomFetch.ts

@@ -145,6 +145,7 @@ const mapping: Record<string, MappingData> = {
 }
 
 export function useCustomFetch () {
+  const headers = useRequestHeaders(['cookie'])
   const { showError } = useBcToast()
   const { t: $t } = useI18n()
 
@@ -168,11 +169,11 @@ export function useCustomFetch () {
     let baseURL = map.mock ? '../mock' : map.legacy ? legacyApiClient : apiClient
 
     if (process.server) {
-      baseURL = map.mock ? `${url.origin}/mock` : map.legacy ? pConfig?.legacyApiServer : pConfig?.apiServer
+      baseURL = map.mock ? `${url.origin.replace('http:', 'https:')}/mock` : map.legacy ? pConfig?.legacyApiServer : pConfig?.apiServer
     }
 
+    options.headers = new Headers({ ...options.headers, ...headers })
     if (apiKey) {
-      options.headers = new Headers({})
       options.headers.append('Authorization', `Bearer ${apiKey}`)
     }
     options.credentials = 'include'

frontend/nuxt.config.ts

@@ -20,6 +20,12 @@ try {
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  devServer: {
+    https: {
+      key: 'server.key',
+      cert: 'server.crt'
+    }
+  },
   runtimeConfig: {
     public: {
       apiClient: '',

frontend/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host=local.beaconcha.in",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",