---
title: 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.

```tsx  
'use client';
import { PasswordReset } from "@stackframe/stack";

export default function DefaultPasswordReset() {
  return <PasswordReset />;
}
```

## 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:

```tsx
export const stackServerApp = new StackServerApp({
  // ...
  urls: {
    passwordReset: '/reset-password',
  }
});
```

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.

```tsx
'use client';

import { useStackApp } from "@stackframe/stack";
import { useState } from "react";

export default function CustomPasswordResetForm({ code }: { code: string }) {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const app = useStackApp();

  const onSubmit = async () => {
    if (password !== confirmPassword) {
      setError('Passwords do not match');
      return;
    }

    try {
      const result = await app.resetPassword({ password, code });
      if (result.status === 'error') {
        setError('Failed to reset password');
        return;
      }
      setSuccess(true);
    } catch (err) {
      setError(`An unexpected error occurred: ${err.message}`);
    }
  };

  if (success) {
    return <div>Password successfully reset!</div>;
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
      {error && <div>{error}</div>}
      <div>
        <label htmlFor="password">New Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="confirm">Confirm Password</label>
        <input
          id="confirm"
          type="password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
        />
      </div>
      <button type="submit">Reset Password</button>
    </form>
  );
}
```