Skip to main content

Authentication System

🚧 Coming Soon - QwickApps Authentication (@qwickapps/auth-client) is currently in development and will provide comprehensive authentication components with built-in form validation, security patterns, and professional user experience features.

What's Coming in @qwickapps/auth-client​

The dedicated authentication package will include:

🔐 Security & Authentication​

  • JWT Token Management - Automatic token refresh and storage
  • Multi-factor Authentication - Support for 2FA and biometric authentication
  • Social Login - OAuth integration with Google, GitHub, and other providers
  • Password Security - Strong password requirements and secure handling
  • Session Management - Automatic logout and session timeout

🎨 Ready-to-Use Components​

  • LoginForm - Complete login interface with validation
  • RegisterForm - Registration forms with progressive disclosure
  • ForgotPasswordForm - Password recovery workflows
  • ProfileForm - User profile management interfaces
  • AuthGuard - Route protection and role-based access

⚡ Developer Experience​

  • React Hooks - useAuth, useUser, useLogin hooks for easy integration
  • TypeScript Support - Full type safety with comprehensive interfaces
  • Theme Integration - Automatic theme and palette support
  • Error Handling - Comprehensive error states and recovery flows

Current Alternative: Framework Form Components​

While we develop the dedicated authentication package, you can build authentication interfaces using Framework's form components:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Available Components for Authentication​

📋 Form Layout:

  • FormBlock - Professional form container with headers and backgrounds
  • Section - Layout sections with consistent spacing
  • Content - Content containers with proper typography

📝 Input Components:

  • TextInputField - Email, password, and text inputs with validation
  • SelectInputField - Dropdown selections for countries, roles, etc.
  • HtmlInputField - Rich text editing for profiles and bios
  • ChoiceInputField - Checkboxes and radio buttons for preferences

🎯 Interactive Elements:

  • Button - Styled buttons with loading states and variants
  • Status Messages - Success, error, and info message display
  • Theme Integration - Automatic light/dark mode support

Building Login Forms Today​

import { FormBlock, TextInputField, Button } from '@qwickapps/react-framework';
import { useState } from 'react';
import { Box, Typography, Link } from '@mui/material';

function LoginForm() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    setLoading(true);
    try {
      // Your authentication logic here
      // Will be much easier with @qwickapps/auth-client
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      
      if (response.ok) {
        const { token } = await response.json();
        localStorage.setItem('authToken', token);
        // Redirect to dashboard
      }
    } catch (error) {
      console.error('Login failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <FormBlock 
      title="Welcome Back"
      description="Sign in to your account to continue"
      maxWidth="sm"
      form={
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <TextInputField 
            label="Email Address" 
            type="email"
            placeholder="your.email@example.com"
            required={true}
            value={formData.email}
            onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
          />
          <TextInputField 
            label="Password" 
            type="password"
            placeholder="Enter your password"
            required={true}
            value={formData.password}
            onChange={(value) => setFormData(prev => ({ ...prev, password: value }))}
          />
          <Button 
            label={loading ? "Signing In..." : "Sign In"}
            variant="primary"
            fullWidth={true}
            loading={loading}
            onClick={handleLogin}
          />
        </Box>
      }
      footer={
        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
          Don't have an account? <Link href="/register" color="primary">Sign up here</Link>
        </Typography>
      }
    />
  );
}

Building Registration Forms​

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →
import { FormBlock, TextInputField, SelectInputField, Button } from '@qwickapps/react-framework';
import { useState } from 'react';
import { Box, Typography, Link } from '@mui/material';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    country: ''
  });

  return (
    <FormBlock 
      title="Create Your Account"
      description="Join thousands of developers building with QwickApps"
      maxWidth="md"
      background="gradient"
      form={
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <Box sx={{ 
            display: 'grid', 
            gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, 
            gap: 3 
          }}>
            <TextInputField 
              label="First Name" 
              required={true}
              value={formData.firstName}
              onChange={(value) => setFormData(prev => ({ ...prev, firstName: value }))}
            />
            <TextInputField 
              label="Last Name" 
              required={true}
              value={formData.lastName}
              onChange={(value) => setFormData(prev => ({ ...prev, lastName: value }))}
            />
          </Box>
          
          <TextInputField 
            label="Email Address" 
            type="email"
            required={true}
            helperText="We'll never share your email address"
            value={formData.email}
            onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
          />
          
          <SelectInputField 
            label="Country" 
            required={true}
            options={[
              { label: 'United States', value: 'us' },
              { label: 'Canada', value: 'ca' },
              { label: 'United Kingdom', value: 'uk' },
              { label: 'Germany', value: 'de' },
              { label: 'Australia', value: 'au' }
            ]}
            value={formData.country}
            onChange={(value) => setFormData(prev => ({ ...prev, country: value }))}
          />
          
          <Button 
            label="Create Account" 
            variant="primary"
            fullWidth={true}
            buttonSize="large"
            onClick={() => console.log('Registration:', formData)}
          />
        </Box>
      }
      footer={
        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
          Already have an account? <Link href="/login" color="primary">Sign in here</Link>
        </Typography>
      }
    />
  );
}

Form Status Messages​

Handle authentication states with Framework's status message system:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Status Examples​

import { FormBlock, Button } from '@qwickapps/react-framework';
import { Box } from '@mui/material';

// Success state after login
<FormBlock 
  title="Login Successful!"
  description="Welcome back to your dashboard"
  status="success"
  message="Redirecting you to your dashboard..."
  maxWidth="sm"
  form={
    <Button 
      label="Continue to Dashboard" 
      variant="primary"
      fullWidth={true}
      onClick={() => window.location.href = '/dashboard'}
    />
  }
/>

// Error state for failed authentication
<FormBlock 
  title="Authentication Failed"
  description="Unable to sign in to your account"
  status="error"
  message="Please check your credentials and try again."
  maxWidth="sm"
  form={
    <Box sx={{ display: 'flex', gap: 2 }}>
      <Button 
        label="Try Again" 
        variant="primary"
        fullWidth={true}
        onClick={() => window.location.reload()}
      />
      <Button 
        label="Reset Password" 
        variant="outlined"
        fullWidth={true}
        onClick={() => window.location.href = '/reset-password'}
      />
    </Box>
  }
/>

Get Notified About @qwickapps/auth-client​

Want to be the first to know when the authentication package is ready?

Learn More About Form Components​