Add authentication

apps/builder/cypress/plugins/index.ts

@@ -0,0 +1,20 @@
+import {
+  GitHubSocialLogin,
+  FacebookSocialLogin,
+  GoogleSocialLogin,
+} from 'cypress-social-logins/src/Plugins'
+/// <reference types="cypress" />
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+
+const handler = (on: any) => {
+  on('task', {
+    GoogleSocialLogin: GoogleSocialLogin,
+    FacebookSocialLogin: FacebookSocialLogin,
+    GitHubSocialLogin: GitHubSocialLogin,
+  })
+}
+
+export default handler

apps/builder/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+// ***********************************************
+// 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) => { ... })
+import '@testing-library/cypress/add-commands'
+
+Cypress.Commands.add('logOutByApi', () =>
+  cy
+    .request('GET', `${Cypress.env('SITE_NAME')}/api/auth/csrf/login`)
+    .its('body')
+    .then((result) => {
+      cy.request('POST', `${Cypress.env('SITE_NAME')}/api/auth/signout`, {
+        csrfToken: result.csrfToken,
+      })
+    })
+)

apps/builder/cypress/support/index.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+// ***********************************************************
+// 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 commands.js using ES2015 syntax:
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Log out using the NextAuth API.
+       * @example cy.logOutByApi()
+       */
+      logOutByApi(): Chainable<Response<any>>
+    }
+  }
+}
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

apps/builder/cypress/tests/auth.ts

@@ -0,0 +1,103 @@
+describe('SignIn page', () => {
+  beforeEach(() => {
+    cy.logOutByApi()
+  })
+  it('can continue with Google', () => {
+    cy.visit('/signin')
+    const username = Cypress.env('GOOGLE_USER')
+    const password = Cypress.env('GOOGLE_PW')
+    const loginUrl = Cypress.env('SITE_NAME')
+    const cookieName = Cypress.env('COOKIE_NAME')
+    exectueSocialLogin(
+      'GoogleSocialLogin',
+      username,
+      password,
+      loginUrl,
+      cookieName
+    )
+  })
+
+  it('can continue with GitHub', () => {
+    cy.visit('/signin')
+    const username = Cypress.env('GITHUB_USER')
+    const password = Cypress.env('GITHUB_PW')
+    const loginUrl = Cypress.env('SITE_NAME')
+    const cookieName = Cypress.env('COOKIE_NAME')
+    exectueSocialLogin(
+      'GitHubSocialLogin',
+      username,
+      password,
+      loginUrl,
+      cookieName
+    )
+  })
+
+  it('can continue with Facebook', () => {
+    cy.visit('/signin')
+    const username = Cypress.env('FACEBOOK_USER')
+    const password = Cypress.env('FACEBOOK_PW')
+    const loginUrl = Cypress.env('SITE_NAME')
+    const cookieName = Cypress.env('COOKIE_NAME')
+    exectueSocialLogin(
+      'FacebookSocialLogin',
+      username,
+      password,
+      loginUrl,
+      cookieName,
+      [
+        'button[data-testid="cookie-policy-dialog-manage-button"]',
+        'button[data-testid="cookie-policy-manage-dialog-accept-button"]',
+      ]
+    )
+  })
+
+  // We don't test email sign in because disabling email sending is not straightforward
+})
+
+const exectueSocialLogin = (
+  task: 'FacebookSocialLogin' | 'GoogleSocialLogin' | 'GitHubSocialLogin',
+  username: string,
+  password: string,
+  loginUrl: string,
+  cookieName: string,
+  trackingConsentSelectors?: string[]
+) => {
+  const selectorId =
+    task === 'FacebookSocialLogin'
+      ? 'facebook'
+      : task === 'GoogleSocialLogin'
+      ? 'google'
+      : 'github'
+  const socialLoginOptions = {
+    username,
+    password,
+    loginUrl,
+    headless: true,
+    logs: true,
+    isPopup: false,
+    loginSelector: `[data-testid="${selectorId}"]`,
+    postLoginSelector: `[data-testid="authenticated"]`,
+    trackingConsentSelectors,
+  }
+
+  cy.task(task, socialLoginOptions).then(({ cookies }: any) => {
+    const cookie = cookies
+      .filter((cookie: any) => cookie.name === cookieName)
+      .pop()
+    if (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: cookieName,
+      })
+    }
+    cy.visit('/typebots')
+    cy.findByText(`Hello ${username}`).should('exist')
+  })
+}

apps/builder/cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "types": ["cypress", "@testing-library/cypress"],
+    "lib": ["es2015", "dom"],
+    "target": "es5",
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true
+  }
+}