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

credentials/k8s/dev/configs/oauth_config.yaml

@@ -7,15 +7,16 @@ data:
     PL_OAUTH_PROVIDER: ENC[AES256_GCM,data:NrSqSzA=,iv:eweassnaISHkFum+SdInE8bOm9GIILxseIHFrZX6mM8=,tag:ja+ratTADmbzB/7xTdmlkw==,type:str]
     PL_AUTH_URI: ENC[AES256_GCM,data:qZEPUXRRyyTkR2KfjG7auzW/1QA=,iv:n+SZIg+2IwGKduVw5aoLaNuDmtTBvb/Sj3uAfB7o/yE=,tag:2IK7qQAYK/j1L7k56nJo2A==,type:str]
     PL_AUTH_CLIENT_ID: ENC[AES256_GCM,data:Vk3FJf4dKR5K81rCGUsEIdZ1oRl+nwwFWvmLwalmPdc=,iv:5TtBheHv5i72qibFh1AjhJol9S64Ax/VTdiYjKdKlso=,tag:Vd7EhwvN5keiO+9Hqd2THg==,type:str]
+    PL_AUTH_EMAIL_PASSWORD_CONN: ENC[AES256_GCM,data:doBlM8NbwIv60h9FDafBqhEP4erePhcstZnRRsWPCpA=,iv:8dIUqZuihXm8k3h/8rxXuaD1DuCAxQJ/psEtLgKzshs=,tag:2oXz71PfyIg9vNwDzYuGsw==,type:str]
 sops:
     kms: []
     gcp_kms:
     -   resource_id: projects/pl-dev-infra/locations/global/keyRings/sops-dev/cryptoKeys/sops-key
         created_at: '2021-04-09T17:45:01Z'
         enc: CiQA5BLLgeGRmE9e+arR2lzJ/K3O3d6sZnMLTNb0sfZAKG42JLYSSQAFe311555H3WXrzqmX2OxbiRTBrT6a6VVXg7maz67JbZ4XXOHbINkuedBrA/ve6hjzpkmuIvSuQSxq/FCOqZPYXxCwfGL6W9g=
     azure_kv: []
