`, even though Testing Library will treat each as the same if located using the `ByRole` locator. This is because, much like test IDs, the `ByRole` approach is intended to _avoid_ testing the implementation directly, to keep tests resilient when code is refactored.
+
+Developers who are unfamiliar with accessibility may assume that if a Testing Library `ByRole` locator can be made to pass before and after a code change, there has been no functional or accessibility-related change in the underlying element. As we've seen, this is not actually the case, because of the extra behavior browsers only implement for native HTML elements. For more about this difference and why semantic HTML elements are preferred, see the [first rule of Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/using-aria/#rule1).
+
+## Where to test accessibility
+
+So what should you do in your test automation to help confirm the UI is accessible? First of all, for known critical areas like forms or checkout flows, ensure that the accessibility behavior is tested explicitly in at least one place. The means verifying that form fields and buttons have the correct labels and use the expected HTML elements, and other aspects of the DOM that communicate necessary information.
+
+Component tests are a fantastic place to do this centralized accessibility spec work, whether using [Cypress Component testing](/app/component-testing/get-started) or something else. Component tests are run locally during development, written by developers as they build the UI, and can easily specify the specific HTML that is intended to be rendered, without being a distraction in an end-to-end test of a specific user flow.
+
+Accessibility should be tested at least once for a given component, area of the application, or workflow. Once that is achieved, there is no additional accessibility benefit to repeatedly asserting subsets of the same things in other tests, unless those tests introduce new combinations of components that have not been tested for accessibility anywhere else.
+
+### Choosing a locator approach
+
+Test IDs are the most resilient locator option and are a good choice for maximizing the stability of your pipeline, especially if end-to-end tests are written by people who are not familiar with accessibility, and don't already know the correct roles, elements, and behavior that should be expected. You do not lose any accessibility "coverage", as long as accessibility is explicitly tested with assertions, and a library like Axe Core® is in place to catch mistakes.
+
+Testing Library locators are convenient and familiar to many React developers (due to its origins as "React Testing Library"), and they don't require any code changes, but may cause _many_ tests to fail when a label is missing, instead of just your explicit accessibility assertions, because they are a step closer to the implementation details.
+
+Additionally, Testing Library locators can provide a false sense of confidence that something is accessible simply because it can be located by its role. Still, when understood correctly, teams can write effective tests using this approach, and some locators like [`findByLabelText`](https://testing-library.com/docs/queries/bylabeltext) stand out as being particularly useful.
+
+What is most important in all accessibility automation discussions is an this: how can your testing strategy best support your users with disabilities to independently understand and use your application? Cypress enables you to place the user at the center of your testing process. With a mix of automated scans and some specific intentional assertions, you can reach high levels of confidence that your application is free of known accessibility errors and let your test pipeline warn you if things are going off track.
+
+## See also
+
+- [Cypress Accessibility](/accessibility/get-started/introduction)
+- [Plugins](/app/plugins/plugins-list)
diff --git a/docs/app/guides/authentication-testing/_category_.json b/docs/app/guides/authentication-testing/_category_.json
new file mode 100644
index 0000000000..fb05571409
--- /dev/null
+++ b/docs/app/guides/authentication-testing/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Authentication Testing",
+ "collapsible": true,
+ "collapsed": true
+}
diff --git a/docs/guides/end-to-end-testing/testing-strategies/amazon-cognito-authentication.mdx b/docs/app/guides/authentication-testing/amazon-cognito-authentication.mdx
similarity index 78%
rename from docs/guides/end-to-end-testing/testing-strategies/amazon-cognito-authentication.mdx
rename to docs/app/guides/authentication-testing/amazon-cognito-authentication.mdx
index 14f5bc9c40..de4fbf2ccd 100644
--- a/docs/guides/end-to-end-testing/testing-strategies/amazon-cognito-authentication.mdx
+++ b/docs/app/guides/authentication-testing/amazon-cognito-authentication.mdx
@@ -2,73 +2,39 @@
title: 'Amazon Cognito Authentication in Cypress'
sidebar_label: 'Amazon Cognito Authentication'
description: 'Implement Amazon Cognito authentication in Cypress. Securely manage authentication processes for Cypress end-to-end testing scenarios'
-e2eSpecific: true
-slug: /guides/end-to-end-testing/amazon-cognito-authentication
---
# Amazon Cognito Authentication
:::info
-##
What you'll learn
+#####
What you'll learn
-- Log in to [Amazon Cognito](https://aws.amazon.com/cognito) through the UI with
- [`cy.origin()`](/api/commands/origin)
-- Programmatically authenticate with
- [Amazon Cognito](https://aws.amazon.com/cognito) via a custom Cypress command
-- Adapting your [Amazon Cognito](https://aws.amazon.com/cognito) application for
- programmatic authentication during testing
+- How to implement Amazon Cognito authentication in Cypress
+- How to securely manage authentication processes for Cypress end-to-end testing scenarios
:::
-:::tip
-
-**Authenticate by visiting a different domain with
-[`cy.origin()`](/api/commands/origin)**
-
-Typically, logging in a user within your app by authenticating via a third-party
-provider requires visiting a login page hosted on a different domain. Before
-Cypress [v12.0.0](https://on.cypress.io/changelog#12-0-0), Cypress tests were
-limited to visiting domains of the same origin, making programmatic login the
-only option for authenticating users with a third-party API. As of Cypress
-[v12.0.0](https://on.cypress.io/changelog#12-0-0), Cypress tests are no longer
-limited to visiting domains of a single origin, meaning you can easily
-authenticate to federated AWS Cognito via the UI!
-
-:::
-
-## What is Amazon Cognito?
-
Amazon [Cognito](https://aws.amazon.com/cognito) is an authentication provider
apart of [Amazon Web Services (AWS)](https://aws.amazon.com).
-It "lets you add user sign-up, sign-in, and access control to your web and
-mobile apps quickly and easily" and "scales to millions of users and supports
-sign-in with social identity providers, such as Facebook, Google, and Amazon,
-and enterprise identity providers via SAML 2.0."
-
-## Authentication with Amazon Cognito
-
The documentation for [Amazon Cognito](https://aws.amazon.com/cognito)
recommends using the
[AWS Amplify Framework Authentication Library](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html)
from the [AWS Amplify Framework](https://aws.amazon.com/amplify/framework/) to
interact with a deployed [Amazon Cognito](https://aws.amazon.com/cognito)
-instance.
-
-Using the
+instance. Using the
[AWS Amplify Framework Authentication Library](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html),
we are able to programmatically drive the creation and authentication of users
against a fully deployed back end.
-This illustrates the limited code from the
+This guide illustrates the limited code from the
[AWS Amplify Framework](https://aws.amazon.com/amplify/framework/) needed to
programmatically log an existing a user into an application.
-
+
-
```jsx
// Add 'aws-amplify' library into your application
@@ -88,10 +54,9 @@ Auth.signIn(username, password)
.catch((err) => console.log(err))
```
-
+
-
```tsx
import { Amplify } from "aws-amplify";
@@ -114,10 +79,9 @@ signIn({ username, password, { authFlowType: "USER_PASSWORD_AUTH" } })
.catch((err) => console.log(err));
```
-
+
-
## Amazon Cognito Setup
@@ -127,31 +91,28 @@ with [Amazon Web Services (AWS)](https://aws.amazon.com).
An [Amazon Cognito](https://aws.amazon.com/cognito) integration is available in
the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
-Clone the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)
-and install the [AWS Amazon Amplify CLI](https://docs.amplify.aws/cli) as
-follows:
+
. Clone the Cypress Real
+World App and install the [AWS Amazon Amplify CLI](https://docs.amplify.aws/cli)
+as follows:
```jsx
npm install @aws-amplify/cli --global
```
The
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app) is
-configured with an optional [Amazon Cognito](https://aws.amazon.com/cognito)
-instance via the
-[AWS Amplify Framework Authentication Library](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html).
-The [AWS Amazon Amplify CLI](https://docs.amplify.aws/cli) is used to provision
-the [Amazon Web Services (AWS)](https://aws.amazon.com) infrastructure needed to
-configure your environment and cloud resources.
+
is configured with an optional
+[Amazon Cognito](https://aws.amazon.com/cognito) instance via the [AWS Amplify Framework
+Authentication Library](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html).
+The [AWS Amazon Amplify CLI](https://docs.amplify.aws/cli) is used to provision the
+[Amazon Web Services (AWS)](https://aws.amazon.com) infrastructure needed to configure
+your environment and cloud resources.
First, run the
[amplify init](https://docs.amplify.aws/cli/start/workflows#initialize-new-project)
command to initialize the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+Real World App.
This will provision the project with your [AWS](https://aws.amazon.com)
credentials.
@@ -173,7 +134,7 @@ amplify push
Note
Use the `yarn dev:cognito` command when starting the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+Real World App.
:::
@@ -209,23 +170,22 @@ const awsConfig = require('./aws-exports-es5.js')
There are two ways you can authenticate to AWS Cognito:
-- [Login with `cy.origin()`](/guides/end-to-end-testing/amazon-cognito-authentication#Login-with-cyorigin)
-- [Programmatic Access](/guides/end-to-end-testing/amazon-cognito-authentication#Programmatic-Login)
+- [Login with `cy.origin()`](/app/guides/authentication-testing/amazon-cognito-authentication#Login-with-cyorigin)
+- [Programmatic Access](/app/guides/authentication-testing/amazon-cognito-authentication#Programmatic-Login)
### Login with [`cy.origin()`](/api/commands/origin)
-Next, we'll write a custom command called `loginByCognito` to perform a login to
+We'll write a custom command called `loginByCognito` to perform a login to
[Amazon Cognito](https://aws.amazon.com/cognito). This command will use
[`cy.origin()`](/api/commands/origin) to
-1. navigate to the Cognito origin
-2. input user credentials
-3. sign in and redirect back to the
- [Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)
-4. cache the results with [`cy.session()`](/api/commands/session)
+1. Navigate to the Cognito origin
+2. Input user credentials
+3. Sign in and redirect back to the
+
+4. Cache the results with [`cy.session()`](/api/commands/session)
-```jsx
-// cypress/support/auth-provider-commands/cognito.ts
+```jsx title="cypress/support/auth-provider-commands/cognito.ts"
// Amazon Cognito
const loginToCognito = (username: string, password: string) => {
Cypress.log({
@@ -274,16 +234,17 @@ Now, we can use our `loginByCognito` command in the test. Below is our test to
login as a user via [Amazon Cognito](https://aws.amazon.com/cognito), complete
the onboarding process and logout.
-:::tip
+:::info
The
[runnable version of this test](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/ui-auth-providers/cognito.spec.ts)
is in the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+
+
.
:::
-```jsx
+```jsx title="auth.spec.js"
describe('Cognito, cy.origin() login', function () {
beforeEach(function () {
// Seed database with test data
@@ -304,12 +265,11 @@ describe('Cognito, cy.origin() login', function () {
-Lastly, we can refactor our login command to take advantage of
+Now, we can refactor our login command to take advantage of
[`cy.session()`](/api/commands/session) to store our logged in user so we don't
have to reauthenticate with every test.
-```jsx
-// cypress/support/auth-provider-commands/cognito.ts
+```jsx title="cypress/support/auth-provider-commands/cognito.ts"
// Amazon Cognito
Cypress.Commands.add(
'loginByCognito, cy.origin() login',
@@ -344,14 +304,11 @@ In this `loginByCognitoApi` command, we call `Auth.signIn`, then use that
response to set the items inside of localStorage for the UI to know that our
user is logged into the application.
-
-
-
-```jsx
-// cypress/support/auth-provider-commands/cognito.ts
+
+```jsx title="cypress/support/auth-provider-commands/cognito.ts"
import Amplify, { Auth } from 'aws-amplify'
Amplify.configure(Cypress.env('awsConfig'))
@@ -406,14 +363,11 @@ Cypress.Commands.add('loginByCognitoApi', (username, password) => {
})
```
-
-
-
-```tsx
-// cypress/support/auth-provider-commands/cognito.ts
+
+```tsx title="cypress/support/auth-provider-commands/cognito.ts"
import { Amplify } from 'aws-amplify'
import { fetchAuthSession, signIn } from 'aws-amplify/auth'
@@ -469,21 +423,19 @@ Cypress.Commands.add(
)
```
-
+
-
Finally, we can use our `loginByCognitoApi` command in at test. Below is our
test to login as a user via [Amazon Cognito](https://aws.amazon.com/cognito),
complete the onboarding process and logout.
-:::tip
+:::info
The
[runnable version of this test](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/ui-auth-providers/cognito.spec.ts)
-is in the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+is in the
.
:::
@@ -523,9 +475,9 @@ the Cognito JWTs to authorize the frontend's requests.
:::
The
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app) is
-used and provides configuration and runnable code for both the React SPA and the
-Express back end.
+
+
is used and provides configuration
+and runnable code for both the React SPA and the Express back end.
The front end uses the
[AWS Amplify Framework Authentication Library](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html).
@@ -539,13 +491,11 @@ In order to validate API requests from the frontend, we install
[jwks-rsa](https://github.com/auth0/node-jwks-rsa) and configure validation for
JWT's from [Amazon Cognito](https://aws.amazon.com/cognito).
-
+
-
-```jsx
-// backend/helpers.ts
+```jsx title="backend/helpers.ts"
// ... initial imports
import jwt from 'express-jwt'
import jwksRsa from 'jwks-rsa'
@@ -566,13 +516,11 @@ export const checkCognitoJwt = jwt(awsCognitoJwtConfig).unless({
})
```
-
+
-
-```jsx
-// backend/helpers.ts
+```jsx title="backend/helpers.ts"
// ... initial imports
import jwt from 'express-jwt'
import jwksRsa from 'jwks-rsa'
@@ -594,15 +542,13 @@ export const checkCognitoJwt = jwt(awsCognitoJwtConfig).unless({
})
```
-
+
-
Once this helper is defined, we can use globally to apply to all routes:
-```jsx
-// backend/app.ts
+```jsx title="backend/app.ts"
// initial imports ...
import { checkCognitoJwt } from './helpers'
@@ -630,8 +576,11 @@ layer (`authMachine.ts`). If no access token is yet available, we redirect the
browser to the [Amazon Cognito](https://aws.amazon.com/cognito) User Pool Hosted UI
to provide the login form.
-```jsx
-// src/containers/AppCognito.tsx, amplify v6
+
+
+
+```jsx title="src/containers/AppCognito.tsx"
+// amplify v6
// initial imports ...
import { Amplify, ResourcesConfig } from "aws-amplify";
import { fetchAuthSession, signInWithRedirect, signOut } from "aws-amplify/auth";
@@ -673,22 +622,24 @@ const AppCognito: React.FC = () => {
export default AppCognito;
```
+
+
+
+
:::tip
Try it out
The complete
[AppCognito.tsx component](https://github.com/cypress-io/cypress-realworld-app/blob/develop/src/containers/AppCognito.tsx)
-is in the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+is in the
.
:::
Next, we update our entry point (`index.tsx`) to use our `AppCognito.tsx`
component.
-```jsx
-// src/index.tsx
+```jsx title="src/index.tsx"
// ... initial imports
import AppCognito from './containers/AppCognito'
diff --git a/docs/guides/end-to-end-testing/testing-strategies/auth0-authentication.mdx b/docs/app/guides/authentication-testing/auth0-authentication.mdx
similarity index 86%
rename from docs/guides/end-to-end-testing/testing-strategies/auth0-authentication.mdx
rename to docs/app/guides/authentication-testing/auth0-authentication.mdx
index ba67a015e8..5117c6927e 100644
--- a/docs/guides/end-to-end-testing/testing-strategies/auth0-authentication.mdx
+++ b/docs/app/guides/authentication-testing/auth0-authentication.mdx
@@ -2,50 +2,26 @@
title: 'Auth0 Integration: Cypress Auth'
sidebar_label: 'Auth0 Integration'
description: 'Seamlessly implement Auth0 authentication with Cypress. Integrate Auth0 authentication for secure testing'
-slug: /guides/end-to-end-testing/auth0-authentication
---
# Auth0 Authentication
:::info
-##
What you'll learn
+#####
What you'll learn
-- Log in to [Auth0](https://auth0.com) through the UI with
- [`cy.origin()`](/api/commands/origin)
-- Programmatically authenticate with [Auth0](https://auth0.com) via a custom
- Cypress command
-- Adapt your [Auth0](https://auth0.com) application for programmatic
- authentication during testing
+- How to authenticate with Auth0 in Cypress tests
+- How to adapt an Auth0 app for testing
+- Caveats and considerations for Auth0 rate limiting
:::
-:::caution
-
This guide is setup for testing against an [Auth0](https://auth0.com) Single
Page Application using the
[Classic Universal Login Experience](https://auth0.com/docs/universal-login/classic).
This configuration is recommended for a "Test Tenant" and/or "Test API" setup
for automated end-to-end testing.
-:::
-
-:::tip
-
-**Authenticate by visiting a different domain with
-[`cy.origin()`](/api/commands/origin)**
-
-Typically, logging in a user within your app by authenticating via a third-party
-provider requires visiting a login page hosted on a different domain. Before
-Cypress [v12.0.0](https://on.cypress.io/changelog#12-0-0), Cypress tests were
-limited to visiting domains of the same origin, making programmatic login the
-only option for authenticating users with a third-party API. As of Cypress
-[v12.0.0](https://on.cypress.io/changelog#12-0-0), Cypress tests are no longer
-limited to visiting domains of a single origin, meaning you can easily
-authenticate with [Auth0](https://auth0.com) via the UI!
-
-:::
-
## Auth0 Application Setup
To get started with Auth0, an application needs to be setup within the
@@ -147,9 +123,7 @@ Next, we'll write a custom command called `loginToAuth0` to perform a login to
[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)
4. Cache the results with [`cy.session()`](/api/commands/session)
-```js
-// cypress/support/auth-provider-commands/auth0.ts
-
+```js title="cypress/support/auth-provider-commands/auth0.ts"
function loginViaAuth0Ui(username: string, password: string) {
// App landing page redirects to Auth0.
cy.visit('/')
@@ -188,16 +162,15 @@ Cypress.Commands.add('loginToAuth0', (username: string, password: string) => {
Now, we can use our `loginToAuth0` command in the test. Below is our test to
login as a user via Auth0 and run a basic sanity check.
-:::tip
+:::info
The
[runnable version of this test](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/ui-auth-providers/auth0.spec.ts)
-is in the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+is in the
.
:::
-```js
+```js title='auth.cy.js'
describe('Auth0', function () {
beforeEach(function () {
cy.task('db:seed')
@@ -221,7 +194,7 @@ Lastly, we can refactor our login command to take advantage of
[`cy.session()`](/api/commands/session) to store our logged in user so we don't
have to reauthenticate before every test.
-```js
+```js title="cypress/support/commands.js"
Cypress.Commands.add('loginToAuth0', (username: string, password: string) => {
const log = Cypress.log({
displayName: 'AUTH0 LOGIN',
@@ -269,8 +242,7 @@ The `loginByAuth0Api` command will execute the following steps:
2. Finally the `auth0Cypress` `localStorage` item is set with the
`access token`, `id_token` and user profile.
-```jsx
-// cypress/support/commands.js
+```jsx title="cypress/support/commands.js"
Cypress.Commands.add(
'loginByAuth0Api',
(username: string, password: string) => {
@@ -340,7 +312,7 @@ we will be able to authenticate with Auth0 while our app is under test. Below is
a test to login as a user via [Auth0](https://auth0.com), complete the
onboarding process and logout.
-```jsx
+```jsx title="auth.cy.js"
describe('Auth0', function () {
beforeEach(function () {
cy.task('db:seed')
@@ -366,19 +338,19 @@ The previous sections focused on the recommended Auth0 authentication practice
within Cypress tests. To use this practice it is assumed you are testing an app
appropriately built or adapted to use Auth0.
-The following sections provides guidance on building or adapting an app to use
+The following sections provide guidance on building or adapting an app to use
Auth0 authentication. Please note that if you are
[logging in with `cy.origin()`](#Login-with-cyorigin) and your app is already
-successfully integrated with Auth0, you do not need to make any further changes
+successfully integrated with Auth0, you don't need to make any further changes
to your app and the remainder of this guide should be regarded as purely
informational.
:::
The
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app) is
-used and provides configuration and runnable code for both the React SPA and the
-Express back end.
+
+
is used and provides configuration
+and runnable code for both the React SPA and the Express back end.
The front end uses the [auth0-react SDK](https://github.com/auth0/auth0-react)
for React Single Page Applications (SPA), which uses the
@@ -402,8 +374,7 @@ In order to validate API requests from the frontend, we install
[jwks-rsa](https://github.com/auth0/node-jwks-rsa) and configure validation for
JWT's from [Auth0](https://auth0.com).
-```jsx
-// backend/helpers.ts
+```jsx title='backend/helpers.ts'
import jwt from 'express-jwt'
import jwksRsa from 'jwks-rsa'
@@ -428,9 +399,7 @@ Next, we'll define an Express middleware function to be use in our routes to
verify the [Auth0](https://auth0.com) JWT sent by the front end API requests as
the `Bearer` token.
-```jsx
-// backend/helpers.ts
-
+```jsx title='backend/helpers.ts'
// ...
export const checkJwt = jwt(auth0JwtConfig).unless({ path: ['/testData/*'] })
@@ -438,8 +407,7 @@ export const checkJwt = jwt(auth0JwtConfig).unless({ path: ['/testData/*'] })
Once this helper is defined, we can use globally to apply to all routes:
-```jsx
-// backend/app.ts
+```jsx title='backend/app.ts'
// initial imports ...
import { checkJwt } from './helpers'
@@ -469,9 +437,7 @@ A `useEffect` hook is added to get the access token for the authenticated user
and send an `AUTH0` event with the `user` and `token` objects to work with the
existing authentication layer (`authMachine.ts`).
-```jsx
-// src/containers/AppAuth0.tsx
-
+```jsx title='containers/AppAuth0.tsx'
// initial imports ...
import { withAuthenticationRequired, useAuth0 } from '@auth0/auth0-react'
@@ -507,7 +473,8 @@ export default withAuthenticationRequired(AppAuth0)
Note: The full
[AppAuth0.tsx component](https://github.com/cypress-io/cypress-realworld-app/blob/develop/src/containers/AppAuth0.tsx)
is in the
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app).
+
+
.
Next, we update our entry point (`index.tsx`) to wrap our application with the
`
` from the
@@ -515,9 +482,7 @@ Next, we update our entry point (`index.tsx`) to wrap our application with the
`onRedirectCallback`. We pass props for the Auth0 environment variables set in
`.env` above, and render our `` component as the application.
-```jsx
-// src/index.tsx
-
+```jsx title='index.tsx'
// initial imports ...
import AppAuth0 from "./containers/AppAuth0";
@@ -563,9 +528,7 @@ In addition, we will update the export to be wrapped with
our application to work with the [Auth0](https://auth0.com) redirect login flow
in development/production but not when under test in Cypress.
-```jsx
-// src/containers/AppAuth0.tsx
-
+```jsx title='containers/AppAuth0.tsx'
// initial imports ...
import { withAuthenticationRequired, useAuth0 } from "@auth0/auth0-react";
@@ -584,7 +547,8 @@ const AppAuth0 = () => {
})();
}, [user, getAccessTokenSilently]);
- // If under test in Cypress, get credentials from "auth0Cypress" localstorage item and send event to our state management to log the user into the SPA
+ // If under test in Cypress, get credentials from "auth0Cypress"
+ // localstorage and send event to our state management to log the user into the SPA
if (window.Cypress) {
useEffect(() => {
const auth0 = JSON.parse(localStorage.getItem("auth0Cypress")!);
@@ -617,39 +581,35 @@ const AppAuth0 = () => {
);
};
-// Conditional export wrapped with `withAuthenticationRequired` if we are not under test in Cypress.
+// Conditional export wrapped with `withAuthenticationRequired`
+// if we aren't under test in Cypress.
let appAuth0 = window.Cypress ? AppAuth0 : withAuthenticationRequired(AppAuth0);
export default appAuth0
```
## Auth0 Rate Limiting Logins
-Be aware of the rate limit statement in the Auth0 documentation:
-
-[Auth0 Rate Limit](https://auth0.com/docs/connections/database/rate-limits) -
-"If a user attempts to login 20 times per minute as the same user from the same
-location, regardless of having the correct credentials, the rate limit will come
-into effect. When this happens, the user can make 10 attempts per minute."
+Be aware of the rate limit in [Auth0's documentation](https://auth0.com/docs/connections/database/rate-limits) -
This limit can be reached as the size of a test suite grows along with enabling
-[parallelized runs](https://on.cypress.io/parallelization) to speed up test run
+[parallelized runs](/cloud/features/smart-orchestration/parallelization) to speed up test run
duration.
If you run into this rate limit, a programmatic approach can be added to the
`loginByAuth0` command to clear a blocked IP prior to the test run.
-Next you'll need to obtain a
+You'll need to obtain an
[API token](https://auth0.com/docs/api/management/v2/tokens) to interact with
the [Auth0 Management API](https://auth0.com/docs/api/management/v2). This token
is a JSON Web Token (JWT) and it contains specific granted permissions for the
API.
Add this token as environment variable `AUTH0_MGMT_API_TOKEN` to our
-[Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)
-`.env` with your API token.
-```jsx
-// .env
+ `.env` file with your API
+token.
+
+```jsx title='.env'
// ... additional keys
AUTH0_MGMT_API_TOKEN = 'YOUR-MANAGEMENT-API-TOKEN'
```
@@ -662,14 +622,12 @@ endpoint to unblock an IP that may become blocked during the test run.
:::info
-Tip
-
[icanhazip.com](http://icanhazip.com/) is a free, hosted service to find a
system's current external IP address.
:::
-```jsx
+```jsx title='cypress/support/commands.js'
Cypress.Commands.add('loginByAuth0Api', (username, password) => {
// Useful when rate limited by Auth0
cy.exec('curl -4 icanhazip.com')
diff --git a/docs/guides/end-to-end-testing/testing-strategies/azure-active-directory-authentication.mdx b/docs/app/guides/authentication-testing/azure-active-directory-authentication.mdx
similarity index 86%
rename from docs/guides/end-to-end-testing/testing-strategies/azure-active-directory-authentication.mdx
rename to docs/app/guides/authentication-testing/azure-active-directory-authentication.mdx
index d75f82f5ec..6ce292b25a 100644
--- a/docs/guides/end-to-end-testing/testing-strategies/azure-active-directory-authentication.mdx
+++ b/docs/app/guides/authentication-testing/azure-active-directory-authentication.mdx
@@ -1,20 +1,16 @@
---
title: Azure Active Directory Authentication
-slug: /guides/end-to-end-testing/azure-active-directory-authentication
---
:::info
-## What you'll learn
+##### What you'll learn
-- Log in to
- [Azure Active Directory](https://learn.microsoft.com/en-us/azure/active-directory/fundamentals/active-directory-whatis)
- through the UI with [`cy.origin()`](/api/commands/origin)
+- How to set up Cypress to test against an Azure Active Directory web app
+- How to authenticate with Azure Active Directory using `cy.origin()`
:::
-:::caution
-
This guide is designed for testing against a Single Page Application (SPA) that
uses
[Azure Active Directory](https://learn.microsoft.com/en-us/azure/active-directory/fundamentals/active-directory-whatis)
@@ -27,8 +23,6 @@ This guide can also serve as a foundation for testing other web apps with
Cypress that use Azure Active Directory services with other frameworks, such as
React, Angular, or Vue.
-:::
-
## Microsoft AAD Application Setup
For this guide, we are mainly going to focus on setting up Cypress to test
@@ -36,25 +30,25 @@ against an Azure Active Directory web app. Please clone the
[Microsoft Identity Javascript Tutorial](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/tree/c1956b658efa331bb5df11a0038ad32d12dad3ce/1-Authentication/1-sign-in)
and follow the steps to set up your application.
-Once set up, you will need to modify a few things in the `App/index.html` file:
+Once set up, you'll need to modify a few things in the `App/index.html` file:
- Remove any
[`integrity`](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
attributes inside `