CustomizationCustom Page Examples

Sign Up

Custom page with SignUp component

1'use client';
2import { SignUp } from "@stackframe/stack";
3
4export 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}

You can also use useUser at the beginning of the sign in page to check if wether the user is already signed in and redirect them to some other page if they are.

Other useful components

CredentialSignUp: A component that contains a form for signing in with email and password.

OAuthGroup: A list of available OAuth provider sign-up buttons components. The available provider list is fetched from the server.

OAuthButton: A single OAuth sign-up button.

Custom OAuth Sign Up

OAuth sign-in and sign-up shares the same function. Check out the Sign In example for more information.

Custom Credential Sign Up

1'use client';
2
3import { useStackApp } from "@stackframe/stack";
4import { useState } from "react";
5
6export 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, you can customize it in the StackServerApp constructor
18 const errorCode = await app.signUpWithCredential({ email, password });
19 // It is better to handle each error code separately, but we will just show the error code directly for simplicity here
20 if (errorCode) {
21 setError(errorCode.message);
22 }
23 };
24
25 return (
26 <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
27 {error}
28 <input type='email' placeholder="[email protected]" value={email} onChange={(e) => setEmail(e.target.value)} />
29 <input type='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)} />
30 <button type='submit'>Sign Up</button>
31 </form>
32 );
33}

Magic link sign-in and sign-up shares the same function. Check out the Sign In example for more information.