@xouteiro/auth_npm 1.0.6 → 1.0.8

package/src/components/LoginRegisterFlow.jsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import { signInWithEmail } from '../login';
+import { registerWithEmail } from '../register';
+
+const boxStyle = {
+  maxWidth: 380,
+  margin: '40px auto',
+  padding: 32,
+  borderRadius: 14,
+  boxShadow: '0 2px 16px rgba(0,0,0,0.09)',
+  background: '#fff',
+  fontFamily: 'sans-serif',
+};
+
+const tabStyle = (active) => ({
+  flex: 1,
+  padding: 12,
+  border: 'none',
+  borderBottom: active ? '3px solid #0070f3' : '3px solid #eee',
+  background: 'none',
+  fontWeight: active ? 700 : 400,
+  color: active ? '#0070f3' : '#444',
+  cursor: 'pointer',
+  outline: 'none',
+});
+
+const inputStyle = {
+  width: '100%',
+  padding: 10,
+  margin: '10px 0',
+  borderRadius: 6,
+  border: '1px solid #ddd',
+  fontSize: 16,
+};
+
+const buttonStyle = {
+  width: '100%',
+  padding: 12,
+  borderRadius: 6,
+  border: 'none',
+  background: '#0070f3',
+  color: '#fff',
+  fontWeight: 600,
+  fontSize: 16,
+  marginTop: 10,
+  cursor: 'pointer',
+};
+
+const messageStyle = (success) => ({
+  margin: '12px 0',
+  color: success ? '#0a0' : '#d32f2f',
+  background: success ? '#eafbe7' : '#fdeaea',
+  padding: 8,
+  borderRadius: 6,
+  textAlign: 'center',
+  fontSize: 15,
+});
+
+export default function LoginRegisterFlow() {
+  const [mode, setMode] = useState('login');
+  const [identifier, setIdentifier] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [phone, setPhone] = useState('');
+  const [message, setMessage] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const resetFields = () => {
+    setIdentifier('');
+    setPassword('');
+    setUsername('');
+    setPhone('');
+    setMessage(null);
+    setSuccess(false);
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await signInWithEmail(identifier, password);
+    if (error) {
+      setMessage(error.message || 'Login failed');
+      setSuccess(false);
+    } else {
+      setMessage('Login successful!');
+      setSuccess(true);
+      setTimeout(resetFields, 1200);
+    }
+  };
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await registerWithEmail(identifier, password, username, phone);
+    if (error) {
+      setMessage(error.message || 'Registration failed');
+      setSuccess(false);
+    } else {
+      setMessage('Registration successful! Please check your email to confirm.');
+      setSuccess(true);
+      setTimeout(resetFields, 2000);
+    }
+  };
+
+  return (
+    <div style={boxStyle}>
+      <div style={{ display: 'flex', marginBottom: 24 }}>
+        <button style={tabStyle(mode === 'login')} onClick={() => { setMode('login'); setMessage(null); }}>Login</button>
+        <button style={tabStyle(mode === 'register')} onClick={() => { setMode('register'); setMessage(null); }}>Register</button>
+      </div>
+      {mode === 'login' ? (
+        <form onSubmit={handleLogin}>
+          <input
+            style={inputStyle}
+            type="text"
+            placeholder="Email, phone, or username"
+            value={identifier}
+            onChange={e => setIdentifier(e.target.value)}
+            required
+          />
+          <input
+            style={inputStyle}
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+          <button style={buttonStyle} type="submit">Login</button>
+        </form>
+      ) : (
+        <form onSubmit={handleRegister}>
+          <input
+            style={inputStyle}
+            type="text"
+            placeholder="Email"
+            value={identifier}
+            onChange={e => setIdentifier(e.target.value)}
+            required
+          />
+          <input
+            style={inputStyle}
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+          <input
+            style={inputStyle}
+            type="text"
+            placeholder="Username (optional)"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+          />
+          <input
+            style={inputStyle}
+            type="text"
+            placeholder="Phone (optional)"
+            value={phone}
+            onChange={e => setPhone(e.target.value)}
+          />
+          <button style={buttonStyle} type="submit">Register</button>
+        </form>
+      )}
+      {message && <div style={messageStyle(success)}>{message}</div>}
+    </div>
+  );
+}

