authifyer-sdk 1.0.0

package/src/react/components/SignIn.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { useAuth } from '../hooks';
+import { AuthBox } from './AuthBox';
+
+export const SignIn: React.FC = () => {
+    const { client, config } = useAuth();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Defaults if config is missing
+    const showEmailPass = config?.emailPasswordEnabled ?? true;
+    const providers = config?.oauthProviders ?? ['google', 'github'];
+
+    const handleEmailLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError('');
+        try {
+            await client.signInWithEmail(email, password);
+        } catch (err) {
+            setError('Invalid credentials');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <AuthBox title="Sign in" subtitle="to continue to Authifyer">
+            {error && <p className="authifyer-error">{error}</p>}
+
+            {(providers.includes('google') || providers.includes('github')) && (
+                <div className="authifyer-form">
+                    {providers.includes('google') && (
+                        <button
+                            className="authifyer-provider-btn"
+                            onClick={() => client.signInWithOAuth('google')}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+                                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+                            </svg>
+                            Continue with Google
+                        </button>
+                    )}
+                    {providers.includes('github') && (
+                        <button
+                            className="authifyer-provider-btn"
+                            onClick={() => client.signInWithOAuth('github')}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                            </svg>
+                            Continue with GitHub
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {(providers.includes('google') || providers.includes('github')) && showEmailPass && (
+                <div className="authifyer-divider">or</div>
+            )}
+
+            {showEmailPass && (
+                <form onSubmit={handleEmailLogin} className="authifyer-form">
+                    <div className="authifyer-form-group">
+                        <label className="authifyer-label">Email address</label>
+                        <input
+                            type="email"
+                            className="authifyer-input"
+                            value={email}
+                            onChange={e => setEmail(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <div className="authifyer-form-group">
+                        <label className="authifyer-label">Password</label>
+                        <input
+                            type="password"
+                            className="authifyer-input"
+                            value={password}
+                            onChange={e => setPassword(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <button type="submit" className="authifyer-submit-btn" disabled={isLoading}>
+                        {isLoading ? 'Signing In...' : 'Continue'}
+                    </button>
+                </form>
+            )}
+        </AuthBox>
+    );
+};

package/src/react/components/SignUp.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { useAuth } from '../hooks';
+import { AuthBox } from './AuthBox';
+
+export const SignUp: React.FC = () => {
+    const { client, config } = useAuth();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+    // Defaults if config is missing
+    const showEmailPass = config?.emailPasswordEnabled ?? true;
+    const providers = config?.oauthProviders ?? ['google', 'github'];
+
+    const handleEmailSignup = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError('');
+        try {
+            await client.signUpWithEmail(email, password);
+            setSuccess(true);
+        } catch (err) {
+            setError('Registration failed. User might already exist.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (success) {
+        return (
+            <AuthBox title="Welcome!">
+                <div className="authifyer-success">
+                    <svg className="authifyer-success-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <div>
+                        <h3 className="authifyer-success-title">Success</h3>
+                        <p className="authifyer-success-text">Registration completed. Please verify your email.</p>
+                    </div>
+                </div>
+            </AuthBox>
+        );
+    }
+
+    return (
+        <AuthBox title="Create your account" subtitle="Welcome to Authifyer">
+            {error && <p className="authifyer-error">{error}</p>}
+
+            {(providers.includes('google') || providers.includes('github')) && (
+                <div className="authifyer-form">
+                    {providers.includes('google') && (
+                        <button
+                            className="authifyer-provider-btn"
+                            onClick={() => client.signInWithOAuth('google')}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+                                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+                            </svg>
+                            Continue with Google
+                        </button>
+                    )}
+                    {providers.includes('github') && (
+                        <button
+                            className="authifyer-provider-btn"
+                            onClick={() => client.signInWithOAuth('github')}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                            </svg>
+                            Continue with GitHub
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {(providers.includes('google') || providers.includes('github')) && showEmailPass && (
+                <div className="authifyer-divider">or</div>
+            )}
+
+            {showEmailPass && (
+                <form onSubmit={handleEmailSignup} className="authifyer-form">
+                    <div className="authifyer-form-group">
+                        <label className="authifyer-label">Email address</label>
+                        <input
+                            type="email"
+                            className="authifyer-input"
+                            value={email}
+                            onChange={e => setEmail(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <div className="authifyer-form-group">
+                        <label className="authifyer-label">Password</label>
+                        <input
+                            type="password"
+                            className="authifyer-input"
+                            value={password}
+                            onChange={e => setPassword(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <button type="submit" className="authifyer-submit-btn" disabled={isLoading}>
+                        {isLoading ? 'Signing Up...' : 'Continue'}
+                    </button>
+                </form>
+            )}
+        </AuthBox>
+    );
+};

package/src/react/components/authifyerui.css

@@ -0,0 +1,223 @@
+/* authifyerui.css */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+.authifyer-root {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    color: #111827;
+    box-sizing: border-box;
+}
+
+.authifyer-root * {
+    box-sizing: inherit;
+}
+
+.authifyer-card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.authifyer-card-header {
+    padding: 32px 32px 24px;
+    text-align: center;
+}
+
+.authifyer-card-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.authifyer-card-subtitle {
+    margin: 8px 0 0;
+    font-size: 14px;
+    color: #6b7280;
+}
+
+.authifyer-card-content {
+    padding: 0 32px 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.authifyer-error {
+    background-color: #fee2e2;
+    color: #991b1b;
+    padding: 12px 16px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    margin: 0;
+}
+
+.authifyer-provider-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 10px 16px;
+    background-color: #ffffff;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.authifyer-provider-btn:hover {
+    background-color: #f9fafb;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.authifyer-divider {
+    display: flex;
+    align-items: center;
+    color: #9ca3af;
+    font-size: 12px;
+    text-transform: uppercase;
+}
+
+.authifyer-divider::before,
+.authifyer-divider::after {
+    content: '';
+    flex: 1;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.authifyer-divider::before {
+    margin-right: 12px;
+}
+
+.authifyer-divider::after {
+    margin-left: 12px;
+}
+
+.authifyer-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.authifyer-form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.authifyer-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #374151;
+}
+
+.authifyer-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 14px;
+    color: #111827;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    outline: none;
+}
+
+.authifyer-input:focus {
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.authifyer-submit-btn {
+    width: 100%;
+    padding: 10px 16px;
+    background-color: #2563eb;
+    color: #ffffff;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    margin-top: 8px;
+}
+
+.authifyer-submit-btn:hover:not(:disabled) {
+    background-color: #1d4ed8;
+}
+
+.authifyer-submit-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.authifyer-footer {
+    background-color: #f9fafb;
+    padding: 16px;
+    text-align: center;
+    border-top: 1px solid #f3f4f6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+}
+
+.authifyer-secured-text {
+    font-size: 12px;
+    color: #6b7280;
+    font-weight: 500;
+}
+
+.authifyer-brand {
+    font-size: 12px;
+    font-weight: 600;
+    color: #111827;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.authifyer-logo-icon {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+    color: #2563eb;
+}
+
+/* Success Message */
+.authifyer-success {
+    text-align: center;
+    padding: 40px 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.authifyer-success-icon {
+    width: 48px;
+    height: 48px;
+    color: #10b981;
+}
+
+.authifyer-success-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+}
+
+.authifyer-success-text {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+}

package/src/react/context.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import { AuthifyerClient } from '@/core/client';
+import { User, Session, ProjectConfig } from '@/core/types';
+
+export interface AuthContextType {
+    client: AuthifyerClient;
+    user: User | null;
+    session: Session | null;
+    config: ProjectConfig | null;
+    isLoading: boolean;
+}
+
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);

package/src/react/hooks.ts

@@ -0,0 +1,26 @@
+
+import { useContext } from 'react';
+import { AuthContext } from './context';
+
+export const useAuth = () => {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthifyerProvider');
+    }
+    return context;
+};
+
+export const useUser = () => {
+    const { user, isLoading } = useAuth();
+    return { user, isLoading, isSignedIn: !!user };
+};
+
+export const useSession = () => {
+    const { session, isLoading } = useAuth();
+    return { session, isLoading, isSignedIn: !!session };
+};
+
+export const useAuthifyer = () => {
+    const { client } = useAuth();
+    return client;
+};

package/src/utils/token.ts

@@ -0,0 +1,42 @@
+import { jwtDecode } from 'jwt-decode';
+import { User, Session } from '@/core/types';
+
+interface DecodedToken {
+    sub: string; // subjectId (authifyerId)
+    sid: string; // publicSessionId
+    pid?: string; // publicProjectId
+    scope: string; // 'global' or 'project'
+    email: string;
+    name: string;
+    exp: number;
+}
+
+export const parseToken = (token: string): Session | null => {
+    try {
+        const decoded = jwtDecode<DecodedToken>(token);
+        const now = Date.now() / 1000;
+
+        if (decoded.exp < now) {
+            return null;
+        }
+
+        const user: User = {
+            authifyerId: decoded.sub,
+            name: decoded.name,
+            email: decoded.email,
+            emailVerified: false, // JWT might not have this, need to fetch user details or infer
+            isActive: true,
+            provider: 'email', // Defaulting, might need to be in claims
+        };
+
+        return {
+            token,
+            sessionId: decoded.sid,
+            expireAt: decoded.exp,
+            user,
+        };
+    } catch (error) {
+        console.error('Invalid token', error);
+        return null;
+    }
+};

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": false,
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "outDir": "dist",
+        "jsx": "react-jsx",
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, 'src/index.ts'),
+            name: 'AuthifyerSDK',
+            fileName: (format) => `authifyer-sdk.${format}.js`,
+        },
+        rollupOptions: {
+            external: ['react', 'react-dom'],
+            output: {
+                globals: {
+                    react: 'React',
+                    'react-dom': 'ReactDOM',
+                },
+            },
+        },
+    },
+});