Skip to main content
The useMagicLinkVerification hook provides functionality for verifying magic links sent via email for passwordless authentication.

​
Import

import { useMagicLinkVerification, useMagicLinkParams } from '@snipextt/wacht';

​
Usage

import { useMagicLinkVerification, useMagicLinkParams } from '@snipextt/wacht';

function MagicLinkHandler() {
  const { verifyMagicLink, loading, error, success } = useMagicLinkVerification();
  const params = useMagicLinkParams();

  useEffect(() => {
    if (params.token && params.attempt) {
      handleVerification();
    }
  }, [params]);

  const handleVerification = async () => {
    const result = await verifyMagicLink({
      token: params.token,
      attempt: params.attempt,
      redirectUri: params.redirectUri
    });
    
    if (result.data) {
      console.log('Magic link verified successfully');
    }
  };

  if (loading) {
    return <div>Verifying magic link...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (success) {
    return <div>Magic link verified successfully!</div>;
  }

  return <div>Processing magic link...</div>;
}

​
Properties

​
loading
boolean
Whether the magic link verification is currently in progress.
​
error
Error | null
Any error that occurred during verification. null if no errors.
​
success
boolean | null
Whether the verification was successful. null if not yet attempted.

​
Methods

Verifies a magic link with the provided parameters.
​
params
MagicLinkParams
required
Magic link verification parameters
const { verifyMagicLink } = useMagicLinkVerification();

const result = await verifyMagicLink({
  token: 'magic_token_123',
  attempt: 'attempt_456',
  redirectUri: 'https://myapp.com/dashboard'
});

​
useMagicLinkParams()

A helper hook that extracts magic link parameters from the current URL. 
import { useMagicLinkParams } from '@snipextt/wacht';

function MagicLinkPage() {
  const params = useMagicLinkParams();
  
  // params contains: { token, attempt, redirectUri }
  console.log('Token:', params.token);
  console.log('Attempt:', params.attempt);
  console.log('Redirect URI:', params.redirectUri);
}

​
Examples

function MagicLinkVerification() {
  const { verifyMagicLink, loading, error, success } = useMagicLinkVerification();
  const params = useMagicLinkParams();
  const [verified, setVerified] = useState(false);

  useEffect(() => {
    if (params.token && params.attempt && !verified) {
      handleMagicLinkVerification();
    }
  }, [params, verified]);

  const handleMagicLinkVerification = async () => {
    try {
      const result = await verifyMagicLink({
        token: params.token,
        attempt: params.attempt,
        redirectUri: params.redirectUri
      });
      
      if (result.data) {
        setVerified(true);
        // Redirect to success page or dashboard
        window.location.href = params.redirectUri || '/dashboard';
      }
    } catch (err) {
      console.error('Magic link verification failed:', err);
    }
  };

  if (loading) {
    return (
      <div className="verification-loading">
        <h2>Verifying your magic link...</h2>
        <p>Please wait while we authenticate you.</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="verification-error">
        <h2>Verification Failed</h2>
        <p>The magic link is invalid or has expired.</p>
        <p>Error: {error.message}</p>
        <a href="/signin">Return to Sign In</a>
      </div>
    );
  }

  if (success) {
    return (
      <div className="verification-success">
        <h2>Successfully Authenticated!</h2>
        <p>Redirecting you to your dashboard...</p>
      </div>
    );
  }

  return (
    <div className="verification-pending">
      <h2>Invalid Magic Link</h2>
      <p>No valid magic link parameters found.</p>
      <a href="/signin">Return to Sign In</a>
    </div>
  );
}

​
Notes

  • Magic links are typically valid for a limited time
  • The hook automatically extracts URL parameters for verification
  • Failed verification should redirect users back to the sign-in page
  • Successful verification typically redirects to a protected area of the app
  • Magic links are single-use and become invalid after verification