How to set cookie from access_token for cypress ROPC flow.

[manoj-mukherjee-maersk]

• Tried puppeteer- getting cookie but when setting to login command. It is setting but after when trying to visit the page its redirecting to Azure AD login again with 401 error.

"cypress": "^9.5.4"

How can I set cookies (spilting) with crfToken ?

//cypress/plugins/azure-sso/index.js
const puppeteer = require("puppeteer");

module.exports = {
  async azureSingleSignOn(options = {}) {
    validateOptions(options);

    const browser = await puppeteer.launch({
      headless: !!options.headless,
    });

    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });

    await page.goto(options.loginUrl);

    await page.waitForNavigation();

    if (page.url().startsWith(options.loginUr)) {
      // already logged in
      const cookies = await getCookies({ page, options });

      await finalizeSession({ page, browser, options });

      return {
        cookies,
      };
    }

    await typeUsername({ page, options });
    await typePassword({ page, options });
    await staySignedIn({ page, options });

    const cookies = await getCookies({ page, options });

    await finalizeSession({ page, browser, options });

    return {
      cookies,
    };
  },
};

function validateOptions(options) {
  if (!options.username || !options.password) {
    throw new Error("Username or Password missing for login");
  }
  if (!options.loginUrl) {
    throw new Error("Login Url missing");
  }
  if (!options.postLoginSelector) {
    throw new Error("Post login selector missing");
  }
}

async function typeUsername({ page, options } = {}) {
  await page.waitForSelector("input[name=loginfmt]:not(.moveOffScreen)", {
    visible: true,
    delay: 10000,
  });
  await page.type("input[name=loginfmt]", options.username, { delay: 50 });
  await page.click("input[type=submit]");
}

async function typePassword({ page, options } = {}) {
  await page.waitForSelector(
    "input[name=Password]:not(.moveOffScreen),input[name=passwd]:not(.moveOffScreen)",
    { visible: true, delay: 10000 }
  );

  await page.type("input[name=passwd]", options.password, { delay: 50 });
  await page.click("input[type=submit]");
}

async function staySignedIn({ page, options } = {}) {
  try {
    await page.waitForSelector('[value="No"]', { timeout: 5000 });
    page.click('[value="No"]');
  } catch (error) {
    true;
  }
}

async function getCookies({ page, options } = {}) {
  await page.waitForSelector(options.postLoginSelector, { visible: true, delay: 10000 });

  const cookies = options.getAllBrowserCookies
    ? await getCookiesForAllDomains(page)
    : await page.cookies(options.loginUrl);

  if (options.logs) {
    console.log(cookies);
  }

  return cookies;
}

async function getCookiesForAllDomains(page) {
  const cookies = await page._client.send("Network.getAllCookies", {});
  return cookies.cookies;
}

async function finalizeSession({ page, browser, options } = {}) {
   await browser.close();
}

//cypress/support/commands.js

// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

Cypress.Commands.add("loginAzAD", function () {
  cy.clearCookies();
  cy.clearLocalStorage();
  const loginUrl = Cypress.env("SITE_NAME");
  const cookieName = Cypress.env("COOKIE_NAME");
  // Load user credentials from the environment
  let userCredentials = {
    username: Cypress.env("USERNAME"),
    password: Cypress.env("PASSWORD"),
  };

  const { username, password } = userCredentials;

  // If they're not passed in there, use the ones from the env config
  if (!username || !password) {
    const userCredentialsEnv = Cypress.env("USER_CREDENTIALS");
    userCredentials = {
      username: userCredentialsEnv.USERNAME,
      password: userCredentialsEnv.PASSWORD,
    };
  }
  const options = {
    username: userCredentials?.username,
    password: userCredentials?.password,
    loginUrl: loginUrl,
    headless: false,
    logs: false,
    postLoginSelector: "[data-cy=appHeader]",
  };

  cy.task("azureSingleSignOn", options, { timeout: 200000 }).then(({ cookies }) => {
    cookies.forEach((cookie) => {
      if (cookie) {
        cy.setCookie(cookie.name, cookie.value, {
          domain: cookie.domain,
          expiry: cookie.expires,
          httpOnly: cookie.httpOnly,
          path: cookie.path,
          secure: false,
          sameSite: "lax",
        });
        Cypress.Cookies.defaults({ preserve: cookieName });
      }
    });
    cy.setLocalStorage(
      "nextauth.message",
      JSON.stringify({
        event: "session",
        data: { trigger: "getSession" },
        timestamp: new Date().getTime(),
      })
    );
    return;
  });
});

// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
import "cypress-localstorage-commands";
// Import commands.js using ES2015 syntax:
import "./commands";

// Alternatively you can use CommonJS syntax:
// require('./commands')

[manoj-mukherjee-maersk]

@yisu-kim can you please help me. cypress-io/cypress#1342 (comment)

[yisu-kim]

Hello, I am sorry to tell you this, but I've never used Cypress before. Also, I've been using NextAuth for only a few weeks.
It might be helpful if you look at the documentations(cookies or Custom Client Session Handling).
Sorry, I can't be of more help. I hope your problem will be solved soon.

[manoj-mukherjee-maersk]

Actually I got you name in Cypress tutorial in next-auth. I am getting cookies but after setting its automatically remove by cypress.

[manoj-mukherjee-maersk]

FYI: puppeteer.connect method able to solve this issue. More info https://gist.github.com/rahulpnath/4362ff2226ea36e056784f92c0d64434?permalink_comment_id=4145176#gistcomment-4145176