Email/Password buttons for Auth0

Test Plan: skaffold dev cloud

Reviewers: michelle, philkuz

Reviewed By: michelle
Signed-off-by: Vihang Mehta <vihang@pixielabs.ai>

Differential Revision: https://phab.corp.pixielabs.ai/D10185

GitOrigin-RevId: a1cbc718939955103ed9551d0715ed261a997b0f

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: ""

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

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;

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}'";

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") }

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<AuthBoxProps> = React.memo(function AuthBox(props
           </>
         )
       }
-      { children}
+      {children}
       <div className={classes.gutter}>
         <Typography variant='subtitle2' className={classes.account}>
           {buttonCaption}

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<Auth0ButtonsProps> = ({ googleButtonText, onGoogleButtonClick }) => (
+// eslint-disable-next-line react-memo/require-memo
+export const Auth0Buttons: React.FC<Auth0ButtonsProps> = ({
+  enableEmailPassword,
+  googleButtonText,
+  onGoogleButtonClick,
+  emailPasswordButtonText,
+  onEmailPasswordButtonClick,
+}) => (
   <>
     <GoogleButton
       text={googleButtonText}
       onClick={onGoogleButtonClick}
     />
+    {enableEmailPassword && <UsernamePasswordButton
+      text={emailPasswordButtonText}
+      onClick={onEmailPasswordButtonClick}
+    />}
   </>
 );

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__;

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,

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<string, any>): 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(),
     });
   }
 

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}"`,