Test passwordless flows

This guide shows you how to automate passwordless authentication testing with Playwright using Mailosaur. Learn more about testing passwordless flows with Kinde.

What you need

Completed the Playwright setup
A test user and a running Kinde application.
A Mailosaur account (Sign up for free trial)

Setup Mailosaur

Sign in to your Mailosaur account.
Copy the Server ID from the dashboard.
Go to API Keys > select Create standard key and copy the value.
Install the Mailosaur client in your Playwright project:
Terminal window
```
npm install mailosaur --save-dev
```
Add the following to your .env file:
```
# ... other environment variables ...
MAILOSAUR_API_KEY=your-api-key
MAILOSAUR_SERVER_ID=your-server-id
```
Important

Make sure to add the .env file to your .gitignore file to prevent committing sensitive information to source control.
Create a helper utility file tests/utils/mailosaur.ts:
Terminal window
```
mkdir -p tests/utils
touch tests/utils/mailosaur.ts
```

Add the following code to mailosaur.ts:

import MailosaurClient from "mailosaur"
require("dotenv").config()

const mailosaur = new MailosaurClient(process.env.MAILOSAUR_API_KEY!)
const serverId = process.env.MAILOSAUR_SERVER_ID!

export async function getOTPFromEmail(
  email: string,
): Promise<{
  emailId: string | undefined
  otpCode: string
  deleteEmail: () => Promise<void>
}> {
  const message = await mailosaur.messages.get(serverId, { sentTo: email })
  const otpMatch = message.text?.body?.match(/\b(\d{6})\b/)
  const otpCode = otpMatch?.[1]

  if (!otpCode) {
    throw new Error("Could not extract OTP code from email")
  }

  return {
    emailId: message.id,
    otpCode,
    deleteEmail: async () => {
      await mailosaur.messages.del(message.id!)
    },
  }
}

To test the passwordless sign-up flow, enable the Email + code option in authentication methods in your Kinde application.

Create a new test file:
Terminal window
```
touch tests/passwordless-signup.spec.ts
```

Add the following code:

import { test, expect } from "@playwright/test"
import { getOTPFromEmail } from "./utils/mailosaur"

const serverId = process.env.MAILOSAUR_SERVER_ID!

test.describe("Passwordless Authentication Flows", () => {
  test("user can sign up with email and code", async ({ page }) => {
    // Generate unique email for this test run
    const timestamp = Date.now()
    const testEmail = `test-${timestamp}@${serverId}.mailosaur.net`

    await page.goto(process.env.TEST_APP_URL!)
    await page.click('[data-testid="sign-up-button"]')

    // Wait for Kinde sign-up page
    await expect(page).toHaveURL(/kinde\.com/)

    // Fill sign-up form
    await page.fill('input[name="p_first_name"]', "John")
    await page.fill('input[name="p_last_name"]', "Doe")
    await page.fill('input[name="p_email"]', testEmail)
    await page.check('input[name="p_has_clickwrap_accepted"]') // Accept terms and conditions
    await page.click('button[type="submit"]')

    // Wait for OTP email and extract code
    const { otpCode, deleteEmail } = await getOTPFromEmail(testEmail)

    try {
      // Enter OTP
      await page.fill('input[name="p_confirmation_code"]', otpCode)
      await page.click('button[type="submit"]')

      // Wait for successful auth
      const appUrl = new URL(process.env.TEST_APP_URL!)
      await expect(page).toHaveURL(
        new RegExp(appUrl.hostname.replace(".", "\\.")),
      )
      await expect(page.locator('[data-testid="user-profile"]')).toBeVisible()

    } finally {
      // Clean up OTP email
      await deleteEmail()
    }
  })
})

To test the passwordless sign-in flow:

Enable the Email + code option in Authentication methods.
Sign up for a new test user using the Mailosaur domain (e.g., test-123@your-server-id.mailosaur.net).
Save the test user email to your .env file as TEST_USER_EMAIL.
Create a new test file:
Terminal window
```
touch tests/passwordless-signin.spec.ts
```

