CustomizationCustom Page Examples

Password Reset

This page provides examples of how to create custom password reset pages for your application. Password reset functionality allows users to securely create a new password when they’ve forgotten their current one.

Custom page with PasswordReset component

The PasswordReset component provides a complete password reset form with built-in validation and error handling. This is the simplest way to add password reset functionality to your application.

1'use client';
2import { PasswordReset } from "@stackframe/stack";
3
4export default function DefaultPasswordReset() {
5  return <PasswordReset />;
6}

Integration with Application Routing

To integrate the password reset page with your application’s routing:

  1. Create a route handler that extracts the reset code from the URL (e.g., /reset-password?code=xyz123)
  2. Pass the code to your password reset component
  3. Configure Stack Auth to use your custom route in your stack.ts file:
1export const stackServerApp = new StackServerApp({
2  // ...
3  urls: {
4    passwordReset: '/reset-password',
5  }
6});

This ensures that password reset links in emails will direct users to your custom page.

Custom password reset form

If you need more control over the password reset process, you can build your own form using the Stack Auth API. This approach allows you to customize the UI and error handling to match your application’s design.

The code parameter used below is typically extracted from the URL query parameters. This code is sent to the user’s email when they request a password reset and is required to validate the reset request.

1'use client';
2
3import { useStackApp } from "@stackframe/stack";
4import { useState } from "react";
5
6export default function CustomPasswordResetForm({ code }: { code: string }) {
7  const [password, setPassword] = useState('');
8  const [confirmPassword, setConfirmPassword] = useState('');
9  const [error, setError] = useState('');
10  const [success, setSuccess] = useState(false);
11  const app = useStackApp();
12
13  const onSubmit = async () => {
14    if (password !== confirmPassword) {
15      setError('Passwords do not match');
16      return;
17    }
18
19    try {
20      const result = await app.resetPassword({ password, code });
21      if (result.status === 'error') {
22        setError('Failed to reset password');
23        return;
24      }
25      setSuccess(true);
26    } catch (err) {
27      setError(`An unexpected error occurred: ${err.message}`);
28    }
29  };
30
31  if (success) {
32    return <div>Password successfully reset!</div>;
33  }
34
35  return (
36    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
37      {error && <div>{error}</div>}
38      <div>
39        <label htmlFor="password">New Password</label>
40        <input
41          id="password"
42          type="password"
43          value={password}
44          onChange={(e) => setPassword(e.target.value)}
45        />
46      </div>
47      <div>
48        <label htmlFor="confirm">Confirm Password</label>
49        <input
50          id="confirm"
51          type="password"
52          value={confirmPassword}
53          onChange={(e) => setConfirmPassword(e.target.value)}
54        />
55      </div>
56      <button type="submit">Reset Password</button>
57    </form>
58  );
59}