Move database info to environment variables, work on auth

Author: Not-A-Normal-Robot

README.md

@@ -10,10 +10,25 @@ If you trust the workspace on Visual Studio Code, `bun run dev` will automatical
 
 If you want to disable this, press `Ctrl + Shift + P` and type "Tasks: Manage Automatic Tasks", then disable automatic tasks.
 
+## Setting up
+
+1. Set up your [Supabase](https://supabase.com) project using the database specs on `./assets/types/database.ts`.
+2. Optional: use triggers and RLS to enforce the database schema.
+3. In Project Settings -> API, get your project URL and anonymous key.
+4. Create an `.env` file in the root directory of the project with the following content:
+```.env
+SUPABASE_URL = (your Supabase URL)
+SUPABASE_ANON_KEY = (your Supabase anonymous key)
+```
+5. If you haven't already, install [npm](https://npmjs.com) or any alternatives. (I personally use [Bun](https://bun.sh) for its unparalleled speed, but you can use whatever you want.)
+6. Clone this repository. Or click the green "Code" button and download the ZIP file.
+
+If you want to deploy this using Vercel like I am, you should integrate your Supabase project with Vercel so that the environment variables are accessible:
+In your Supabase project, go to Settings -> Integrations. It should have a "Vercel Integration" section. The rest should be straightforward.
+
 ## Running
 
 Make sure to install the dependencies:
-
 ```bash
 # if you use npm:
 npm install
@@ -24,8 +39,8 @@ yarn install
 # if you use bun:
 bun install
 ```
-Start the development server on `http://localhost:3000`:
 
+Start the development server on `http://localhost:3000`:
 ```bash
 # if you use npm:
 npm run dev

assets/lang/en.ts

@@ -2871,6 +2871,11 @@ We do not expect there to be any cookies used on this site, but just to make sur
     },
     noscriptWarn: "You cannot sign in with JavaScript disabled.",
     alreadySignedIn: "You are already signed in!",
+    error: `An error occurred while signing in:
+{error}
+
+Press OK to go to GitHub Issues, where you can report this error.
+Press Cancel to return to the homepage.`,
   },
   rules: `md_
 # Site Rules

bun.lockb

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { useSupabaseUser } from '#imports';
+
 const localePath = useLocalePath();
 
-function dbg(arg: any): typeof arg {
-    console.log(arg);
-    return arg;
-}
+const { data } = await useSupabaseUser();
+const user = data.user;
 </script>
 
 <template>
@@ -13,16 +13,25 @@ function dbg(arg: any): typeof arg {
             <h1 v-html="$t('common.appName')"></h1>
         </NuxtLink>
         <nav>
-            <NuxtLink :to="localePath('/')" class="hide-no-error"
+            <NuxtLink
+                :to="localePath('/')"
+                class="hide-no-error"
                 v-thtml="$t('common.nav.home')"
             />
-            <NuxtLink :to="localePath('/faq')" class="hide-error"
+            <NuxtLink
+                :to="localePath('/faq')"
+                class="hide-error"
                 v-thtml="$t('common.nav.faq')"
             />
-            <NuxtLink :to="localePath('/map')" class="hide-error"
+            <NuxtLink
+                :to="localePath('/map')"
+                class="hide-error"
                 v-thtml="$t('common.nav.map')"
             />
-            <NuxtLink :to="localePath('/sign-in')" class="hide-noscript hide-error"
+            <NuxtLink
+                :to="localePath('/sign-in')"
+                class="hide-noscript hide-error"
+                v-show="!user"
                 v-thtml="$t('common.nav.signIn')"
             />
         </nav>

components/header.vue

@@ -1,29 +1,34 @@
 import { createClient } from "@supabase/supabase-js";
 import { DBWrapper } from '~/assets/scripts/database';
 
+export const useSupabaseInfo = () => {
+    if(!process.env.SUPABASE_URL || !process.env.SUPABASE_ANON_KEY) {
+        throw new Error("Missing Supabase URL or Anon Key");
+    }
+
+    return {
+        url: process.env.SUPABASE_URL,
+        key: process.env.SUPABASE_ANON_KEY
+    }
+}
+
 /** Creates an instance of the database wrapper. */
 export const useDatabase = () => {
-    const runtimeConfig = useRuntimeConfig();
-    const url = runtimeConfig.public.supabaseUrl;
-    const key = runtimeConfig.public.supabaseAnonKey;
+    const { url, key } = useSupabaseInfo();
 
     return new DBWrapper(url, key);
 };
 
 /** Creates an instance of Supabase. */
 export const useSupabase = () => {
-    const runtimeConfig = useRuntimeConfig();
-    const url = runtimeConfig.public.supabaseUrl;
-    const key = runtimeConfig.public.supabaseAnonKey;
+    const { url, key } = useSupabaseInfo();
 
     return createClient(url, key);
 }
 
 /** Creates an instance of Supabase, then get the current user. */
 export const useSupabaseUser = () => {
-    const runtimeConfig = useRuntimeConfig();
-    const url = runtimeConfig.public.supabaseUrl;
-    const key = runtimeConfig.public.supabaseAnonKey;
+    const { url, key } = useSupabaseInfo();
 
     const supabase = createClient(url, key);
 

composables/database.ts

@@ -0,0 +1 @@
+<template><slot/></template>

layouts/none.vue

@@ -1,14 +1,14 @@
+if(!process.env.SUPABASE_URL || !process.env.SUPABASE_ANON_KEY) {
+  throw new Error(`
+    Could not find Supabase URL or key in environment variables.
+    Are you sure you set it up right?
+    Tip: Check your .env file and refer to the README.`);
+}
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   css: ['~/assets/scss/main.scss'],
 
-  runtimeConfig: {
-    public: {
-      supabaseUrl: 'https://fohgyexhzptaxjqrrrfd.supabase.co',
-      supabaseAnonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvaGd5ZXhoenB0YXhqcXJycmZkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDUwMjQxNTcsImV4cCI6MjAyMDYwMDE1N30.fa7XvwiBbWSe2MLIR6Wkh_OC95uV7UXxt7_25PlyAlc'
-    }
-  },
-
   app: {
     head: {
       meta: [

nuxt.config.ts

@@ -12,6 +12,7 @@
   "dependencies": {
     "@nuxt/kit": "^3.12.3",
     "@nuxtjs/i18n": "^8.3.1",
+    "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.44.2",
     "@types/sanitize-html": "^2.11.0",
     "markdown-it": "^14.1.0",

package.json

@@ -0,0 +1,65 @@
+<template>
+    <noscript>
+        <h1>
+            {{ $t('signIn.noscriptWarn') }}
+        </h1>
+    </noscript>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n();
+const localePath = useLocalePath();
+const router = useRouter();
+const supabase = useSupabase();
+
+function showError(error: Error) {
+    console.error(error);
+
+    // OK (Yes): Go to GitHub Issues
+    // Cancel (No): Go to homepage
+    const response = confirm(t('signIn.error', { error: error.message }));
+
+    if(response) {
+        router.push("https://github.com/techmino-hub/techmino-hub-source-code/issues");
+    } else {
+        router.push(localePath('/'));
+    }
+}
+
+onMounted(async function() {
+    const searchParams = new URLSearchParams(window.location.search);
+    const code = searchParams.get('code');
+    const next = searchParams.get('next') ?? localePath('/');
+    const error = searchParams.get('error');
+
+    if(error) {
+        showError(new Error(error));
+        return;
+    }
+
+    if(!code) {
+        showError(new Error('Code not found'));
+        return;
+    }
+
+    const { error: sessionError } =
+        await supabase.auth.exchangeCodeForSession(code);
+    
+    if(sessionError) {
+        showError(sessionError);
+        return;
+    }
+
+    router.push(next);
+});
+
+definePageMeta({ layout: 'none' });
+</script>
+
+<style scoped>
+h1 {
+    font-size: 2em;
+    text-align: center;
+    margin-top: 1em;
+}
+</style>

pages/auth/oauth-callback.vue

@@ -26,6 +26,7 @@ import { type Provider } from '@supabase/supabase-js';
 import { useSupabase } from '~/composables/database';
 
 const localePath = useLocalePath();
+const router = useRouter();
 
 const supabase = useSupabase();
 
@@ -34,8 +35,21 @@ const user = data.user;
 
 console.debug("user:", user); // DEBUG
 
-function oauth(provider: Provider) {
-    supabase.auth.signInWithOAuth({ provider });
+async function oauth(provider: Provider) {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+        provider,
+        options: {
+            redirectTo: '/auth/oauth-callback'
+        }
+    });
+
+    if(data.url) {
+        router.push(data.url);
+    }
+
+    if(error) {
+        throw error;
+    }
 }
 </script>