Authenticating via Third Party Providers with Cypress Social Login Plugin

Cypress Social Login Plugin is used to facilitate the third-party logins for services such as GitHub, Facebook etc.

It does so by delegating the login process to a puppeteer flow that performs the login and returns the cookies for the application under test, so they can be set by the calling Cypress flow for the duration of the test.

Lets look at how we can use this plugin with an example.

Plugin Reference :- https://github.com/lirantal/cypress-social-logins

1. Get the Plugin Installed for your cypress project

npm install --save-dev cypress-social-logins

Installing the plugin would take some time as it needs to install chromium browser and puppeter inside your project.

2. Import the cypress-social-logins plugin definition for the specific social network login you are interested of, and declare a task that performs the login. This can be done by declaring the task as below inside your cypress/plugins/index.js file

const { GoogleSocialLogin, GitHubSocialLogin } = require(‘cypress-social-logins’).plugins
/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
on(‘task’, {
GoogleSocialLogin: GoogleSocialLogin,
GitHubSocialLogin: GitHubSocialLogin
})
}

3. Add a custom command to call the declared task with a set of options for the social login flow interaction. Set the cookies for the test flow with the help of Cypress.Cookies.defaults. Sample command for authenticating via Google is shown below. This command should be added in your Cypress/Support/Commands.js file.

Cypress.Commands.add(‘userLoginWithGmail’, () => {
const socialLoginOptions = {
username: ‘test@gmail.com’,
password: ‘test@1234’,
loginUrl: ‘https://mysample.app.com/login',
headless: false,
logs: true,
loginSelector: ‘button[type=”button”][data-testid=”login-page-sign-in-with-google”]’,
postLoginSelector: “[data-testid=side-panel-items-applications]”,
popupDelay: 3000,
cookieDelay: 2000,
args: [‘ — disable-web-security’, ‘ — user-data-dir’, ‘ — allow-running-insecure-content’],
isPopup: true,
getAllBrowserCookies: true
}
cy.task(‘GoogleSocialLogin’, socialLoginOptions).then(({ cookies, lsd, ssd }) => {
cookies.map((cookie) => {
cy.setCookie(cookie.name, cookie.value, {
domain: cookie.domain,
expiry: cookie.expires,
httpOnly: cookie.httpOnly,
path: cookie.path,
secure: cookie.secure
})
Cypress.Cookies.defaults({
preserve: cookie.name
})
})
cy.window().then(window => {
Object.keys(ssd).forEach(key => window.sessionStorage.setItem(key, ssd[key]))
Object.keys(lsd).forEach(key => window.localStorage.setItem(key, lsd[key]))
})
cy.log(‘login successful.’)
cy.visit(‘/’);
})
})

4. Now you can implement your test spec file with a describe function to call for the custom command defined in step 3.

describe(“1.1- Sign in with Google”,
function () {
it(“1.1.1- Sign in with Google Sample Test”, () => {
cy.userLoginWithGmail();
});
});

Some of the important parameters that you need to be aware of related to the above implementation are listed below.

username = Email address for the Google account that you need to authenticate
password = Password for the Google account that you need to authenticate
loginUrl = The URL for the login page that includes the social network buttons
args = String array which allows providing further arguments to puppeteer
headless = Whether to run puppeteer in headless mode or not
loginSelector = A selector on the page that defines the specific social network to use and can be clicked, such as a button or a link
postLoginSelector = A selector on the post-login page that can be asserted upon to confirm a successful login
getAllBrowserCookies = Whether to get all browser cookies instead of just ones with the domain of loginUrl
isPopup = Boolean, is your google auth displayed like a popup
popupDelay = number, delay a specific milliseconds before popup is shown. Pass a falsy (false, 0, null, undefined, ‘’) to avoid completely
cookieDelay = number, delay a specific milliseconds before get a cookies. Pass a falsy (false, 0, null,undefined,’’) to avoid completely

Support of the Plugin with Third Party Authenticators

GoogleSocialLogin > Not Supported as per Googles new policy updates. Reference [2] [3]

GitHubSocialLogin > Supported

MicrosoftSocialLogin> Supported

AmazonSocialLogin >Supported

FacebookSocialLogin>Supported

Major Drawbacks of the Plugin

This plugin doesn’t work well in a Continuous Integration (CI) environment, due to the anti-fraud detection mechanisms followed by the likes of Google, GitHub etc. If you attempt to login from a CI machine which has different IPs, geolocation and other fingerprint identification which the account you use isn’t normally attempting a login from, then this will trigger Multi Factor Authentication, CAPTCHA, or other means of confirming the identity. When those extra steps are needed, this plugin doesn’t work well around them.

References

[1]. https://github.com/lirantal/cypress-social-logins

[2]. https://github.com/lirantal/cypress-social-logins/issues/71#issuecomment-839047895

[3]. https://github.com/lirantal/cypress-social-logins/issues/99