Sign In Implementation

Learn how to implement secure sign-in functionality in your application using PersonQL.

Pre-built Components

The fastest way to add sign-in is using PersonQL’s pre-built components:

import { SignInForm } from '@personql/react';
 
function AuthPage() {
  return (
    <SignInForm
      onSuccess={() => navigate('/dashboard')}
      onSignUp={() => navigate('/signup')}
      onForgotPassword={() => navigate('/forgot-password')}
    />
  );
}

Custom Implementation

For more control, use the useAuth hook:

import { useAuth } from '@personql/react';
import { useState } from 'react';
 
function CustomSignIn() {
  const { signIn, isLoading, error } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await signIn({ email, password, rememberMe: true });
      // Navigate to dashboard
    } catch (error) {
      console.error('Sign in failed:', error);
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      {error && <div className="error">{error.message}</div>}
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  );
}

With MFA Support

Handle multi-factor authentication in the sign-in flow:

import { useAuth } from '@personql/react';
 
function SignInWithMFA() {
  const { signIn, requiresMFA, verifyMFACode } = useAuth();
  const [showMFA, setShowMFA] = useState(false);
 
  const handleSignIn = async (credentials) => {
    await signIn(credentials);
    if (requiresMFA) {
      setShowMFA(true);
    }
  };
 
  if (showMFA) {
    return <MFAVerification onVerify={verifyMFACode} />;
  }
 
  return <SignInForm onSuccess={handleSignIn} />;
}

Server-Side (Next.js)

Implement sign-in with Next.js server components:

// app/login/page.tsx
import { getServerUser } from '@personql/nextjs';
import { redirect } from 'next/navigation';
import { LoginForm } from './LoginForm';
 
export default async function LoginPage() {
  const user = await getServerUser();
 
  if (user) {
    redirect('/dashboard');
  }
 
  return <LoginForm />;
}

Mobile (React Native)

Use the pre-built mobile sign-in screen:

import { SignInScreen } from '@personql/react-native';
 
function AuthFlow() {
  return (
    <SignInScreen
      apiUrl="https://app.personql.com"
      onSignInSuccess={() => navigation.navigate('Dashboard')}
      enableBiometric
    />
  );
}

Best Practices

Always use HTTPS in production
Implement rate limiting to prevent brute force attacks
Add “Remember Me” functionality for better UX
Show clear error messages without revealing security details
Implement account lockout after failed attempts
Support OAuth for social sign-in options