From 87626aeb148a36ca7cb9571a8590ef3f1a3280c2 Mon Sep 17 00:00:00 2001 From: Eric LaForce Date: Thu, 3 Feb 2022 12:17:07 -0500 Subject: [PATCH 1/4] feat(web): working to remove the need for separate game clients work in progress --- .../haste-game-client/src/game/hasteGame.ts | 4 +- .../haste-game-client/src/scenes/bootScene.ts | 12 ++-- .../haste-game-client/webpack.development.js | 1 + packages/web/src/api/hasteClient.ts | 72 ++++++++----------- 4 files changed, 37 insertions(+), 52 deletions(-) diff --git a/packages/haste-game-client/src/game/hasteGame.ts b/packages/haste-game-client/src/game/hasteGame.ts index abedd66..ab0581e 100644 --- a/packages/haste-game-client/src/game/hasteGame.ts +++ b/packages/haste-game-client/src/game/hasteGame.ts @@ -18,9 +18,9 @@ export class HasteGame extends Phaser.Game { // and server, a JWT from the haste game is leveraged. This JWT will // contain the necessary information necessary to validate the client // to the server, and contain the player id from the user metadata - async setupSocket(hasteClient: HasteClient) { + setupSocket(hasteClient: HasteClient) { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - const details = await hasteClient.getTokenDetails(); + const details = hasteClient.getTokenDetails(); const serverUrl = `${process.env.SERVER_PROTOCOL}://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`; this.socketManager = new SocketManager(serverUrl, details.token); diff --git a/packages/haste-game-client/src/scenes/bootScene.ts b/packages/haste-game-client/src/scenes/bootScene.ts index baf133f..64e8a2c 100644 --- a/packages/haste-game-client/src/scenes/bootScene.ts +++ b/packages/haste-game-client/src/scenes/bootScene.ts @@ -30,17 +30,17 @@ export class BootScene extends Phaser.Scene { this.hasteClient.login(); } - async init(): Promise { - this.hasteClient = HasteClient.build(process.env.HASTE_GAME_CLIENT_ID, process.env.AUTH_URL, process.env.LOGIN_URL); - const details = await this.hasteClient.getTokenDetails(); - await this.handleLoggedInUser(details); + init(): void { + this.hasteClient = HasteClient.build(process.env.AUTH_URL, process.env.LOGIN_URL, process.env.HASTE_GAME_CLIENT_ID); + const details = this.hasteClient.getTokenDetails(); + this.handleLoggedInUser(details); } - async handleLoggedInUser(hasteAuth: HasteAuthentication) { + handleLoggedInUser(hasteAuth: HasteAuthentication) { this.isAuthenticated = hasteAuth.isAuthenticated; if (hasteAuth.isAuthenticated) { const hasteGame = this.game as HasteGame; - await hasteGame.setupSocket(this.hasteClient); + hasteGame.setupSocket(this.hasteClient); hasteGame.socketManager.gameGetLevelsCompletedEvent.on((data: Leaderboard[]) => { hasteGame.leaderboards = data; diff --git a/packages/haste-game-client/webpack.development.js b/packages/haste-game-client/webpack.development.js index 0ee4408..6e1094a 100644 --- a/packages/haste-game-client/webpack.development.js +++ b/packages/haste-game-client/webpack.development.js @@ -33,6 +33,7 @@ if (fs.existsSync(path)) { }); }, host: '0.0.0.0', + disableHostCheck: true, }, plugins: [new DefinePlugin(envKeys)], }); diff --git a/packages/web/src/api/hasteClient.ts b/packages/web/src/api/hasteClient.ts index 3b8e556..3d83a1e 100644 --- a/packages/web/src/api/hasteClient.ts +++ b/packages/web/src/api/hasteClient.ts @@ -51,23 +51,18 @@ export class HasteClient { ); } - public async login() { - const hint = btoa(`${v4()};;;;;${window.location.href};;;;;${'signin'}`); - await this.auth0Client.loginWithRedirect({ - connection: 'Haste-Authorization', - login_hint: hint, - redirect_uri: window.location.href, - }); + public login() { + const hint = btoa(`${v4()};;;;;${window.location.href};;;;;${'gamelogin'}`); + window.location.href = `https://authclient.foundrium.hastearcade.com/landing?login_hint=${hint}`; } public logout() { localStorage.removeItem('haste:config'); - return this.auth0Client.logout({ - returnTo: window.location.origin, - }); + localStorage.removeItem('token'); + window.location.href = window.location.origin; } - public async getTokenDetails() { + public getTokenDetails() { try { const cachedToken = localStorage.getItem('haste:config'); @@ -77,47 +72,36 @@ export class HasteClient { // checks for and if it doesnt exist it will prevent users from playing // a speciifc game. This will ensure we can get all games upgraded to // the newest package with the new auth and all users get converted - await this.logout(); + this.logout(); } else { const query = window.location.search; - const shouldParseResult = query.includes('code=') && query.includes('state='); - - if (shouldParseResult) { - await this.auth0Client.handleRedirectCallback(); - } + const queryParams = new URLSearchParams(query); + const idToken = queryParams.get('idToken'); - const accessToken = await this.auth0Client.getTokenSilently(); - const idTokenClaims = await this.auth0Client.getIdTokenClaims(); - const idToken = idTokenClaims.__raw; + if (idToken) { + queryParams.delete('idToken'); + localStorage.setItem('token', idToken); + const plainUrl = window.location.href.split('?')[0]; + window.location.href = plainUrl; + } else { + const accessToken = localStorage.getItem('token'); - const decoded = jwtDecode(idToken); - if (accessToken) { - return { - token: idToken, - // eslint-disable-next-line dot-notation - picture: decoded['picture'], - displayName: decoded['https://hastearcade.com/displayName'], - isAuthenticated: true, - } as HasteAuthentication; + if (accessToken) { + const decoded = jwtDecode(accessToken); + return { + token: accessToken, + // eslint-disable-next-line dot-notation + picture: decoded['picture'], + displayName: decoded['https://hastearcade.com/displayName'], + isAuthenticated: true, + } as HasteAuthentication; + } } } // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (err: any) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - if (err.error === 'consent_required') { - const hint = btoa(`${v4()};;;;;${window.location.href};;;;;${'game'}`); - await this.auth0Client.loginWithRedirect({ - connection: 'Haste-Authorization', - login_hint: hint, - redirect_uri: window.location.href, - }); - } - - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - if (err.error !== 'login_required') { - // eslint-disable-next-line no-console - console.error(err); - } + // eslint-disable-next-line no-console + console.error(err); } return { From c4f4d58fade507a6967a3cbe62f041e4eff2e3fe Mon Sep 17 00:00:00 2001 From: Eric LaForce Date: Thu, 3 Feb 2022 21:18:18 -0500 Subject: [PATCH 2/4] feat(web): added new type of logout will need to remove hardcoded url --- packages/web/src/api/hasteClient.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/api/hasteClient.ts b/packages/web/src/api/hasteClient.ts index 3d83a1e..bce3b74 100644 --- a/packages/web/src/api/hasteClient.ts +++ b/packages/web/src/api/hasteClient.ts @@ -59,7 +59,7 @@ export class HasteClient { public logout() { localStorage.removeItem('haste:config'); localStorage.removeItem('token'); - window.location.href = window.location.origin; + window.location.href = `https://authclient.foundrium.hastearcade.com/logout?redirect_uri=${window.location.origin}`; } public getTokenDetails() { From 779fbbdd636abcaeb20803fb322bdf4a867f1428 Mon Sep 17 00:00:00 2001 From: Eric LaForce Date: Fri, 4 Feb 2022 07:00:52 -0500 Subject: [PATCH 3/4] feat(web): removing auth0 and hardcoded values --- package-lock.json | 94 ++--------------------------- packages/web/package.json | 1 - packages/web/src/api/hasteClient.ts | 30 +++------ 3 files changed, 11 insertions(+), 114 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ba6b81..2b5524c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,19 +19,6 @@ "node": "16.X" } }, - "node_modules/@auth0/auth0-spa-js": { - "version": "1.18.0", - "license": "MIT", - "dependencies": { - "abortcontroller-polyfill": "^1.7.3", - "browser-tabs-lock": "^1.2.14", - "core-js": "^3.16.3", - "es-cookie": "^1.3.2", - "fast-text-encoding": "^1.0.3", - "promise-polyfill": "^8.2.0", - "unfetch": "^4.2.0" - } - }, "node_modules/@babel/code-frame": { "version": "7.16.0", "dev": true, @@ -4211,10 +4198,6 @@ "dev": true, "license": "ISC" }, - "node_modules/abortcontroller-polyfill": { - "version": "1.7.3", - "license": "MIT" - }, "node_modules/accepts": { "version": "1.3.7", "license": "MIT", @@ -5207,14 +5190,6 @@ "dev": true, "license": "BSD-2-Clause" }, - "node_modules/browser-tabs-lock": { - "version": "1.2.15", - "hasInstallScript": true, - "license": "MIT", - "dependencies": { - "lodash": ">=4.17.21" - } - }, "node_modules/browserslist": { "version": "4.19.1", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", @@ -6270,15 +6245,6 @@ "node": ">=0.10.0" } }, - "node_modules/core-js": { - "version": "3.17.3", - "hasInstallScript": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/core-js-compat": { "version": "3.20.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.0.tgz", @@ -7454,10 +7420,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/es-cookie": { - "version": "1.3.2", - "license": "MIT" - }, "node_modules/es-module-lexer": { "version": "0.9.3", "dev": true, @@ -8634,10 +8596,6 @@ "dev": true, "license": "MIT" }, - "node_modules/fast-text-encoding": { - "version": "1.0.3", - "license": "Apache-2.0" - }, "node_modules/fastest-levenshtein": { "version": "1.0.12", "dev": true, @@ -13301,6 +13259,7 @@ }, "node_modules/lodash": { "version": "4.17.21", + "dev": true, "license": "MIT" }, "node_modules/lodash.camelcase": { @@ -19261,10 +19220,6 @@ "node": ">=0.4.0" } }, - "node_modules/promise-polyfill": { - "version": "8.2.0", - "license": "MIT" - }, "node_modules/promise.series": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz", @@ -23172,10 +23127,6 @@ "dev": true, "license": "MIT" }, - "node_modules/unfetch": { - "version": "4.2.0", - "license": "MIT" - }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -25138,10 +25089,9 @@ }, "packages/web": { "name": "@hastearcade/web", - "version": "2.0.6", + "version": "2.0.7-next.3", "license": "MIT", "dependencies": { - "@auth0/auth0-spa-js": "^1.18.0", "@hastearcade/models": "^1.3.0", "@types/axios": "^0.14.0", "@types/uuid": "^8.3.3", @@ -25180,18 +25130,6 @@ } }, "dependencies": { - "@auth0/auth0-spa-js": { - "version": "1.18.0", - "requires": { - "abortcontroller-polyfill": "^1.7.3", - "browser-tabs-lock": "^1.2.14", - "core-js": "^3.16.3", - "es-cookie": "^1.3.2", - "fast-text-encoding": "^1.0.3", - "promise-polyfill": "^8.2.0", - "unfetch": "^4.2.0" - } - }, "@babel/code-frame": { "version": "7.16.0", "dev": true, @@ -26772,7 +26710,6 @@ "@hastearcade/web": { "version": "file:packages/web", "requires": { - "@auth0/auth0-spa-js": "^1.18.0", "@hastearcade/models": "^1.3.0", "@semantic-release/git": "^9.0.0", "@types/axios": "^0.14.0", @@ -28275,9 +28212,6 @@ "version": "1.1.1", "dev": true }, - "abortcontroller-polyfill": { - "version": "1.7.3" - }, "accepts": { "version": "1.3.7", "requires": { @@ -28960,12 +28894,6 @@ "version": "1.0.0", "dev": true }, - "browser-tabs-lock": { - "version": "1.2.15", - "requires": { - "lodash": ">=4.17.21" - } - }, "browserslist": { "version": "4.19.1", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", @@ -29683,9 +29611,6 @@ "version": "0.1.1", "dev": true }, - "core-js": { - "version": "3.17.3" - }, "core-js-compat": { "version": "3.20.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.0.tgz", @@ -30456,9 +30381,6 @@ "unbox-primitive": "^1.0.1" } }, - "es-cookie": { - "version": "1.3.2" - }, "es-module-lexer": { "version": "0.9.3", "dev": true @@ -31227,9 +31149,6 @@ "version": "2.0.6", "dev": true }, - "fast-text-encoding": { - "version": "1.0.3" - }, "fastest-levenshtein": { "version": "1.0.12", "dev": true @@ -34269,7 +34188,8 @@ } }, "lodash": { - "version": "4.17.21" + "version": "4.17.21", + "dev": true }, "lodash.camelcase": { "version": "4.3.0", @@ -38351,9 +38271,6 @@ "version": "2.0.3", "dev": true }, - "promise-polyfill": { - "version": "8.2.0" - }, "promise.series": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz", @@ -41015,9 +40932,6 @@ } } }, - "unfetch": { - "version": "4.2.0" - }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", diff --git a/packages/web/package.json b/packages/web/package.json index 6ba6a1f..55d66cd 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -43,7 +43,6 @@ "payout" ], "dependencies": { - "@auth0/auth0-spa-js": "^1.18.0", "@hastearcade/models": "^1.3.0", "@types/axios": "^0.14.0", "@types/uuid": "^8.3.3", diff --git a/packages/web/src/api/hasteClient.ts b/packages/web/src/api/hasteClient.ts index bce3b74..5fe1e1a 100644 --- a/packages/web/src/api/hasteClient.ts +++ b/packages/web/src/api/hasteClient.ts @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ import { isBrowser } from '../util/environmentCheck'; -import { Auth0Client } from '@auth0/auth0-spa-js'; import { HasteClientConfiguration } from '../config/hasteClientConfiguration'; import jwtDecode, { JwtPayload } from 'jwt-decode'; import { v4 } from 'uuid'; @@ -13,17 +12,15 @@ export type HasteAuthentication = { }; export class HasteClient { - private auth0Client: Auth0Client; private configuration: HasteClientConfiguration; - private constructor(configuration: HasteClientConfiguration, auth0Client: Auth0Client) { + private constructor(configuration: HasteClientConfiguration) { this.configuration = configuration; - this.auth0Client = auth0Client; } public static build( domain = 'auth.hastearcade.com', - signinUrl = 'https://authclient.hastearcade.com/signin', + signinUrl = 'https://authclient.hastearcade.com', clientId = 'EUN4fvO6AJIjVImZxhPAw9ofpw9LrB7g', ) { if (!isBrowser()) @@ -31,35 +28,22 @@ export class HasteClient { `Haste client build can only be called from a browser based environment. If you are on running @hastearcade/web on a server, please use the server package.`, ); - const auth0 = new Auth0Client({ - audience: 'https://haste.api', + return new HasteClient({ domain: domain, - client_id: clientId, - scope: 'offline_access', - useRefreshTokens: true, - useCookiesForTransactions: true, - cacheLocation: 'localstorage', + clientId: clientId, + signinUrl: `${signinUrl}`, }); - - return new HasteClient( - { - domain: domain, - clientId: clientId, - signinUrl: signinUrl, - }, - auth0, - ); } public login() { const hint = btoa(`${v4()};;;;;${window.location.href};;;;;${'gamelogin'}`); - window.location.href = `https://authclient.foundrium.hastearcade.com/landing?login_hint=${hint}`; + window.location.href = `${this.configuration.signinUrl}/landing?login_hint=${hint}`; } public logout() { localStorage.removeItem('haste:config'); localStorage.removeItem('token'); - window.location.href = `https://authclient.foundrium.hastearcade.com/logout?redirect_uri=${window.location.origin}`; + window.location.href = `${this.configuration.signinUrl}/logout?redirect_uri=${window.location.origin}`; } public getTokenDetails() { From a675e13abaaab9071615d3111173875a34809b76 Mon Sep 17 00:00:00 2001 From: Eric LaForce Date: Fri, 4 Feb 2022 08:25:25 -0500 Subject: [PATCH 4/4] refactor(web): removed domain and client id since the web client no longer uses auth0, the domain and client id are irrelevant and handled by authclient --- packages/haste-game-client/src/scenes/bootScene.ts | 2 +- packages/web/src/api/hasteClient.ts | 8 +------- packages/web/src/config/hasteClientConfiguration.ts | 6 +----- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/haste-game-client/src/scenes/bootScene.ts b/packages/haste-game-client/src/scenes/bootScene.ts index 64e8a2c..879ebdf 100644 --- a/packages/haste-game-client/src/scenes/bootScene.ts +++ b/packages/haste-game-client/src/scenes/bootScene.ts @@ -31,7 +31,7 @@ export class BootScene extends Phaser.Scene { } init(): void { - this.hasteClient = HasteClient.build(process.env.AUTH_URL, process.env.LOGIN_URL, process.env.HASTE_GAME_CLIENT_ID); + this.hasteClient = HasteClient.build(process.env.LOGIN_URL); const details = this.hasteClient.getTokenDetails(); this.handleLoggedInUser(details); } diff --git a/packages/web/src/api/hasteClient.ts b/packages/web/src/api/hasteClient.ts index 5fe1e1a..95f17f7 100644 --- a/packages/web/src/api/hasteClient.ts +++ b/packages/web/src/api/hasteClient.ts @@ -18,19 +18,13 @@ export class HasteClient { this.configuration = configuration; } - public static build( - domain = 'auth.hastearcade.com', - signinUrl = 'https://authclient.hastearcade.com', - clientId = 'EUN4fvO6AJIjVImZxhPAw9ofpw9LrB7g', - ) { + public static build(signinUrl = 'https://authclient.hastearcade.com') { if (!isBrowser()) throw new Error( `Haste client build can only be called from a browser based environment. If you are on running @hastearcade/web on a server, please use the server package.`, ); return new HasteClient({ - domain: domain, - clientId: clientId, signinUrl: `${signinUrl}`, }); } diff --git a/packages/web/src/config/hasteClientConfiguration.ts b/packages/web/src/config/hasteClientConfiguration.ts index 65cbc01..2078f00 100644 --- a/packages/web/src/config/hasteClientConfiguration.ts +++ b/packages/web/src/config/hasteClientConfiguration.ts @@ -1,11 +1,7 @@ export class HasteClientConfiguration { - domain: string; - clientId: string; signinUrl: string; - constructor(clientId: string, domain = 'auth.hastearcade.com', signinUrl: 'https://app.hastearcade.com/signin') { - this.clientId = clientId; - this.domain = domain; + constructor(signinUrl: 'https://authclient.hastearcade.com') { this.signinUrl = signinUrl; } }