Cannot get Cypress test to work in React with Okta

I am trying to test my React (v16.10.2) application with Cypress (v4.5.0). Our application is using Okta for authentication (with the client @okta/okta-react 1.3.1).

I can use my app from the browser without any issues. The first time I login, I get the Okta login screen. I enter my user ID and password, and the react client calls the authn endpoint with my creds, and then calls the authorization endpoint to get the token. I am then taken to the first screen of our application.

When I try to login in my Cypress test, my user ID and password are entered into the login screen, the authn endpoint is called successfully, but the authorization endpoint returns a 403 error. Unfortunately, there is no other info about why I am getting the 403.

I have compared the authorization requests between the one that works in the browser, and the one that doesn’t work from Cypress. The only real difference I see is that the working browser request has an origin header, whereas the failing one does not.

Question #1: Could the missing origin header be the cause of my problem?

In order to avoid a bunch of CORS and cross-site issues, I had to install a couple Chrome extensions (ignore-x-frame-headers and Access-Control-Allow-Origin-master). I am implementing them in the following code in cypress/plugins/index.js:

module.exports = (on, config) => {
    on('before:browser:launch', (browser = {}, launchOptions) => {
        // The following code comes from https://medium.com/@you54f/configuring-cypress-to-work-with-iframes-cross-origin-sites-afff5efcf61f
        // We were getting cross-origin errors when trying to run the tests.
        if (browser.name === 'chrome') {
            const ignoreXFrameHeadersExtension = path.join(__dirname, '../extensions/ignore-x-frame-headers');
            launchOptions.args.push(`--load-extension=${ignoreXFrameHeadersExtension}`);
            const accessControlAllowOriginMasterExtension = path.join(__dirname, '../extensions/Access-Control-Allow-Origin-master');
            launchOptions.args.push(`--load-extension=${accessControlAllowOriginMasterExtension}`);
            launchOptions.args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
            launchOptions.args.push('--disable-site-isolation-trials');
            launchOptions.args.push('--reduce-security-for-testing');
            launchOptions.args.push('--out-of-blink-cors');
        }
        if (browser.name === 'electron') {
            launchOptions.preferences.webPreferences.webSecurity = false;
        }
        return launchOptions;
    });

I also added the following to cypress.json:

{
  "chromeWebSecurity": false
}

Here is my cypress test:

describe('Order Lookup Test', () => {
    const UI_URL: string = 'http://localhost:3000/';
    const ORDER_NUMBER: string = '10307906234';
    beforeEach(() => {
        Cypress.config('requestTimeout', 50000);
        cy.visit(UI_URL);
        cy.get('#okta-signin-username', {timeout: 10000}).type('xxxxxxxx');
        cy.get('#okta-signin-password', {timeout: 10000}).type('xxxxxxxx');
        cy.get('#okta-signin-submit', {timeout: 10000}).click();
    })
    it('should return an order', () => {
        cy.get('.number-input', {timeout: 10000}).type(ORDER_NUMBER);
        cy.get('.order-lookup-buttons-search-valid').should('be.visible').click();
    })
})

Does anyone have any idea what might be going on? What other information should I be including in order to help narrow this down?

I’m not sure about Cypress, but I do have a Protractor test that works to log in to Okta.

The main logic is in login.po.ts. You can see how it’s used in edit.e2e-spec.ts.

It certainly looks like the missing origin header is the reason for your test failure.
The reason being that the request from your application (http//localhost:3000) to your okta org is a cross domain request which triggers the CORS mechanism in the browser.
If the request doesn’t include the origin header, you’re not allowed to access the resource on your okta org.
You’ll have to find a way to include the origin header in your request.

Edit: Have you seen this thread? https://github.com/cypress-io/cypress/issues/4416
This also looks helpful - https://gist.github.com/ndavis/2c84ab40aaa3c98c3a8062bdb3938232

Thanks for the info!