package/src/components/LogoutButton.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { logout } from '../logout';
+
+const boxStyle = {
+  maxWidth: 350,
+  margin: '24px auto',
+  padding: 20,
+  borderRadius: 10,
+  boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
+  background: '#fff',
+  fontFamily: 'sans-serif',
+  textAlign: 'center',
+};
+
+const buttonStyle = {
+  padding: '10px 28px',
+  borderRadius: 6,
+  border: 'none',
+  background: '#0070f3',
+  color: '#fff',
+  fontWeight: 600,
+  fontSize: 16,
+  cursor: 'pointer',
+};
+
+const messageStyle = (success) => ({
+  margin: '12px 0',
+  color: success ? '#0a0' : '#d32f2f',
+  background: success ? '#eafbe7' : '#fdeaea',
+  padding: 8,
+  borderRadius: 6,
+  textAlign: 'center',
+  fontSize: 15,
+});
+
+export default function LogoutButton() {
+  const [message, setMessage] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleLogout = async () => {
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await logout();
+    if (error) {
+      setMessage(error.message || 'Logout failed');
+      setSuccess(false);
+    } else {
+      setMessage('Logout successful!');
+      setSuccess(true);
+      setTimeout(() => {
+        setMessage(null);
+        setSuccess(false);
+      }, 1500);
+    }
+  };
+
+  return (
+    <div style={boxStyle}>
+      <button style={buttonStyle} onClick={handleLogout}>Logout</button>
+      {message && <div style={messageStyle(success)}>{message}</div>}
+    </div>
+  );
+}

package/src/components/RegisterOnly.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { registerWithEmail } from '../register';
+
+const boxStyle = {
+  maxWidth: 350,
+  margin: '40px auto',
+  padding: 28,
+  borderRadius: 12,
+  boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
+  background: '#fff',
+  fontFamily: 'sans-serif',
+};
+
+const inputStyle = {
+  width: '100%',
+  padding: 10,
+  margin: '10px 0',
+  borderRadius: 6,
+  border: '1px solid #ddd',
+  fontSize: 16,
+};
+
+const buttonStyle = {
+  width: '100%',
+  padding: 12,
+  borderRadius: 6,
+  border: 'none',
+  background: '#0070f3',
+  color: '#fff',
+  fontWeight: 600,
+  fontSize: 16,
+  marginTop: 10,
+  cursor: 'pointer',
+};
+
+const messageStyle = (success) => ({
+  margin: '12px 0',
+  color: success ? '#0a0' : '#d32f2f',
+  background: success ? '#eafbe7' : '#fdeaea',
+  padding: 8,
+  borderRadius: 6,
+  textAlign: 'center',
+  fontSize: 15,
+});
+
+export default function RegisterOnly() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [phone, setPhone] = useState('');
+  const [message, setMessage] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await registerWithEmail(email, password, username, phone);
+    if (error) {
+      setMessage(error.message || 'Registration failed');
+      setSuccess(false);
+    } else {
+      setMessage('Registration successful! Please check your email to confirm.');
+      setSuccess(true);
+      setTimeout(() => {
+        setEmail('');
+        setPassword('');
+        setUsername('');
+        setPhone('');
+        setMessage(null);
+        setSuccess(false);
+      }, 2000);
+    }
+  };
+
+  return (
+    <div style={boxStyle}>
+      <form onSubmit={handleRegister}>
+        <input
+          style={inputStyle}
+          type="text"
+          placeholder="Email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          required
+        />
+        <input
+          style={inputStyle}
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          required
+        />
+        <input
+          style={inputStyle}
+          type="text"
+          placeholder="Username (optional)"
+          value={username}
+          onChange={e => setUsername(e.target.value)}
+        />
+        <input
+          style={inputStyle}
+          type="text"
+          placeholder="Phone (optional)"
+          value={phone}
+          onChange={e => setPhone(e.target.value)}
+        />
+        <button style={buttonStyle} type="submit">Register</button>
+      </form>
+      {message && <div style={messageStyle(success)}>{message}</div>}
+    </div>
+  );
+}

package/src/index.js

@@ -1,9 +1,12 @@
-export { default as AuthWrapper } from './AuthWrapper';
-export { default as LogoutButton } from './LogoutButton';
 export { useAuth } from './useAuth';
 export { isAdmin } from './utils';
 export { supabase } from './supabaseClient';
 export { signInWithEmail } from './login'; // Add this line
 export { initializeSupabase } from './supabaseClient';
 export { registerWithEmail } from './register';
-export { logout } from './logout';
+export { logout } from './logout';
+
+export { default as LoginRegisterFlow } from './components/LoginRegisterFlow';
+export { default as LoginOnly } from './components/LoginOnly';
+export { default as RegisterOnly } from './components/RegisterOnly';
+export { default as LogoutButton } from './components/LogoutButton';

package/src/AuthWrapper.jsx

@@ -1,39 +0,0 @@
-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, 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)
-    })
-
-    const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
-      setSession(session)
-      if (session) onAuth?.(session)
-    })
-
-    return () => subscription?.unsubscribe()
-  }, [onAuth])
-
-  if (!session) {
-    return (
-      <Auth
-        supabaseClient={supabase}
-        appearance={{ theme: ThemeSupa }}
-        providers={providers}
-        theme={theme}
-      />
-    )
-  }
-
-  return <div>✅ Logged in as: {session.user.email}</div>
-}

package/src/LogoutButton.jsx

@@ -1,12 +0,0 @@
-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>
-}