# Email and Password

Users often expect to sign in to your site with a password. Openfort Auth helps you implement password-based authentication safely, using secure configuration options and best practices for storing and verifying passwords.

{/* Note: You can update the server sending email notifications and the email templates through your dashboard. Visit the guide on how to [update password authentication](/docs/configuration/password/custom-smtp) to learn more. */}

## Sign up a user

Call `signUpWithEmailPassword()` with the user's email address and password. The `name` and `callbackURL` parameters are optional:

```typescript
signUpWithEmailPassword({
  email: string,
  password: string,
  name?: string,        // Optional — defaults to the email address
  callbackURL?: string, // Optional — URL for email verification redirect
}): Promise<AuthResponse | AuthActionRequiredResponse>
```

The method returns either an `AuthResponse` with the user's token and profile, or an `AuthActionRequiredResponse` if email verification is required before the user can log in.

:::code-group

```tsx [auth.tsx]
import openfort from "./openfortConfig"

async function signUpNewUser(email: string, password: string, name?: string) {
  const result = await openfort.auth.signUpWithEmailPassword({
    email: email,
    password: password,
    name: name,  // Optional
    callbackURL: 'https://your-app.com/verify-email',  // Optional
  });

  if ('action' in result) {
    console.log('Please verify your email before logging in');
    return;
  }

  console.log('User signed up:', result.user.id);
}
```

```ts [openfortConfig.ts]
import { Openfort } from '@openfort/openfort-js';

const openfort = new Openfort({
  baseConfiguration: {
    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
  }
});

export default openfort;
```

```json [response.json (AuthResponse)]
{
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "usr_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
    "email": "hello@example.com",
    "name": "John Doe",
    "emailVerified": true,
    "createdAt": "2024-03-20T12:00:00Z",
    "updatedAt": "2024-03-20T12:00:00Z"
  }
}
```

```json [response.json (ActionRequired)]
{
  "action": "verify_email"
}
```

:::

To require email verification, send a verification email after sign up:

```ts
await openfort.auth.requestEmailVerification({
    email: email,
    redirectUrl: 'http://example.com/account/register',
  });
```

### Verify email with token

When the user clicks the verification link, verify their email using the token from the URL:

```ts
await openfort.auth.verifyEmail({
  token: 'verification-token-from-url',
  callbackURL: 'https://your-app.com/verified', // Optional
});
```

This is distinct from `verifyEmailOtp` — use `verifyEmail` for link-based verification and `verifyEmailOtp` for OTP-based verification.

## Log in a user

When your user signs in, call `logInWithEmailPassword()` with their email address and password.

The method returns an `AuthResponse` with the user's token and profile.

:::code-group

```ts [auth.ts]
import openfort from "./openfortConfig"

async function logInUser(email: string, password: string) {
  const result = await openfort.auth.logInWithEmailPassword({
    email: email,
    password: password
  });

  console.log('User logged in:', result.user.id);
}
```

```ts [openfortConfig.ts]
import { Openfort } from '@openfort/openfort-js';

const openfort = new Openfort({
  baseConfiguration: {
    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
  }
});

export default openfort;
```

```json [response.json]
{
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "usr_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
    "email": "hello@example.com",
    "name": "John Doe",
    "emailVerified": true,
    "createdAt": "2024-03-20T12:00:00Z",
    "updatedAt": "2024-03-20T12:00:00Z"
  }
}
```

:::

## Log in with OTP

Use one-time passcode (OTP) authentication for passwordless login via email.

### Request OTP

Call `requestEmailOtp()` to send a one-time passcode to the user's email address:

```ts
await openfort.auth.requestEmailOtp({ email: 'hello@example.com' });
```

:::info
`requestEmailOtp` behaves differently depending on authentication state:

* **Unauthenticated**: sends a sign-in OTP for passwordless login.
* **Authenticated**: sends a verification OTP for email verification (useful when a logged-in user needs to verify their email address).
  :::

### Verify OTP and log in

Call `logInWithEmailOtp()` with the email and the OTP code the user received:

:::code-group

```ts [auth.ts]
import openfort from "./openfortConfig"

async function logInWithOtp(email: string, otp: string) {
  const result = await openfort.auth.logInWithEmailOtp({
    email: email,
    otp: otp
  });

  console.log('User logged in:', result.user.id);
}
```

```json [response.json]
{
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "usr_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
    "email": "hello@example.com",
    "emailVerified": true,
    "createdAt": "2024-03-20T12:00:00Z",
    "updatedAt": "2024-03-20T12:00:00Z"
  }
}
```

:::

## Verify email with OTP

Use `verifyEmailOtp()` to verify an email address using a one-time passcode. This is useful when a user is already authenticated and needs to verify their email:

```ts
await openfort.auth.verifyEmailOtp({
  email: 'hello@example.com',
  otp: '123456'
});
```

## Reset a password

### Request password reset

Create a reset password page. Collect the user's email address and request a password reset email with a redirect URL pointing to your change password page:

```ts
await openfort.auth.requestResetPassword({
  email: 'hello@example.com',
  redirectUrl: 'https://example.com/account/update-password',
});
```

### Reset password with token

Create a change password page at the URL you specified. Collect the user's new password and pass the reset token from the URL query parameters:

```ts
await openfort.auth.resetPassword({
  password: 'new-password',
  token: 'reset-token-from-url',
});
```