Authentication

import { useSignUp } from '@bastionauth/react';
 
function SignUpForm() {
  const { signUp, isLoading, error } = useSignUp();
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    await signUp({
      email: formData.get('email'),
      password: formData.get('password'),
      firstName: formData.get('firstName'),
      lastName: formData.get('lastName'),
    });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <input name="firstName" />
      <input name="lastName" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Sign Up'}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

import { useSignIn } from '@bastionauth/react';
 
function SignInForm() {
  const { signIn, isLoading, error } = useSignIn();
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const result = await signIn({
      email: formData.get('email'),
      password: formData.get('password'),
    });
 
    if (result.requiresMfa) {
      // Handle MFA challenge
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  );
}

import { useMagicLink } from '@bastionauth/react';
 
function MagicLinkForm() {
  const { sendMagicLink, isLoading, success } = useMagicLink();
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    const email = new FormData(e.target).get('email');
    await sendMagicLink({ email });
  };
 
  if (success) {
    return <p>Check your email for the magic link!</p>;
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <button type="submit" disabled={isLoading}>
        Send Magic Link
      </button>
    </form>
  );
}

import { usePasskey } from '@bastionauth/react';
 
function PasskeyButton() {
  const { register, authenticate, isSupported } = usePasskey();
 
  if (!isSupported) {
    return null;
  }
 
  return (
    <button onClick={authenticate}>
      Sign in with Passkey
    </button>
  );
}

import { useAuth } from '@bastionauth/react';
 
function Dashboard() {
  const { isSignedIn, user, signOut, getToken } = useAuth();
 
  // Get current access token
  const token = await getToken();
 
  // Sign out (invalidates session)
  await signOut();
}