Custom Sign-Up Page Examples

1
'use client';
2
import { SignUp } from "@stackframe/stack";
3
4
export default function DefaultSignUp() {
5
  // optionally redirect to some other page if the user is already signed in
6
  // const user = useUser();
7
  // if (user) { redirect to some other page }
8
  return <SignUp fullPage />;
9
}

1
'use client';
2
3
import { useStackApp } from "@stackframe/stack";
4
import { useState } from "react";
5
6
export default function CustomCredentialSignUp() {
7
  const [email, setEmail] = useState('');
8
  const [password, setPassword] = useState('');
9
  const [error, setError] = useState('');
10
  const app = useStackApp();
11
12
  const onSubmit = async () => {
13
    if (!password) {
14
      setError('Please enter your password');
15
      return;
16
    }
17
    // This will redirect to app.urls.afterSignUp if successful.
18
    // You can customize the redirect URL in the StackServerApp constructor.
19
    const result = await app.signUpWithCredential({ email, password });
20
    // It's better to handle each error code separately, but for simplicity,
21
    // we'll just display the error message directly here.
22
    if (result.status === 'error') {
23
      setError(result.error.message);
24
    }
25
  };
26
  
27
  return (
28
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
29
      {error}
30
      <input type='email' placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
31
      <input type='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)} />
32
      <button type='submit'>Sign Up</button>
33
    </form>
34
  );
35
}