nexu-app 2.0.0

package/templates/default/packages/auth/src/components/SignInForm.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { useAuth } from '../hooks/useAuth';
+import type { AuthError, SignInFormProps } from '../types';
+
+import { SocialButtons } from './SocialButtons';
+
+/**
+ * Sign in form component
+ *
+ * @example
+ * ```tsx
+ * <SignInForm
+ *   providers={['google', 'github']}
+ *   onSuccess={(response) => router.push('/dashboard')}
+ *   showRememberMe
+ *   showForgotPassword
+ *   forgotPasswordUrl="/forgot-password"
+ *   signUpUrl="/signup"
+ * />
+ * ```
+ */
+export function SignInForm({
+  onSuccess,
+  onError,
+  providers = [],
+  showRememberMe = true,
+  showForgotPassword = true,
+  forgotPasswordUrl = '/forgot-password',
+  signUpUrl = '/signup',
+  redirectUrl,
+  className,
+}: SignInFormProps) {
+  const { signIn, isLoading, error } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [remember, setRemember] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError(null);
+
+    if (!email || !password) {
+      setFormError('Please fill in all fields');
+      return;
+    }
+
+    try {
+      const response = await signIn({ email, password, remember });
+      onSuccess?.(response);
+
+      if (redirectUrl && typeof window !== 'undefined') {
+        window.location.href = redirectUrl;
+      }
+    } catch (err) {
+      const authError = err as AuthError;
+      setFormError(authError.message);
+      onError?.(authError);
+    }
+  };
+
+  const displayError = formError || error?.message;
+
+  return (
+    <div className={className}>
+      <form onSubmit={e => void handleSubmit(e)}>
+        {displayError && (
+          <div role="alert" aria-live="polite">
+            {displayError}
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="email">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            disabled={isLoading}
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            disabled={isLoading}
+            placeholder="••••••••"
+          />
+        </div>
+
+        <div>
+          {showRememberMe && (
+            <label>
+              <input
+                type="checkbox"
+                checked={remember}
+                onChange={e => setRemember(e.target.checked)}
+                disabled={isLoading}
+              />
+              <span>Remember me</span>
+            </label>
+          )}
+
+          {showForgotPassword && <a href={forgotPasswordUrl}>Forgot password?</a>}
+        </div>
+
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Signing in...' : 'Sign in'}
+        </button>
+      </form>
+
+      {providers.length > 0 && (
+        <>
+          <div>
+            <span>Or continue with</span>
+          </div>
+          <SocialButtons
+            providers={providers}
+            mode="signin"
+            onSuccess={() => {
+              if (redirectUrl && typeof window !== 'undefined') {
+                window.location.href = redirectUrl;
+              }
+            }}
+            onError={onError}
+          />
+        </>
+      )}
+
+      {signUpUrl && (
+        <p>
+          Don&apos;t have an account? <a href={signUpUrl}>Sign up</a>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/default/packages/auth/src/components/SignUpForm.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { useAuth } from '../hooks/useAuth';
+import type { AuthError, SignUpFormProps } from '../types';
+
+import { SocialButtons } from './SocialButtons';
+
+/**
+ * Sign up form component
+ *
+ * @example
+ * ```tsx
+ * <SignUpForm
+ *   providers={['google', 'github']}
+ *   onSuccess={(response) => router.push('/onboarding')}
+ *   showName
+ *   signInUrl="/signin"
+ * />
+ * ```
+ */
+export function SignUpForm({
+  onSuccess,
+  onError,
+  providers = [],
+  showName = true,
+  signInUrl = '/signin',
+  redirectUrl,
+  className,
+}: SignUpFormProps) {
+  const { signUp, isLoading, error } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [name, setName] = useState('');
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError(null);
+
+    if (!email || !password) {
+      setFormError('Please fill in all required fields');
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setFormError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 8) {
+      setFormError('Password must be at least 8 characters');
+      return;
+    }
+
+    try {
+      const response = await signUp({
+        email,
+        password,
+        name: showName ? name : undefined,
+      });
+      onSuccess?.(response);
+
+      if (redirectUrl && typeof window !== 'undefined') {
+        window.location.href = redirectUrl;
+      }
+    } catch (err) {
+      const authError = err as AuthError;
+      setFormError(authError.message);
+      onError?.(authError);
+    }
+  };
+
+  const displayError = formError || error?.message;
+
+  return (
+    <div className={className}>
+      <form onSubmit={e => void handleSubmit(e)}>
+        {displayError && (
+          <div role="alert" aria-live="polite">
+            {displayError}
+          </div>
+        )}
+
+        {showName && (
+          <div>
+            <label htmlFor="name">Name</label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              autoComplete="name"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              disabled={isLoading}
+              placeholder="John Doe"
+            />
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="email">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            disabled={isLoading}
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="new-password"
+            required
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            disabled={isLoading}
+            placeholder="••••••••"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="confirmPassword">Confirm Password</label>
+          <input
+            id="confirmPassword"
+            name="confirmPassword"
+            type="password"
+            autoComplete="new-password"
+            required
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+            disabled={isLoading}
+            placeholder="••••••••"
+          />
+        </div>
+
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Creating account...' : 'Create account'}
+        </button>
+      </form>
+
+      {providers.length > 0 && (
+        <>
+          <div>
+            <span>Or continue with</span>
+          </div>
+          <SocialButtons
+            providers={providers}
+            mode="signup"
+            onSuccess={() => {
+              if (redirectUrl && typeof window !== 'undefined') {
+                window.location.href = redirectUrl;
+              }
+            }}
+            onError={onError}
+          />
+        </>
+      )}
+
+      {signInUrl && (
+        <p>
+          Already have an account? <a href={signInUrl}>Sign in</a>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/default/packages/auth/src/components/SocialButtons.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React from 'react';
+
+import { useAuth } from '../hooks/useAuth';
+import type { AuthError, AuthProvider, SocialButtonsProps } from '../types';
+
+/**
+ * Social provider icons (SVG)
+ */
+const ProviderIcons: Record<string, React.ReactNode> = {
+  google: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <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>
+  ),
+  github: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  ),
+  facebook: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="#1877F2">
+      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+    </svg>
+  ),
+  apple: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+    </svg>
+  ),
+  twitter: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  ),
+};
+
+/**
+ * Provider display names
+ */
+const ProviderNames: Record<string, string> = {
+  google: 'Google',
+  github: 'GitHub',
+  facebook: 'Facebook',
+  apple: 'Apple',
+  twitter: 'X (Twitter)',
+};
+
+interface SocialButtonProps {
+  provider: AuthProvider;
+  onClick: () => void;
+  disabled?: boolean;
+  mode?: 'signin' | 'signup';
+  className?: string;
+}
+
+/**
+ * Individual social login button
+ */
+export function SocialButton({
+  provider,
+  onClick,
+  disabled,
+  mode = 'signin',
+  className,
+}: SocialButtonProps) {
+  const actionText = mode === 'signin' ? 'Sign in' : 'Sign up';
+  const providerName = ProviderNames[provider] || provider;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      aria-label={`${actionText} with ${providerName}`}
+    >
+      {ProviderIcons[provider]}
+      <span>
+        {actionText} with {providerName}
+      </span>
+    </button>
+  );
+}
+
+/**
+ * Social login buttons component
+ *
+ * @example
+ * ```tsx
+ * <SocialButtons
+ *   providers={['google', 'github']}
+ *   mode="signin"
+ *   onSuccess={(provider) => console.log(`Signed in with ${provider}`)}
+ * />
+ * ```
+ */
+export function SocialButtons({
+  providers,
+  onSuccess,
+  onError,
+  mode = 'signin',
+  className,
+}: SocialButtonsProps) {
+  const { signInWithProvider, isLoading } = useAuth();
+
+  const handleProviderClick = async (provider: AuthProvider) => {
+    try {
+      await signInWithProvider(provider);
+      onSuccess?.(provider);
+    } catch (error) {
+      onError?.(error as AuthError);
+    }
+  };
+
+  if (providers.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {providers.map(provider => (
+        <SocialButton
+          key={provider}
+          provider={provider}
+          onClick={() => void handleProviderClick(provider)}
+          disabled={isLoading}
+          mode={mode}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/default/packages/auth/src/components/index.ts

@@ -0,0 +1,4 @@
+export { SignInForm } from './SignInForm';
+export { SignUpForm } from './SignUpForm';
+export { SocialButtons, SocialButton } from './SocialButtons';
+export { ProtectedRoute } from './ProtectedRoute';

package/templates/default/packages/auth/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useAuth } from './useAuth';
+export { useUser } from './useUser';
+export { useSession } from './useSession';
+export { useRequireAuth } from './useRequireAuth';

package/templates/default/packages/auth/src/hooks/useAuth.ts

@@ -0,0 +1,51 @@
+'use client';
+
+import { useAuthContext } from '../providers/AuthContext';
+import type { UseAuthReturn } from '../types';
+
+/**
+ * Hook to access authentication state and methods
+ *
+ * @example
+ * ```tsx
+ * function LoginButton() {
+ *   const { isAuthenticated, user, signIn, signOut } = useAuth();
+ *
+ *   if (isAuthenticated) {
+ *     return (
+ *       <div>
+ *         <span>Welcome, {user?.name}</span>
+ *         <button onClick={signOut}>Sign Out</button>
+ *       </div>
+ *     );
+ *   }
+ *
+ *   return (
+ *     <button onClick={() => signIn({ email: 'user@example.com', password: 'password' })}>
+ *       Sign In
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useAuth(): UseAuthReturn {
+  const context = useAuthContext();
+
+  return {
+    user: context.user,
+    session: context.session,
+    isAuthenticated: context.isAuthenticated,
+    isLoading: context.isLoading,
+    error: context.error,
+    signIn: context.signIn,
+    signUp: context.signUp,
+    signOut: context.signOut,
+    signInWithProvider: context.signInWithProvider,
+    refreshSession: context.refreshSession,
+    resetPassword: context.resetPassword,
+    updatePassword: context.updatePassword,
+    updateUser: context.updateUser,
+    verifyEmail: context.verifyEmail,
+    resendVerification: context.resendVerification,
+  };
+}

package/templates/default/packages/auth/src/hooks/useRequireAuth.ts

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useAuth } from './useAuth';
+
+interface UseRequireAuthOptions {
+  /**
+   * Redirect to this URL if not authenticated
+   */
+  redirectTo?: string;
+
+  /**
+   * Callback when not authenticated
+   */
+  onUnauthenticated?: () => void;
+}
+
+/**
+ * Hook to require authentication for a page/component
+ *
+ * @example
+ * ```tsx
+ * function ProtectedPage() {
+ *   const { user, isLoading } = useRequireAuth({
+ *     redirectTo: '/login',
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return <div>Welcome, {user?.name}!</div>;
+ * }
+ * ```
+ */
+export function useRequireAuth(options: UseRequireAuthOptions = {}) {
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (auth.isLoading) return;
+
+    if (!auth.isAuthenticated) {
+      if (options.redirectTo && typeof window !== 'undefined') {
+        const currentPath = window.location.pathname + window.location.search;
+        const redirectUrl = new URL(options.redirectTo, window.location.origin);
+        redirectUrl.searchParams.set('returnTo', currentPath);
+        window.location.href = redirectUrl.toString();
+      }
+
+      options.onUnauthenticated?.();
+    }
+  }, [auth.isAuthenticated, auth.isLoading, options]);
+
+  return auth;
+}

package/templates/default/packages/auth/src/hooks/useSession.ts

@@ -0,0 +1,48 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useAuthContext } from '../providers/AuthContext';
+import type { UseSessionReturn } from '../types';
+
+/**
+ * Hook to access and manage the current session
+ *
+ * @example
+ * ```tsx
+ * function SessionInfo() {
+ *   const { session, isLoading, isValid, getToken, refresh } = useSession();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (!session) return <div>No session</div>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Session valid: {isValid() ? 'Yes' : 'No'}</p>
+ *       <p>Expires at: {new Date(session.expiresAt).toLocaleString()}</p>
+ *       <button onClick={refresh}>Refresh Session</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSession(): UseSessionReturn {
+  const context = useAuthContext();
+
+  const isValid = useCallback((): boolean => {
+    if (!context.session) return false;
+    return Date.now() < context.session.expiresAt;
+  }, [context.session]);
+
+  const getToken = useCallback((): string | null => {
+    return context.tokenManager.getAccessToken();
+  }, [context.tokenManager]);
+
+  return {
+    session: context.session,
+    isLoading: context.isLoading,
+    refresh: context.refreshSession,
+    isValid,
+    getToken,
+  };
+}

package/templates/default/packages/auth/src/hooks/useUser.ts

@@ -0,0 +1,48 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useAuthContext } from '../providers/AuthContext';
+import type { AuthUser, UseUserReturn } from '../types';
+
+/**
+ * Hook to access and manage the current user
+ *
+ * @example
+ * ```tsx
+ * function UserProfile() {
+ *   const { user, isLoading, update } = useUser();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (!user) return <div>Not authenticated</div>;
+ *
+ *   return (
+ *     <div>
+ *       <h1>{user.name}</h1>
+ *       <button onClick={() => update({ name: 'New Name' })}>
+ *         Update Name
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useUser(): UseUserReturn {
+  const context = useAuthContext();
+
+  const refresh = useCallback(async (): Promise<AuthUser | null> => {
+    try {
+      const user = await context.apiClient.getUser();
+      return user;
+    } catch {
+      return null;
+    }
+  }, [context.apiClient]);
+
+  return {
+    user: context.user,
+    isLoading: context.isLoading,
+    update: context.updateUser,
+    refresh,
+  };
+}