SignInPageContent

Single panel sign-in page template with centered layout

Page TemplateSingle PanelResponsivei18n Ready
📖 Component Overview
SignInPageContent tam sayfa giriş deneyimi sunar

SignInPageContent component'i, kullanıcı girişi için hazır bir sayfa şablonudur. Tek kolonda form ve logo içerir, merkezi hizalama ile minimal ve temiz bir tasarıma sahiptir. Mobil cihazlarda full-width, desktop'ta ise maksimum genişlik sınırlı card layout kullanır.

Included Features

  • • Email/Username input
  • • Password input with toggle
  • • Remember Me checkbox
  • • Forgot Password link
  • • Social login buttons
  • • Form validation
  • • Loading states
  • • Auto-redirect

Configuration Options

  • • API endpoint setup
  • • Route configuration
  • • UI customization
  • • i18n translations
  • • Brand logo & name
  • • Social login toggle
  • • Remember Me toggle
  • • Username login toggle
Interactive Demo
Try different configurations and see live behavior (Password: demo123)
Basic Implementation
Minimal setup ile hızlı başlangıç
import { AuthKitProvider, SignInPageContent } from '@hascanb/arf-ui-kit/auth-kit'

export default function SignInPage() {
  const authConfig = {
    signIn: async (credentials) => {
      const response = await fetch('/api/auth/signin', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      })
      return response.json()
    },
    routes: {
      afterSignIn: '/dashboard'
    },
    ui: {
      showRememberMe: true,
      showSocialLogin: true
    }
  }

  return (
    <AuthKitProvider config={authConfig}>
      <SignInPageContent />
    </AuthKitProvider>
  )
}
⚙️ Configuration Reference
AuthKitProvider config options for SignInPageContent
PropertyTypeRequiredDescription
signInFunctionYesAPI handler for sign in request
routes.afterSignInstringNoRedirect URL after successful sign in (default: '/')
routes.forgotPasswordstringNoForgot password page URL
ui.showRememberMebooleanNoShow "Remember Me" checkbox (default: true)
ui.showSocialLoginbooleanNoShow social login buttons (default: true)
ui.allowUsernameLoginbooleanNoAllow username instead of email (default: false)
ui.brandLogostringNoBrand logo URL
ui.brandNamestringNoApplication name
locale'tr' | 'en'NoInterface language (default: 'tr')
Best Practices
  • AuthKitProvider'ı root seviyede kullanın
  • API endpoint'lerini environment variables'da saklayın
  • HTTPS kullanımı production için zorunludur
  • Rate limiting ile brute force saldırılarını önleyin
  • Success durumunda analytics event'i gönderin
Common Pitfalls
  • Token'ları localStorage'da saklamayın (XSS riski)
  • Spesifik error mesajları vermeyin ("User not found" yerine "Invalid credentials")
  • HTTP üzerinden production deployment yapmayın
  • CSRF protection olmadan API çağrısı yapmayın
  • Error handling olmadan bırakmayın (try-catch kullanın)