Add the following code:

import { test, expect } from '@playwright/test'
import { getOTPFromEmail } from './utils/mailosaur'

test.describe('Passwordless Authentication Flows', () => {
  test('user can sign in with email and code', async ({ page }) => {
    await page.goto(process.env.TEST_APP_URL!)
    await page.click('[data-testid="sign-in-button"]')

    // Wait for Kinde sign-in page
    await expect(page).toHaveURL(/kinde\.com/)

    // Fill sign-in form
    await page.fill('input[name="p_email"]', process.env.TEST_USER_EMAIL!)
    await page.click('button[type="submit"]')

    // Wait for OTP email and extract code
    const { otpCode, deleteEmail } = await getOTPFromEmail(
      process.env.TEST_USER_EMAIL!
    )

    try {
      // Enter OTP
      await page.fill('input[name="p_confirmation_code"]', otpCode)
      await page.click('button[type="submit"]')

      // Wait for successful auth
      const appUrl = new URL(process.env.TEST_APP_URL!)
      await expect(page).toHaveURL(
        new RegExp(appUrl.hostname.replace('.', '\\.'))
      )
      await expect(page.locator('[data-testid="user-profile"]')).toBeVisible()

    } finally {
      // Clean up OTP email
      await deleteEmail()
    }
  })
})

We have included this example because OTP verification is required for all new users in Kinde regardless of the authentication method used.

This example uses the Kinde email + password authentication method to sign up a new test user.

Create a new test file:

touch tests/email-password-signup.spec.ts

Add the following code:

import { test, expect } from '@playwright/test'
import { getOTPFromEmail } from './utils/mailosaur'

const serverId = process.env.MAILOSAUR_SERVER_ID!

test.describe('Authentication Flows', () => {
  test('user can sign up with email and password', async ({ page }) => {
    // Generate unique email for this test run
    const timestamp = Date.now()
    const testEmail = `test-${timestamp}@${serverId}.mailosaur.net`

    await page.goto(process.env.TEST_APP_URL!)
    await page.click('[data-testid="sign-up-button"]')

    // Wait for Kinde sign-up page
    await expect(page).toHaveURL(/kinde\.com/)

    // Fill sign-up form
    await page.fill('input[name="p_first_name"]', 'John')
    await page.fill('input[name="p_last_name"]', 'Doe')
    await page.fill('input[name="p_email"]', testEmail)
    await page.check('input[name="p_has_clickwrap_accepted"]') // Accept terms and conditions
    await page.click('button[type="submit"]')

    // Wait for OTP email
    const { otpCode, deleteEmail } = await getOTPFromEmail(testEmail)

    try {
      // Enter OTP
      await page.fill('input[name="p_confirmation_code"]', otpCode)
      await page.click('button[type="submit"]')

      // Enter password
      await page.fill(
        'input[name="p_first_password"]',
        process.env.TEST_USER_PASSWORD!
      )
      await page.fill(
        'input[name="p_second_password"]',
        process.env.TEST_USER_PASSWORD!
      )
      await page.click('button[type="submit"]')

      // Wait for successful auth
      const appUrl = new URL(process.env.TEST_APP_URL!)
      await expect(page).toHaveURL(
        new RegExp(appUrl.hostname.replace('.', '\\.'))
      )
      await expect(page.locator('[data-testid="user-profile"]')).toBeVisible()

    } finally {
      // Clean up OTP email
      await deleteEmail()
    }
  })
})

Run the tests

Use the following command:
Terminal window
```
npx playwright test --ui
```
Select the test spec to run.

You should now see the Playwright tests passing in the browser.
Go to your Kinde dashboard > Users to find the test users you created.

Join the community

Get support from the Kinde team and expert users in the Kinde community

Join via Slack or Discord
Contact support

Chat to support through the Kinde help widget, or send a question via email

Send an email

Test passwordless flows

What you need

Setup Mailosaur

Test passwordless sign-up flow

Test passwordless sign-in flow

Test sign-up flow with email and password

Run the tests

Useful links

Join the community

Contact support