Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 54 additions & 2 deletions docs/end-user-flows/one-time-token.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ Logto supports the following scenarios with magic links:
- **Invitation-only registration**: For internal tools or AI products in testing phase, you can disable public registration and invite specific users via magic links.
- **Organization member invitation**: For SaaS products, use magic links to invite new members to join an organization, streamlining the onboarding process.
- **Sign-in / Sign-up**: Send a magic link for passwordless sign-in or sign-up via email.
- **Password reset**: Send a reset-password magic link from your own application so the user can verify the one-time token and set a new password in Logto.

For example, when you've disabled public registration, you can send a magic link with a one-time token (e.g., `https://yourapp.com/landing-page?token=YHwbXSXxQfL02IoxFqr1hGvkB13uTqcd&email=user@example.com`) to the user's email to invite them to complete account creation. You can customize the email template in your own email delivery service, such as:

Expand All @@ -28,7 +29,6 @@ For example, when you've disabled public registration, you can send a magic link

Currently not supported:

- Password reset with magic link.
- Using phone number or username as the identifier.

## One-time token flow \{#one-time-token-flow}
Expand Down Expand Up @@ -80,10 +80,24 @@ Sample request body payload:
}
```

For a password reset magic link, restrict the token to the forgot password flow:

```json
{
"email": "user@example.com",
"expiresIn": 3600,
"context": {
"interactionEvent": "ForgotPassword"
}
}
```

### Step 2: Compose your magic link \{#step-2-compose-your-magic-link}

After you get the one-time token, you can compose a magic link and send it to the end user's email address.
The magic link should at least contain the token and the user email as parameters, and should navigate to a landing page in your own application.
For sign-in or sign-up magic links, the magic link should at least contain the token and the user email as parameters.
For password reset magic links, the email parameter is optional; if you omit it, Logto will ask the user to enter their email address before verifying the one-time token.
The magic link should navigate to a landing page in your own application.
E.g. `https://yourapp.com/landing-page`.

Here's a simple example of what the magic link may look like:
Expand All @@ -102,6 +116,8 @@ as well as encoding all the URL parameters.

### Step 3: Trigger the authentication flow via Logto SDK \{#step-3-trigger-the-authentication-flow-via-logto-sdk}

#### Sign-in or sign-up \{#sign-in-or-sign-up}

After the end user clicks the magic link and navigated to your application, you can extract the `token` and `email` parameters from the URL, and then call the `signIn()` function from Logto SDK to trigger the auth flow.

```typescript title="TokenLandingPage.tsx"
Expand Down Expand Up @@ -138,6 +154,42 @@ const TokenLandingPage = () => {
};
```

#### Reset password \{#reset-password}

For password reset magic links, start an authentication request with `first_screen` set to `reset_password`.
Pass the one-time token through `one_time_token`.
If you already have the user's email from your landing page, pass it through `login_hint`; otherwise, omit `login_hint` and Logto will ask the user to enter their email address before token verification.

```typescript title="ResetPasswordTokenLandingPage.tsx"
// React example
import { useLogto } from '@logto/react';
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

const ResetPasswordTokenLandingPage = () => {
const { signIn } = useLogto();
const [searchParams] = useSearchParams();

useEffect(() => {
const oneTimeToken = searchParams.get('token');
const email = searchParams.get('email');

if (oneTimeToken) {
signIn({
redirectUri: 'https://yourapp.com/callback',
extraParams: {
'one_time_token': oneTimeToken,
'first_screen': 'reset_password',
...(email && { 'login_hint': email }),
},
});
Comment thread
charIeszhao marked this conversation as resolved.
}
}, [searchParams, signIn]);

return <>Please wait...</>;
};
```

:::warning

If a user is already signed-in, calling the`signIn()` function from SDK will automatically clear all cached tokens (ID token, access token, and refresh token) from client storage,
Expand Down
6 changes: 5 additions & 1 deletion docs/end-user-flows/sign-up-and-sign-in/reset-password.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,10 @@ You can implement your own password reset flow by using the Logto's **Management

</summary>

You can create a self-hosted password reset endpoint and utilize the Logto SDK to initiate a sign-in request with [`first_screen`](/end-user-flows/authentication-parameters/first-screen) set to `reset-password`. This will seamlessly redirect the user to the password reset page.
You can create a self-hosted password reset endpoint and use the Logto SDK to initiate a sign-in request with [`first_screen`](/end-user-flows/authentication-parameters/first-screen) set to `reset_password`. This redirects the user to the password reset page.

To verify the user with a magic link, create a [one-time token](/end-user-flows/one-time-token) for the user's email and pass it through the `one_time_token` authentication parameter. If you include `login_hint`, Logto will verify the token immediately; otherwise, Logto will ask the user to enter their email address before token verification.

Learn more in the [one-time token password reset guide](/end-user-flows/one-time-token#reset-password).

</details>
Loading