Load testing a React single-page application that uses auth0-react

Get Help
,
1

I’ve looked at other load-testing related threads here but I haven’t found one that matches my case.

I have a React SPA application that uses auth0-react. I would like to perform browser-based load tests using a framework like Playwright.

In certain scenarios, I can use a mock like mock-oauth2-server to handle authentication. That isn’t a problem.

I would also like to load test some environments where using the mock oauth2 server is not an option, and we have to go through the actual Auth0 service. But I don’t want to perform the full login flow for each browser. I’m not sure how to avoid that.

One possiblity would be to get an access token using the Client Credentials Flow (instead of the Authorization Code Flow) before starting the load test, and somehow inject it in each browser that is spawned during the load test.

My question is: is there a way to make auth0-react to use this preexisting access token, or should I include some conditional logic in my SPA to behave differently when it detects the “injected” token?

3

Hi @danidiaz.art

Welcome to the Auth0 Community!

Regarding your implementation for load-testing, using the Client Credentials Flow would not be recommended since it covers Machine-to-Machine applications and not actual user authentication.

My suggestion would be to use the Resource Owner Password Flow in order to retrieve the tokens of the user an basically initiate an SSO session for your application. You would need to first enable the Password grant for your application within the Auth0 Dashboard. This can be found under Applications → Applications → Your_Application → Advanced Settings → Grants → Password. The request would look something like:

const response = await fetch(`https://${AUTH0_DOMAIN}/oauth/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        grant_type: 'password',
        username: 'testuser@example.com', 
        password: 'TEST_USER_PASSWORD',   
        client_id: AUTH0_CLIENT_ID,
        client_secret: AUTH0_CLIENT-SECRET
        scope: 'openid profile email offline_access',
      }),
    });

Once you have extracted the id_token from the response, you should be able to add it to an /authorize call as a hint in order to create the Auth0 session and then redirect to your page. The /authorize call would look like this:

https://nik-sp.us.auth0.com/authorize?response_type=token&client_id={{CLIENT_ID}}
&redirect_uri={{APPLICATION_URL}}&prompt=none
&id_token_hint={{USER_ID_TOKEN}}

Once you navigate to your page, it should be an authenticated page and able to test any protected API routes or other functionalities.

Let me know if the suggestion above is useful regarding the matter or if you have any other questions.

Kind Regards,
Nik