Add a signup complete page

Summary: Add a signup complete handler that will try to refetch the token from the existing session.

Test Plan: yarn dev

Reviewers: michelle, philkuz

Reviewed By: michelle

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

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

GitOrigin-RevId: c73ffa6

src/ui/src/pages/auth/auth.tsx

@@ -23,6 +23,7 @@ import { Route, Switch } from 'react-router';
 import { LoginPage } from './login';
 import { PasswordLoginPage } from './password-login';
 import { SignupPage } from './signup';
+import { SignupCompletePage } from './signup-complete';
 import { AuthCallbackPage } from './callback';
 import { LogoutPage } from './logout';
 import { CLIAuthCompletePage } from './cli-auth-complete';
@@ -37,6 +38,7 @@ export const AuthRouter: React.FC = () => (
     <Route exact path='/auth/callback' component={AuthCallbackPage} />
     <Route exact path='/auth/login' component={LoginPage} />
     <Route exact path='/auth/signup' component={SignupPage} />
+    <Route exact path='/auth/signup-complete' component={SignupCompletePage} />
     <Route exact path='/auth/cli-auth-complete' component={CLIAuthCompletePage} />
     <Route exact path='/auth/logout' component={LogoutPage} />
   </Switch>

src/ui/src/pages/auth/auth0-oauth-provider.ts

@@ -78,7 +78,9 @@ export class Auth0Client extends OAuthProviderClient {
 
   redirectToEmailSignup(): void {
     this.makeAuth0OIDCClient(
-      this.getRedirectURL(/* isSignup */ true),
+      // Even though we are in a signup flow, the callback shouldn't "sign up" the
+      // user until verification is complete.
+      this.getRedirectURL(/* isSignup */ false),
       {
         connection: AUTH_EMAIL_PASSWORD_CONN,
         // Manually configured in Classic Universal Login settings.
@@ -89,6 +91,20 @@ export class Auth0Client extends OAuthProviderClient {
     ).signinRedirect();
   }
 
+  refetchToken(): void {
+    // Omitting the prompt parameter with the New Universal Login will cause this to fetch the token
+    // from an existing Auth0 session if possible. https://auth0.com/docs/login/universal-login/new-experience#signup
+    const client = new UserManager({
+      authority: `https://${AUTH_URI}`,
+      client_id: AUTH_CLIENT_ID,
+      redirect_uri: this.getRedirectURL(/* isSignup */ false),
+      extraQueryParams: { connection: AUTH_EMAIL_PASSWORD_CONN },
+      scope: 'openid profile email',
+      response_type: 'token id_token',
+    });
+    client.signinRedirect();
+  }
+
   // eslint-disable-next-line class-methods-use-this
   handleToken(): Promise<Token> {
     return new Promise<Token>((resolve, reject) => {

src/ui/src/pages/auth/hydra-oauth-provider.ts

@@ -85,6 +85,10 @@ export class HydraClient extends OAuthProviderClient {
     window.location.href = this.makeClient(this.makeAndStoreState(), /* isSignup */ true).token.getUri();
   }
 
+  refetchToken(): void {
+    window.location.href = this.makeClient(this.makeAndStoreState(), /* isSignup */ false).token.getUri();
+  }
+
   handleToken(): Promise<Token> {
     return new Promise<Token>((resolve, reject) => {
       this.makeClient(this.getStoredState(), false).token.getToken(window.location).then((user) => {

src/ui/src/pages/auth/oauth-provider.ts

@@ -27,6 +27,9 @@ export type Token = {
 
 /** OAuthProviderClient is the interface for OAuth providers such as Auth0 and ORY/Hydra. */
 export abstract class OAuthProviderClient {
+  /** refetchToken will get the OAuthProvider to refetch and store the token. */
+  abstract refetchToken(): void;
+
   /** handleToken will get the token wherever it's stored by the OAuthProvider and pass it to the callback. */
   abstract handleToken(): Promise<Token>;
 

src/ui/src/pages/auth/signup-complete.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2018- The Pixie Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { AuthMessageBox } from 'app/components';
+import * as React from 'react';
+import { GetOAuthProvider } from './utils';
+
+// eslint-disable-next-line react-memo/require-memo
+export const SignupCompletePage: React.FC = () => {
+  GetOAuthProvider().refetchToken();
+
+  return (
+    <AuthMessageBox
+      title='Authenticating'
+      message='...'
+    />
+  );
+};