@xouteiro/auth_npm 1.0.0 → 1.0.1

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@xouteiro/auth_npm",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "1.0.1",
+  "description": "Authentication package for Supabase",
+  "main": "src/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsup"
   },
-  "keywords": [],
+  "keywords": [
+    "supabase",
+    "auth",
+    "authentication"
+  ],
   "author": "",
   "license": "ISC",
   "dependencies": {
@@ -15,6 +19,10 @@
     "@supabase/supabase-js": "^2.52.1"
   },
   "devDependencies": {
-    "tsup": "^8.5.0"
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "esbuild": "^0.25.8",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   }
 }

package/src/AuthWrapper.jsx

@@ -1,35 +1,39 @@
-import { useEffect, useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Auth } from '@supabase/auth-ui-react'
 import { ThemeSupa } from '@supabase/auth-ui-shared'
 import { supabase } from './supabaseClient'
 
-export default function AuthWrapper({ onAuth }) {
+export default function AuthWrapper({ onAuth, providers = ['google', 'github'], theme = 'dark' }) {
+  if (!supabase) {
+    throw new Error('Supabase client is not initialized. Call initializeSupabase() before using AuthWrapper.')
+  }
+
   const [session, setSession] = useState(null)
 
   useEffect(() => {
     supabase.auth.getSession().then(({ data: { session } }) => {
       setSession(session)
-      if (session) onAuth(session)
+      if (session) onAuth?.(session)
     })
 
     const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
       setSession(session)
-      if (session) onAuth(session)
+      if (session) onAuth?.(session)
     })
 
-    return () => subscription.unsubscribe()
-  }, [])
+    return () => subscription?.unsubscribe()
+  }, [onAuth])
 
   if (!session) {
     return (
       <Auth
         supabaseClient={supabase}
         appearance={{ theme: ThemeSupa }}
-        providers={['google', 'github']}
-        theme="dark"
+        providers={providers}
+        theme={theme}
       />
     )
   }
 
   return <div>✅ Logged in as: {session.user.email}</div>
-}
+}

package/src/LogoutButton.jsx

@@ -0,0 +1,12 @@
+import { useAuth } from './useAuth'
+
+export default function LogoutButton({ supabaseClient, onLogout }) {
+  const { signOut } = useAuth(supabaseClient)
+
+  const handleLogout = async () => {
+    await signOut()
+    onLogout?.()
+  }
+
+  return <button onClick={handleLogout}>🚪 Log out</button>
+}

package/src/index.js

@@ -0,0 +1,5 @@
+export { default as AuthWrapper } from './AuthWrapper'
+export { default as LogoutButton } from './LogoutButton'
+export { useAuth } from './useAuth'
+export { isAdmin } from './utils'
+export { supabase } from './supabaseClient'

package/src/supabaseClient.js

@@ -1,6 +1,12 @@
 import { createClient } from '@supabase/supabase-js'
 
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
+let supabase = null
 
-export const supabase = createClient(supabaseUrl, supabaseKey)
+export function initializeSupabase(url, anonKey) {
+  if (!url || !anonKey) {
+    throw new Error('Supabase URL and Anon Key are required to initialize the client.')
+  }
+  supabase = createClient(url, anonKey)
+}
+
+export { supabase }

package/src/useAuth.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+
+export function useAuth(supabaseClient) {
+  const [session, setSession] = useState(null)
+
+  useEffect(() => {
+    supabaseClient.auth.getSession().then(({ data: { session } }) => {
+      setSession(session)
+    })
+
+    const { data: subscription } = supabaseClient.auth.onAuthStateChange((_event, session) => {
+      setSession(session)
+    })
+
+    return () => subscription?.unsubscribe()
+  }, [supabaseClient])
+
+  const signOut = async () => {
+    await supabaseClient.auth.signOut()
+    setSession(null)
+  }
+
+  return { session, signOut }
+}

package/src/utils.js

@@ -0,0 +1,4 @@
+export function isAdmin(user) {
+    return user?.role === 'admin' // You can customize this later!
+  }
+  

package/tsup.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.js'], // Entry point for your package
+  format: ['esm', 'cjs'], // Output formats
+  clean: true, // Clean the output directory before building
+  esbuildOptions(options) {
+    options.loader = {
+      '.js': 'jsx', // Treat .js files as JSX
+      '.jsx': 'jsx', // Treat .jsx files as JSX
+    }
+  },
+})