@d-mok/quasar-app-extension-quasar-axe 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.1.1",
+    "version": "2.1.2",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",
@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "@handsontable/vue3": "^12.1.0",
-        "@supabase/supabase-js": "^1.35.4",
+        "@supabase/supabase-js": "^2.24.0",
         "@types/lodash": "^4.14.182",
         "@types/papaparse": "^5.3.2",
         "@types/webpack-env": "^1.17.0",

package/src/templates/src/utils/supabase.ts

@@ -2,6 +2,8 @@ import {
     createClient,
     PostgrestError,
     SupabaseClient,
+    Session,
+    SupabaseClientOptions,
 } from '@supabase/supabase-js'
 import { qDialog } from './dialog'
 
@@ -10,78 +12,69 @@ export type {
     PostgrestSingleResponse,
 } from '@supabase/postgrest-js'
 
-declare module '@supabase/supabase-js' {
-    interface SupabaseClient {
-        signIn: () => void
-        accessTokenLife: () => number
-        waitForSignin: () => Promise<void>
-        email: () => string
-        call: <T>(fn: string, params?: object | undefined) => Promise<T[]>
-        callSingle: <T>(fn: string, params?: object | undefined) => Promise<T>
-    }
-}
+class MySupabaseClient extends SupabaseClient {
+    email: string = 'unauthenticated'
+    session: Session | null = null
 
-export let supabase: SupabaseClient
-let SUPABASE_URL = process.env.SUPABASE_URL
-let SUPABASE_KEY = process.env.SUPABASE_KEY
-
-if (SUPABASE_URL && SUPABASE_KEY) {
-    supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
-        autoRefreshToken: true,
-    })
+    constructor(
+        supabaseUrl: string,
+        supabaseKey: string,
+        options?: SupabaseClientOptions<any>
+    ) {
+        super(supabaseUrl, supabaseKey, options)
+        this.auth.onAuthStateChange((event, session) => {
+            console.log('[SUPABASE AUTH]', event, session?.user?.email)
+            this.session = session
+            this.email = session?.user?.email ?? 'unauthenticated'
+        })
+    }
 
-    supabase.signIn = async () => {
-        await supabase.auth.signOut()
-        await supabase.auth.signIn(
-            { provider: 'google' },
-            { redirectTo: window.location.href }
-        )
+    async signIn() {
+        await this.auth.signOut()
+        await this.auth.signInWithOAuth({
+            provider: 'google',
+            options: {
+                redirectTo: window.location.href,
+            },
+        })
     }
 
-    supabase.accessTokenLife = () => {
-        const session = supabase.auth.session()
-        if (session?.expires_at === undefined) return -999999
-        const expireAt = new Date(session.expires_at * 1000)
-        const ms = expireAt.getTime() - new Date().getTime() // ms
-        return Math.round(ms / 1000)
+    async call<T>(fn: string, params?: object | undefined): Promise<T[]> {
+        let { data, error } = await this.rpc<string, any>(fn, params)
+        HANDLE_ERROR(data, error)
+        return data
     }
 
-    supabase.auth.onAuthStateChange((event, session) => {
-        console.log('[SUPABASE AUTH]', event, session?.user?.email)
-    })
+    async callSingle<T>(fn: string, params?: object | undefined): Promise<T> {
+        let { data, error } = await this.rpc<string, any>(fn, params).single()
+        HANDLE_ERROR(data, error)
+        return data as T
+    }
 
-    supabase.waitForSignin = async function (): Promise<void> {
+    async waitForSignin(): Promise<void> {
         setInterval(() => {
-            if (supabase.auth.session() === null) supabase.signIn()
+            if (this.session === null) this.signIn()
         }, 1000)
-        await waitFor(
-            () => supabase.auth.session() !== null,
+        waitFor(
+            () => this.session !== null,
             '[Wait for SignIn] waiting...',
             '[Wait for SignIn] DONE!'
         )
     }
+}
 
-    supabase.call = async function <T>(
-        fn: string,
-        params?: object | undefined
-    ): Promise<T[]> {
-        let { data, error } = await supabase.rpc<T>(fn, params)
-        HANDLE_ERROR(data, error)
-        return data
-    }
-
-    supabase.callSingle = async function <T>(
-        fn: string,
-        params?: object | undefined
-    ): Promise<T> {
-        let { data, error } = await supabase.rpc<T>(fn, params).single()
-        HANDLE_ERROR(data, error)
-        return data
-    }
+export let supabase: MySupabaseClient
+let SUPABASE_URL = process.env.SUPABASE_URL
+let SUPABASE_KEY = process.env.SUPABASE_KEY
 
-    supabase.email = function (): string {
-        return supabase.auth.user()?.email ?? 'unauthenticated'
-    }
+if (SUPABASE_URL && SUPABASE_KEY) {
+    supabase = new MySupabaseClient(SUPABASE_URL, SUPABASE_KEY, {
+        auth: {
+            autoRefreshToken: true,
+            persistSession: true,
+            detectSessionInUrl: true,
+        },
+    })
 }
 
 export function HANDLE_ERROR<T>(
@@ -116,13 +109,13 @@ async function waitFor(
     doneMsg: string
 ) {
     return new Promise(resolve => {
-        function checker() {
+        async function checker() {
             if (predicate()) {
                 console.log(doneMsg)
                 resolve(true)
             } else {
                 console.log(waitingMsg)
-                setTimeout(() => checker(), 50)
+                setTimeout(checker, 50)
             }
         }
         checker()