add auth0 provider and simulation

examples/backstage/.eslintrc.js

@@ -1,3 +1,4 @@
 module.exports = {
   root: true,
+  extends: '../../',
 };

examples/backstage/.gitignore

@@ -37,3 +37,5 @@ site
 
 # Sensitive credentials
 *-credentials.yaml
+./cypress/videos
+./cypress/screenshots

examples/backstage/app-config.yaml

@@ -51,7 +51,12 @@ techdocs:
 
 auth:
   # see https://backstage.io/docs/auth/ to learn about auth providers
-  providers: {}
+  providers:
+    auth0:
+      development:
+        clientId: YOUR_AUTH0_CLIENT_ID
+        clientSecret: YOUR_AUTH0_CLIENT_SECRET
+        domain: localhost:4400
 
 scaffolder:
   github:

examples/backstage/package.json

@@ -6,7 +6,8 @@
     "node": "14 || 16"
   },
   "scripts": {
-    "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
+    "dev": "concurrently \"yarn sim\" \"yarn start\" \"yarn start-backend\"",
+    "sim": "yarn workspace app sim",
     "start": "yarn workspace app start",
     "start-backend": "yarn workspace backend start",
     "build": "lerna run build",
@@ -16,6 +17,7 @@
     "clean": "backstage-cli clean && lerna run clean",
     "diff": "lerna run diff --",
     "test": "lerna run test --since origin/master -- --coverage",
+    "test:e2e": "concurrently \"yarn dev\" \"yarn workspace app cy:run\"",
     "test:all": "lerna run test -- --coverage",
     "lint": "lerna run lint --since origin/master --",
     "lint:all": "lerna run lint --",

examples/backstage/packages/app/cypress.env.json

@@ -0,0 +1,7 @@
+{
+  "audience": "https://thefrontside.auth0.com/api/v1/",
+  "domain": "localhost:4400",
+  "clientId": "YOUR_AUTH0_CLIENT_ID",
+  "connection": "Username-Password-Authentication",
+  "scope": "openid profile email offline_access"
+}

examples/backstage/packages/app/cypress.json

@@ -1,5 +1,7 @@
 {
-  "baseUrl": "http://localhost:3001",
+  "baseUrl": "http://localhost:3000",
   "fixturesFolder": false,
-  "pluginsFile": false
+  "pluginsFile": false,
+  "chromeWebSecurity": false,
+  "defaultCommandTimeout": 20000
 }

examples/backstage/packages/app/cypress/.gitignore

@@ -0,0 +1,2 @@
+videos
+screenshots

examples/backstage/packages/app/cypress/integration/auth0.spec.js

@@ -0,0 +1,17 @@
+import { Button } from '@interactors/with-cypress';
+import config from '../../cypress.env.json';
+
+describe('log in', () => {
+  beforeEach(() => {
+    cy.logout();
+  });
+
+  it('should get token without signing in', () => {
+    cy.createSimulation(config)
+      .visit('/')
+      .given({ email: '[email protected]', password: 'passw0rd' })
+      .login()
+      .visit('/')
+      .contains('Log out');
+  });
+});

examples/backstage/packages/app/cypress/support/index.js

@@ -0,0 +1 @@
+import '@simulacrum/auth0-cypress';

examples/backstage/packages/app/package.json

@@ -33,6 +33,9 @@
     "react-use": "^15.3.3"
   },
   "devDependencies": {
+    "@interactors/with-cypress": "^0.1.2",
+    "@simulacrum/auth0-cypress": "../../integrations/cypress",
+    "@simulacrum/auth0-simulator": "../../packages/auth0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^10.4.1",
     "@testing-library/user-event": "^12.0.7",
@@ -45,13 +48,14 @@
     "start-server-and-test": "^1.10.11"
   },
   "scripts": {
+    "sim": "export PORT=4000 && auth0-simulator",
     "start": "backstage-cli app:serve",
     "build": "backstage-cli app:build",
     "test": "backstage-cli test",
     "lint": "backstage-cli lint",
     "clean": "backstage-cli clean",
-    "test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev",
-    "test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run",
+    "test:e2e": "start-server-and-test start http://localhost:3000 cy:dev",
+    "test:e2e:ci": "start-server-and-test start http://localhost:3000 cy:run",
     "cy:dev": "cypress open",
     "cy:run": "cypress run"
   },

examples/backstage/packages/app/src/App.tsx

@@ -25,11 +25,29 @@ import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
 import { Root } from './components/Root';
 
-import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
+import {
+  AlertDisplay,
+  OAuthRequestDialog,
+  SignInPage,
+  SignInProviderConfig,
+} from '@backstage/core-components';
 import { createApp, FlatRoutes } from '@backstage/core-app-api';
+import { auth0AuthApiRef } from '@backstage/core-plugin-api';
+
+const githubProvider: SignInProviderConfig = {
+  id: 'auth0-auth-provider',
+  title: 'Auth0',
+  message: 'Sign in using Auth0',
+  apiRef: auth0AuthApiRef,
+};
 
 const app = createApp({
   apis,
+  components: {
+    SignInPage: props => (
+      <SignInPage {...props} auto provider={githubProvider} />
+    ),
+  },
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,