diff --git a/k8s/cloud/base/ory_auth/oauth_config.yaml b/k8s/cloud/base/ory_auth/oauth_config.yaml index e1570889eef..604b73e3e87 100644 --- a/k8s/cloud/base/ory_auth/oauth_config.yaml +++ b/k8s/cloud/base/ory_auth/oauth_config.yaml @@ -7,3 +7,4 @@ data: PL_OAUTH_PROVIDER: hydra PL_AUTH_URI: oauth/hydra/oauth2/auth PL_AUTH_CLIENT_ID: auth-code-client + PL_AUTH_EMAIL_PASSWORD_CONN: "" diff --git a/k8s/cloud_deps/public/configs.yaml b/k8s/cloud_deps/public/configs.yaml index 5cf10f90cd9..113bb7d936b 100644 --- a/k8s/cloud_deps/public/configs.yaml +++ b/k8s/cloud_deps/public/configs.yaml @@ -27,6 +27,7 @@ data: PL_OAUTH_PROVIDER: hydra PL_AUTH_URI: oauth/hydra/oauth2/auth PL_AUTH_CLIENT_ID: auth-code-client + PL_AUTH_EMAIL_PASSWORD_CONN: "" --- apiVersion: v1 kind: ConfigMap diff --git a/src/cloud/proxy/nginx.conf b/src/cloud/proxy/nginx.conf index d5e7a90f398..a11e951f25d 100644 --- a/src/cloud/proxy/nginx.conf +++ b/src/cloud/proxy/nginx.conf @@ -4,6 +4,7 @@ env PL_OAUTH_PROVIDER; env PL_AUTH_URI; env PL_AUTH_CLIENT_ID; +env PL_AUTH_EMAIL_PASSWORD_CONN; env PL_LD_CLIENT_ID; env PL_DOMAIN_NAME; env PL_API_SERVICE_HTTP; diff --git a/src/cloud/proxy/pixie_filter.conf b/src/cloud/proxy/pixie_filter.conf index 87b1373b2eb..f5fe42edf76 100644 --- a/src/cloud/proxy/pixie_filter.conf +++ b/src/cloud/proxy/pixie_filter.conf @@ -3,6 +3,7 @@ sub_filter_types application/javascript; sub_filter '__CONFIG_OAUTH_PROVIDER__' "'${oauth_provider}'"; sub_filter '__CONFIG_AUTH_URI__' "'${auth_uri}'"; sub_filter '__CONFIG_AUTH_CLIENT_ID__' "'${auth_client_id}'"; +sub_filter '__CONFIG_AUTH_EMAIL_PASSWORD_CONN__' "'${auth_email_password_conn}'"; sub_filter '__CONFIG_DOMAIN_NAME__' "'${domain_name}'"; sub_filter '__SEGMENT_UI_WRITE_KEY__' "'${segment_ui_write_key}'"; sub_filter '__SEGMENT_ANALYTICS_JS_DOMAIN__' "'segment.${domain_name}'"; diff --git a/src/cloud/proxy/pixie_vars.conf b/src/cloud/proxy/pixie_vars.conf index 59b69badd05..969dcb9989b 100644 --- a/src/cloud/proxy/pixie_vars.conf +++ b/src/cloud/proxy/pixie_vars.conf @@ -4,6 +4,7 @@ set_by_lua_block $oauth_provider { return os.getenv("PL_OAUTH_PROVIDER") } set_by_lua_block $auth_uri { return os.getenv("PL_AUTH_URI") } set_by_lua_block $auth_client_id { return os.getenv("PL_AUTH_CLIENT_ID") } +set_by_lua_block $auth_email_password_conn { return os.getenv("PL_AUTH_EMAIL_PASSWORD_CONN") } set_by_lua_block $domain_name { return os.getenv("PL_DOMAIN_NAME") } set_by_lua_block $api_service { return os.getenv("PL_API_SERVICE_HTTP") } set_by_lua_block $segment_ui_write_key { return os.getenv("PL_SEGMENT_UI_WRITE_KEY") } diff --git a/src/ui/src/components/auth/auth-box.tsx b/src/ui/src/components/auth/auth-box.tsx index 98a0002c2ab..42b0969ddaa 100644 --- a/src/ui/src/components/auth/auth-box.tsx +++ b/src/ui/src/components/auth/auth-box.tsx @@ -17,10 +17,10 @@ */ // This is the primary auth box, which has either the login or signin variant. -import * as React from 'react'; import { Button, Link, Typography } from '@mui/material'; import { Theme } from '@mui/material/styles'; import { createStyles, makeStyles } from '@mui/styles'; +import * as React from 'react'; import { PixienautBox } from './pixienaut-box'; const useStyles = makeStyles(({ spacing, palette }: Theme) => createStyles({ @@ -116,7 +116,7 @@ export const AuthBox: React.FC = React.memo(function AuthBox(props ) } - { children} + {children}
{buttonCaption} diff --git a/src/ui/src/containers/auth/auth0-buttons.tsx b/src/ui/src/containers/auth/auth0-buttons.tsx index 554c987fae8..60b249545ce 100644 --- a/src/ui/src/containers/auth/auth0-buttons.tsx +++ b/src/ui/src/containers/auth/auth0-buttons.tsx @@ -16,19 +16,33 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { GoogleButton, UsernamePasswordButton } from 'app/components'; import * as React from 'react'; -import { GoogleButton } from 'app/components'; export interface Auth0ButtonsProps { + enableEmailPassword: boolean; googleButtonText: string; onGoogleButtonClick: () => void; + emailPasswordButtonText: string; + onEmailPasswordButtonClick: () => void; } -export const Auth0Buttons: React.FC = ({ googleButtonText, onGoogleButtonClick }) => ( +// eslint-disable-next-line react-memo/require-memo +export const Auth0Buttons: React.FC = ({ + enableEmailPassword, + googleButtonText, + onGoogleButtonClick, + emailPasswordButtonText, + onEmailPasswordButtonClick, +}) => ( <> + {enableEmailPassword && } ); diff --git a/src/ui/src/containers/constants.ts b/src/ui/src/containers/constants.ts index c073f9bf88d..9f3414ac800 100644 --- a/src/ui/src/containers/constants.ts +++ b/src/ui/src/containers/constants.ts @@ -23,6 +23,7 @@ declare global { OAUTH_PROVIDER: OAuthProvider; AUTH_URI: string; AUTH_CLIENT_ID: string; + AUTH_EMAIL_PASSWORD_CONN: string; DOMAIN_NAME: string; SEGMENT_UI_WRITE_KEY: string; LD_CLIENT_ID: string; @@ -41,6 +42,8 @@ export const { AUTH_URI } = window.__PIXIE_FLAGS__; // eslint-disable-next-line no-underscore-dangle export const { AUTH_CLIENT_ID } = window.__PIXIE_FLAGS__; // eslint-disable-next-line no-underscore-dangle +export const { AUTH_EMAIL_PASSWORD_CONN } = window.__PIXIE_FLAGS__; +// eslint-disable-next-line no-underscore-dangle export const { DOMAIN_NAME } = window.__PIXIE_FLAGS__; // eslint-disable-next-line no-underscore-dangle export const { SEGMENT_UI_WRITE_KEY } = window.__PIXIE_FLAGS__; diff --git a/src/ui/src/flags.js b/src/ui/src/flags.js index 017f87d5d7f..6846c454c1c 100644 --- a/src/ui/src/flags.js +++ b/src/ui/src/flags.js @@ -17,12 +17,13 @@ */ /* global __CONFIG_OAUTH_PROVIDER__, __CONFIG_AUTH_CLIENT_ID__, -__CONFIG_AUTH_URI__, __CONFIG_DOMAIN_NAME__, +__CONFIG_AUTH_URI__, __CONFIG_AUTH_EMAIL_PASSWORD_CONN__, __CONFIG_DOMAIN_NAME__, __CONFIG_LD_CLIENT_ID__, __SEGMENT_UI_WRITE_KEY__, __ANALYTICS_ENABLED__, __ANNOUNCEMENT_ENABLED__, __ANNOUNCE_WIDGET_URL__, __CONTACT_ENABLED__ */ const OAUTH_PROVIDER = __CONFIG_OAUTH_PROVIDER__; const AUTH_URI = __CONFIG_AUTH_URI__; const AUTH_CLIENT_ID = __CONFIG_AUTH_CLIENT_ID__; +const AUTH_EMAIL_PASSWORD_CONN = __CONFIG_AUTH_EMAIL_PASSWORD_CONN__; const DOMAIN_NAME = __CONFIG_DOMAIN_NAME__; const LD_CLIENT_ID = __CONFIG_LD_CLIENT_ID__; const SEGMENT_UI_WRITE_KEY = __SEGMENT_UI_WRITE_KEY__; @@ -38,6 +39,7 @@ window.__PIXIE_FLAGS__ = { OAUTH_PROVIDER, AUTH_URI, AUTH_CLIENT_ID, + AUTH_EMAIL_PASSWORD_CONN, DOMAIN_NAME, SEGMENT_UI_WRITE_KEY, LD_CLIENT_ID, diff --git a/src/ui/src/pages/auth/auth0-oauth-provider.ts b/src/ui/src/pages/auth/auth0-oauth-provider.ts index ff6b99282c7..4d671a4aa28 100644 --- a/src/ui/src/pages/auth/auth0-oauth-provider.ts +++ b/src/ui/src/pages/auth/auth0-oauth-provider.ts @@ -16,17 +16,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -import type * as React from 'react'; - import { FormStructure } from 'app/components'; import { Auth0Buttons } from 'app/containers/auth/auth0-buttons'; +import { AUTH_CLIENT_ID, AUTH_EMAIL_PASSWORD_CONN, AUTH_URI } from 'app/containers/constants'; import { UserManager } from 'oidc-client'; -import { AUTH_CLIENT_ID, AUTH_URI } from 'app/containers/constants'; +import type * as React from 'react'; import { OAuthProviderClient, Token } from './oauth-provider'; -// Connection type is the Auth0 Connection type that's currently allowed. Add connection -// values here as needed. -type Connection = 'google-oauth2'; export class Auth0Client extends OAuthProviderClient { getRedirectURL: (boolean) => string; @@ -36,14 +32,12 @@ export class Auth0Client extends OAuthProviderClient { } // eslint-disable-next-line class-methods-use-this - makeAuth0OIDCClient(connectionName: Connection, redirectURI: string): UserManager { + makeAuth0OIDCClient(redirectURI: string, extraQueryParams?: Record): UserManager { return new UserManager({ authority: `https://${AUTH_URI}`, client_id: AUTH_CLIENT_ID, redirect_uri: redirectURI, - extraQueryParams: { - connection: connectionName, - }, + extraQueryParams, prompt: 'login', scope: 'openid profile email', // "token" is returned and propagated as the main authorization access_token. @@ -55,15 +49,39 @@ export class Auth0Client extends OAuthProviderClient { redirectToGoogleLogin(): void { this.makeAuth0OIDCClient( - 'google-oauth2', this.getRedirectURL(/* isSignup */ false), + { + connection: 'google-oauth2', + }, ).signinRedirect(); } redirectToGoogleSignup(): void { this.makeAuth0OIDCClient( - 'google-oauth2', this.getRedirectURL(/* isSignup */ true), + { + connection: 'google-oauth2', + }, + ).signinRedirect(); + } + + redirectToEmailLogin(): void { + this.makeAuth0OIDCClient( + this.getRedirectURL(/* isSignup */ false), + { + connection: AUTH_EMAIL_PASSWORD_CONN, + mode: 'login', + }, + ).signinRedirect(); + } + + redirectToEmailSignup(): void { + this.makeAuth0OIDCClient( + this.getRedirectURL(/* isSignup */ false), + { + connection: AUTH_EMAIL_PASSWORD_CONN, + mode: 'signUp', + }, ).signinRedirect(); } @@ -98,15 +116,21 @@ export class Auth0Client extends OAuthProviderClient { getLoginButtons(): React.ReactElement { return Auth0Buttons({ + enableEmailPassword: !!AUTH_EMAIL_PASSWORD_CONN, googleButtonText: 'Login with Google', onGoogleButtonClick: () => this.redirectToGoogleLogin(), + emailPasswordButtonText: 'Login with Email', + onEmailPasswordButtonClick: () => this.redirectToEmailLogin(), }); } getSignupButtons(): React.ReactElement { return Auth0Buttons({ + enableEmailPassword: !!AUTH_EMAIL_PASSWORD_CONN, googleButtonText: 'Sign-up with Google', onGoogleButtonClick: () => this.redirectToGoogleSignup(), + emailPasswordButtonText: 'Sign-up with Email', + onEmailPasswordButtonClick: () => this.redirectToEmailSignup(), }); } diff --git a/src/ui/webpack.config.js b/src/ui/webpack.config.js index be2715168e8..d725b88f3bb 100644 --- a/src/ui/webpack.config.js +++ b/src/ui/webpack.config.js @@ -268,6 +268,7 @@ module.exports = (env, argv) => { const oauthProvider = oauthYAML.data.PL_OAUTH_PROVIDER; const authURI = oauthYAML.data.PL_AUTH_URI; const authClientID = oauthYAML.data.PL_AUTH_CLIENT_ID; + const authEmailPasswordConnection = oauthYAML.data.PL_AUTH_EMAIL_PASSWORD_CONN; // Get LDClientID. const ldYAML = utils.readYAMLFile(join(topLevelDir, 'credentials', 'k8s', @@ -298,6 +299,7 @@ module.exports = (env, argv) => { __CONFIG_OAUTH_PROVIDER__: JSON.stringify(oauthProvider), __CONFIG_AUTH_URI__: JSON.stringify(authURI), __CONFIG_AUTH_CLIENT_ID__: JSON.stringify(authClientID), + __CONFIG_AUTH_EMAIL_PASSWORD_CONN__: JSON.stringify(authEmailPasswordConnection), __CONFIG_DOMAIN_NAME__: JSON.stringify(domainYAML.data.PL_DOMAIN_NAME), __CONFIG_LD_CLIENT_ID__: JSON.stringify(ldYAML.data.PL_LD_CLIENT_ID), __SEGMENT_ANALYTICS_JS_DOMAIN__: `"segment.${domainYAML.data.PL_DOMAIN_NAME}"`,