Cfp 7 GitHub auth for login and signup

composables/useSupabaseClient.ts

@@ -0,0 +1,3 @@
+export const useSupabaseClient = () => {
+  return useNuxtApp().$supabase
+}

layouts/auth.vue

@@ -0,0 +1,20 @@
+<!-- layouts/auth.vue -->
+<template>
+  <div class="auth-layout">
+    <NuxtPage />
+  </div>
+</template>
+
+<style scoped>
+.body{
+  margin: 0 !important;
+}
+
+.auth-layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+}
+</style>

layouts/default.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <h1>Deafult Header</h1>
     <slot />
-    <h1>Deafult Header</h1>
   </div>
 </template>

nuxt.config.ts

@@ -1,4 +1,3 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
@@ -11,18 +10,19 @@ export default defineNuxtConfig({
     '@nuxt/scripts',
     '@nuxt/test-utils',
     '@nuxt/ui',
-    '@nuxtjs/supabase'
+    // '@nuxtjs/supabase'
   ],
+
   runtimeConfig: {
+    githubClientId: process.env.GITHUB_CLIENT_ID,
+    githubClientSecret: process.env.GITHUB_CLIENT_SECRET,
+    supabaseUrl: process.env.SUPABASE_URL,
+    supabaseKey: process.env.SUPABASE_ANON_KEY,
+
     public: {
+      githubClientId: process.env.GITHUB_CLIENT_ID,
       supabaseUrl: process.env.SUPABASE_URL,
-      supabaseKey: process.env.SUPABASE_ANON_KEY
-    }
-  },
-  supabase: {
-    url: process.env.SUPABASE_URL,
-    key: process.env.SUPABASE_ANON_KEY,
-    useSsrCookies: true,
-    redirect: false
+      supabaseAnonKey: process.env.SUPABASE_ANON_KEY
+    },
   }
 })

package.json

@@ -21,8 +21,10 @@
     "@nuxt/scripts": "^0.11.8",
     "@nuxt/test-utils": "^3.19.1",
     "@nuxt/ui": "^3.2.0",
+    "@patternfly/elements": "^4.1.0",
     "@prisma/cli-init": "^0.4.0",
     "@prisma/client": "^6.11.0",
+    "@supabase/supabase-js": "^2.51.0",
     "@unhead/vue": "^2.0.11",
     "bcrypt": "^6.0.0",
     "eslint": "^9.30.0",

pages/dashboard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="container" v-if="user">
+    <h2 class="welcome-text">
+      Welcome, {{ user.username || user.email }}
+    </h2>
+    <button @click="logout" class="logout-btn">Logout</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const route = useRoute()
+const user = ref(null)
+
+onMounted(() => {
+  const encodedSession = route.query.session as string
+  const localSession = sessionStorage.getItem('auth_user')
+  const expiry = +sessionStorage.getItem('auth_expiry') || 0
+  console.log(expiry)
+
+  if (encodedSession) {
+    const decoded = JSON.parse(atob(decodeURIComponent(encodedSession)))
+    sessionStorage.setItem('auth_user', JSON.stringify(decoded))
+    sessionStorage.setItem('auth_expiry', `${Date.now() + 60 * 60 * 1000}`) // 1 hour
+    user.value = decoded
+    router.replace('/dashboard') 
+  } else if (localSession && Date.now() < expiry) {
+    user.value = JSON.parse(localSession)
+  } else {
+    router.push('/')
+  }
+})
+
+const logout = () => {
+  sessionStorage.clear()
+  router.push('/')
+}
+</script>