-    lastmodified: '2021-04-09T17:53:22Z'
-    mac: ENC[AES256_GCM,data:Zcdh0nHQ7exaPvwBDcs99Y+bda6m11s/eENJZRKzk+rjTE4ed8UTx1rrpOcnp4BVmV4TtSOJHMnwKOzz66A8ksClb06Ot8uHaemTIwFU5m8YUZlouCahGZjZu/A50SC88zmqL5Ekw9TdX/NIZs5KBC+ZJQ947X/P7ylQFk+7njA=,iv:RS23e6qbSivUYHpDX5r+FTucVYu+z7jjYQP+6cAZLMc=,tag:3kH+meGq8kcrZaHHUkSLCQ==,type:str]
+    lastmodified: '2021-11-16T03:56:41Z'
+    mac: ENC[AES256_GCM,data:aJevnGDDhKJHFq6pbTDx2NHDbtHZEyMkfAXDinW29w4+f0WWlZKRMB5yNzvkkQA28MxJIRAbprltKst66oRHb/yQXppRr6Y04jnXbi+FZ6rSQ2VO/SXARlR3Ak9ylNzqUwAlKCFhQzEb7AIAHngPKZLQgXv5MOrtDUqkDdEArBU=,iv:vdQbvgfofVE+veXpDhn6s+KwEHRt4XgmclaZFkCU0Oc=,tag:tYo1EoP8k9a99aO+jiUprA==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.3.1

credentials/k8s/prod/configs/oauth_config.yaml

@@ -7,15 +7,16 @@ data:
     PL_OAUTH_PROVIDER: ENC[AES256_GCM,data:EX2Z6tE=,iv:vWI0kY/l7iPGY1nYHArYQfLGM4e+Pcw2vpYFHJQepHY=,tag:EO3UqsZkaNTeXpn3pEPJpw==,type:str]
     PL_AUTH_URI: ENC[AES256_GCM,data:qx65ktt3lVgTb2tifrM2Xkg6Yhg=,iv:XidT2EnnKhRSM3iz/VbI03nFz2g+oQGPojIJQIPL7d4=,tag:uFapMhBTuZnWgN+4XKUdHw==,type:str]
     PL_AUTH_CLIENT_ID: ENC[AES256_GCM,data:CB2oSWfHTk9pqER3Tvhc11pDXGHEPVcFjLF0wDf/oXo=,iv:ssu8LpHBbGj4wE9K8OFA5HDZaNEPZ0EhaghUZxikuJA=,tag:gLPc5SSycavX+hWXD+kkow==,type:str]
+    PL_AUTH_EMAIL_PASSWORD_CONN: ""
 sops:
     kms: []
     gcp_kms:
     -   resource_id: projects/pl-dev-infra/locations/global/keyRings/sops-dev/cryptoKeys/sops-key
         created_at: '2021-04-09T18:08:25Z'
         enc: CiQA5BLLgR9SS3uqfRHxoeztaEhx09hsLfmOWaOHW2y+R1G3kuISSQAFe311OblO5BTriBea+wYfjzwWydjd3JmcMrGzYdzv84wLqSneoITvRCLSZz9cWhyBT/2nsbSQOd/SzlBJp1Hx2Y9Xm7Z6aIc=
     azure_kv: []
-    lastmodified: '2021-04-09T18:08:31Z'
-    mac: ENC[AES256_GCM,data:IvRoiV++0e9ht1yo7nyRVUPSQWWB+z/6gLKs4SRrAy5llEb0MYkY2hS14W/B7pdmcVoBF3gjY/cZo2e46aC+Vzl+KZv9WPs+Utl5OzwYu6SoP7ixPkcTtRP1zMx3e1YGOQUJoACNSdFN/AcKunBayIxFMao8jTqRm76JqBu0YFI=,iv:jAUYXQGyVG89zhkunY45eRQuZUQzjwVH2ukFmJUrcTI=,tag:b8758avWl6B4/9eRZKFGFg==,type:str]
+    lastmodified: '2021-11-16T03:57:26Z'
+    mac: ENC[AES256_GCM,data:+IsXccr8vVU3Z4gWeIXQBz+nwcV1N8ldLdjE5SVWnypmpq/bBHhBZPijtlol1HRK5lJr/dYSjft5g3EYV+2S/uyEUsc25ueC2at2Fne18q4YRNKXjrpt0Pc+O/hBCGnH53mm326UrPUiQgkhFrcjJJSHOaSlM9RdYTFF8Fd3+EE=,iv:QpUleWoEg0/GOWPd4I4jFaDZOGVVvm2pvBARRIPKiF0=,tag:vqipqn8t6AUYBPrGJ3T+hQ==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.3.1

credentials/k8s/staging/configs/oauth_config.yaml

@@ -7,15 +7,16 @@ data:
     PL_OAUTH_PROVIDER: ENC[AES256_GCM,data:c/JpBvA=,iv:cFXbyudlV4gZd8vY5J9ay21IBV8WRErfqVjYXUPbltA=,tag:YlBTpMzqNcWy5HsDOnGyBw==,type:str]
     PL_AUTH_URI: ENC[AES256_GCM,data:ygXE7j0abLFnPmjicQyaYTFgfuY=,iv:aLOd01m5mstXsDedBnxiRSMNMj0sWAHaOphWab2TmME=,tag:CZ34GjvRurYakxw+GSCgOQ==,type:str]
     PL_AUTH_CLIENT_ID: ENC[AES256_GCM,data:xpM8XtfJkg8vI3XhlZBI5Dl5odeudzEt6xgFZpyJlSg=,iv:JdErNXQz6TC/tjTrqaxQEVSYAuezHtbAQraDg9IXHDw=,tag:b/grlE5smFYFVDczPBgbvw==,type:str]
+    PL_AUTH_EMAIL_PASSWORD_CONN: ""
 sops:
     kms: []
     gcp_kms:
     -   resource_id: projects/pl-dev-infra/locations/global/keyRings/sops-dev/cryptoKeys/sops-key
         created_at: '2021-04-09T18:09:41Z'
         enc: CiQA5BLLgdFvNTSv5s+Ob2xexbQYQ1O8LVdIsdy0Bv0g333IafUSSQAFe311Xa6TB2S1NDKI8eF1OzBSVRE9G6XlQOn8h/0R5n1DBlO7HFb+NNRJTACK1RdIt8bXAiXmcuhjOhkeec+3UWlnfcSDTOQ=
     azure_kv: []
-    lastmodified: '2021-04-09T18:09:49Z'
-    mac: ENC[AES256_GCM,data:pBLlSRKnYLN/y06T6SzxQlksky+s+XgkSAyft0uK/kSChIJ39wvJZAB8YKhzV12JHa2OTUWn1jydACu9ryEo1rMz736m/MJt5OjDZfAVJ0ENPhNVd7aSXzx4UUWdKjfB77Qe2yZDwPLO52BnhlxRehdPAURBwO02QVUGIr+xJtE=,iv:ftsua2DC3/IK0hzP/PKbxHWho9Y6JeqgNc5m7XpCY1k=,tag:wGfFt/+pDLAWvp2ekQbPgA==,type:str]
+    lastmodified: '2021-11-16T03:57:44Z'
+    mac: ENC[AES256_GCM,data:HQIsS/72BjoZ0UdyZeOb5Cx3JdNee6zEPkr92Iim2RSU7M/ckrpt8HcwQig1bRL+RoBCYgvOWWPpKvHcjNdf1EdlPYlEjT/DpSHRgImAsFm4KZKsf1ejY6kBfFYQ0p3xI7qEt5S02azU8oFfiZ2SIVKPOCFd7aslK+VQPlvh2gU=,iv:u2g09nHAYAOPDvhmFtyJTm9bX2NaAni7U5KfP7FwIOk=,tag:PYl4XfTLONvcgTCY9LaDOw==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.3.1

credentials/k8s/testing/configs/oauth_config.yaml

@@ -7,15 +7,16 @@ data:
     PL_OAUTH_PROVIDER: ENC[AES256_GCM,data:Tl29/T0=,iv:cW/bExbudxhmzLsranhCTMjbfTUYU5kcvsOX5kFbiYU=,tag:j1lF8kSB+PSYT4Nie9r3Fg==,type:str]
     PL_AUTH_URI: ENC[AES256_GCM,data:YMDD4d4Toh/qtCd+I0tIHGYfPGg=,iv:vuKs1/FtQFL1PAxfIaneQ32YYUoklWOs6rmt69hPvlw=,tag:EiSomHb2zzoVD/vChH3whQ==,type:str]
     PL_AUTH_CLIENT_ID: ENC[AES256_GCM,data:O+S3xm2/+nUqwtEkXMigEDElomyeLs4ePYu+Yb8HAkE=,iv:PGAVqOBOTWOtd/OkKz94r0oBqLSIphftxOZ7jWINQX8=,tag:LkbZQT3MMWHdXnyUzaOb1g==,type:str]
+    PL_AUTH_EMAIL_PASSWORD_CONN: ENC[AES256_GCM,data:thBscc/HGyfvwkhn4pTH6lPmiZHslushH9rtNvFab30=,iv:NXIUhi8x/4cDxJmSr8v56pcBhIZ8hRo5lANUZjsZBfk=,tag:v4US72ELho8MGbKBWYsW5w==,type:str]
 sops:
     kms: []
     gcp_kms:
     -   resource_id: projects/pl-dev-infra/locations/global/keyRings/sops-dev/cryptoKeys/sops-key
         created_at: '2021-09-02T20:58:25Z'
         enc: CiQA5BLLgcZMJ3hBTJJdzMM1/Ofb76IxN4/+nSB+dDIryK/9NjISSQAFe311rkIuWP2LRDOy7NBgigJmvo1Ybp4CeSgnZ5RSyB9J1sXEcsDIyqP1XPSaf7SrWl1Euec4+yb9mhUDrofsYs4Y88fY2a4=
     azure_kv: []
-    lastmodified: '2021-09-02T21:28:09Z'
-    mac: ENC[AES256_GCM,data:0lCiYEViscdHgBsLnjLBWhb5YfrmuCJ6AcWY5OcPpxxUSvCgugwqlWBEMxUoo0eCgv+NJaFWGXJEJaeYkdkQaE+/XgSiI8d8cFhNYT/sSgYsHNIyi3E2uKFHDQWZPOcbfDDoeuk31cOVt82aDcZ+u2D7M9sNg4X/gbS+g4eceE4=,iv:bS0mSOcvJK0yVOYOS8FFIDB57HXWcI3cJb+DA27YLaA=,tag:t/4r3aYOddKtLvAGUXTkoA==,type:str]
+    lastmodified: '2021-11-16T03:56:56Z'
+    mac: ENC[AES256_GCM,data:nigUfcZExm+chNWfmJ22MstrIAoxa8ALgVXDvoYE7jHGFG8p0hKVQcmAebEdeRKD+SQFJ2OqjzuRcbwU+PxdgGE1pHJVVBq5l6A5qiJsYHGhUkAD2nr5NJ+O7sOQbtbB2GTce9qOThel81ro0/hUmy+eMwqhtjQIVRCBJj9pVPg=,iv:+7LuUQCyLSs7uW+CB0W/vWgQNiAh68wg6WldfwcmeeE=,tag:ZE2YusQ/SSTYutY5BAApEw==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
     version: 3.3.1

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