initial commit

.env_example

@@ -0,0 +1,2 @@
+SUPABASE_URL=https://xxxxxxxxxxxxxxxxxxxx.supabase.co
+SUPABASE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxx.xxxxxx-xxxxx

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

README.md

@@ -0,0 +1,71 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+# GENESIS STEPS
+This is what I did to create the boilerplate, it is here for your interest and for my memory, you don't need to repeat these.
+
+Follow instructions from here https://nuxt.com/docs/getting-started/installation
+
+```bash
+# install node
+n lts
+npx nuxi init nuxt3-boilerplate
+code nuxt3-boilerplate/
+npm install
+npm run dev -- -o
+```
+
+To setup supabase and middleware, loosely follow instructions from https://www.youtube.com/watch?v=IcaL1RfnU44
+
+Supabase - new account (free tier), used github oath for supabase account
+
+```
+npm install  @nuxtjs/supabase
+```
+
+add this to nuxt.config.ts
+```
+modules: ['@nuxtjs/supabase']
+```
+
+Follow these instructions to add google oath https://supabase.com/docs/guides/auth/social-login/auth-google

layouts/authenticated.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const supabase = useSupabaseAuthClient();
+const user = await useSupabaseUser();
+const email = (user.value)?user.value.email:null;
+
+async function signout() {
+  const { error } = await supabase.auth.signOut()
+  navigateTo('/');
+}
+
+// onMounted(() => {
+//   watchEffect(() => {
+//     if(user.value) {
+//       console.log('user now has a value');
+//     }
+//   })
+// })
+</script>
+
+<template>
+  <div>
+    <h3>Authenticated Header</h3>
+    <div v-if="email">logged in as: {{ email }}: <button @click="signout()">Sign Out</button></div>
+    <div v-if="!email">Not Logged in</div>
+    <hr>
+    <slot />
+    <hr>
+    <h4>Authenticated Footer</h4>
+  </div>
+</template>

layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h3>Default Header</h3>
+    <hr>
+    <slot />
+    <hr>
+    <h4>Default Footer</h4>
+  </div>
+</template>

middleware/auth.ts

@@ -0,0 +1,13 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const user = useSupabaseUser();
+  if(!user.value && to.path === '/dashboard'){
+    console.log('auth - navigating to login (from dashboard)')
+    navigateTo('login');
+  } else if(user.value && to.path === '/') {
+    console.log('auth - navigating to dashboard (from root)')
+    navigateTo('dashboard');
+  } else if(user.value && to.path === '/login') {
+    console.log('auth - navigating to dashboard (from login)')
+    navigateTo('dashboard');
+  }
+})

nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  typescript: {
+    shim: false
+  },
+  modules: ['@nuxtjs/supabase'],
+})

package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "3.0.0"
+  },
+  "dependencies": {
+    "@nuxtjs/supabase": "^0.3.0"
+  }
+}

pages/dashboard.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['auth'],
+  layout: "authenticated",
+});
+</script>
+<template>
+  <div>
+    <h3>Dashboard</h3>
+  </div>
+</template>

pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['auth'],
+});
+</script>
+<template>
+  <div>
+    <h3>Index</h3>
+    <NuxtLink to="/login">Login</NuxtLink>
+  </div>
+</template>

pages/login.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  definePageMeta({
+    middleware: ['auth'],
+  });
+
+  const supabase = useSupabaseAuthClient();
+
+  async function signInWithGoogle() {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+    })
+  }
+</script>
+
+<template>
+  <div>
+    Login
+    <button @click="signInWithGoogle()">Sign In with Google</button>
+  </div>
+</template>

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}