Remove redirect to previous page after manual log out, expose redirec…

…t param, fix auth page titles (#12678) * Add loggedOut state to auth service to track when user manually logged out Only redirect to previous page if user logged out Update from state to be part of the query instead of internal to the router * Add page titles to Sign up, log in, and reset password pages * Remove react query queries on logout Fix Main view routes to redirect away from auth routes using the query instead of from state Remove stateUtils as it's no longer used * Remove unnecessary var in LoginPage then clause Co-authored-by: Krishna Glick <krishna@airbyte.io> Co-authored-by: Krishna Glick <krishna@airbyte.io>
airbytehq · May 23, 2022 · 4479b69 · 4479b69
1 parent 8bd361c
commit 4479b69
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 29 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx
@@ -21,7 +21,6 @@ import DestinationPage from "pages/DestinationPage";
 import OnboardingPage from "pages/OnboardingPage";
 import SourcesPage from "pages/SourcesPage";
 import { useCurrentWorkspace, WorkspaceServiceProvider } from "services/workspaces/WorkspacesService";
-import { hasFromState } from "utils/stateUtils";
 import { storeUtmFromQuery } from "utils/utmStorage";
 import { CompleteOauthRequest } from "views/CompleteOauthRequest";
 
@@ -106,16 +105,12 @@ const MainRoutes: React.FC = () => {
 const MainViewRoutes = () => {
   useApiHealthPoll();
   useIntercom();
-  const { location } = useRouter();
+  const { query } = useRouter();
 
   return (
     <Routes>
       {[CloudRoutes.Login, CloudRoutes.Signup, CloudRoutes.FirebaseAction].map((r) => (
-        <Route
-          key={r}
-          path={`${r}/*`}
-          element={hasFromState(location.state) ? <Navigate to={location.state.from} replace /> : <DefaultView />}
-        />
+        <Route key={r} path={`${r}/*`} element={query.from ? <Navigate to={query.from} replace /> : <DefaultView />} />
       ))}
       <Route path={CloudRoutes.SelectWorkspace} element={<WorkspacesPage />} />
       <Route path={CloudRoutes.AuthFlow} element={<CompleteOauthRequest />} />

diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx
@@ -36,11 +36,12 @@ export type AuthSendEmailVerification = () => Promise<void>;
 export type AuthVerifyEmail = (code: string) => Promise<void>;
 export type AuthLogout = () => void;
 
-type AuthContextApi = {
+interface AuthContextApi {
   user: User | null;
   inited: boolean;
   emailVerified: boolean;
   isLoading: boolean;
+  loggedOut: boolean;
   login: AuthLogin;
   signUp: AuthSignUp;
   updatePassword: AuthUpdatePassword;
@@ -50,7 +51,7 @@ type AuthContextApi = {
   sendEmailVerification: AuthSendEmailVerification;
   verifyEmail: AuthVerifyEmail;
   logout: AuthLogout;
-};
+}
 
 export const AuthContext = React.createContext<AuthContextApi | null>(null);
 
@@ -96,6 +97,7 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
       inited: state.inited,
       isLoading: state.loading,
       emailVerified: state.emailVerified,
+      loggedOut: state.loggedOut,
       async login(values: { email: string; password: string }): Promise<void> {
         await authService.login(values.email, values.password);
 
@@ -105,8 +107,8 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
       },
       async logout(): Promise<void> {
         await authService.signOut();
+        queryClient.removeQueries();
         loggedOut();
-        await queryClient.invalidateQueries();
       },
       async updateEmail(email, password): Promise<void> {
         await userService.changeEmail(email);

diff --git a/airbyte-webapp/src/packages/cloud/services/auth/reducer.ts b/airbyte-webapp/src/packages/cloud/services/auth/reducer.ts
@@ -16,13 +16,15 @@ export type AuthServiceState = {
   currentUser: User | null;
   emailVerified: boolean;
   loading: boolean;
+  loggedOut: boolean;
 };
 
 export const initialState: AuthServiceState = {
   inited: false,
   currentUser: null,
   emailVerified: false,
   loading: false,
+  loggedOut: false,
 };
 
 export const authStateReducer = createReducer<AuthServiceState, Actions>(initialState)
@@ -39,6 +41,7 @@ export const authStateReducer = createReducer<AuthServiceState, Actions>(initial
       emailVerified: action.payload.emailVerified,
       inited: true,
       loading: false,
+      loggedOut: false,
     };
   })
   .handleAction(actions.emailVerified, (state, action): AuthServiceState => {
@@ -52,5 +55,6 @@ export const authStateReducer = createReducer<AuthServiceState, Actions>(initial
       ...state,
       currentUser: null,
       emailVerified: false,
+      loggedOut: true,
     };
   });
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx b/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx
@@ -6,6 +6,7 @@ import { LoadingPage } from "components";
 
 import useRouter from "hooks/useRouter";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
+import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { ResetPasswordAction } from "packages/cloud/views/FirebaseActionRoute";
 
 import FormContent from "./components/FormContent";
@@ -39,6 +40,7 @@ const NewsPart = styled(Part)`
 
 const Auth: React.FC = () => {
   const { pathname, location } = useRouter();
+  const { loggedOut } = useAuthService();
 
   return (
     <Content>
@@ -50,7 +52,10 @@ const Auth: React.FC = () => {
               <Route path={CloudRoutes.Signup} element={<SignupPage />} />
               <Route path={CloudRoutes.ResetPassword} element={<ResetPasswordPage />} />
               <Route path={CloudRoutes.FirebaseAction} element={<ResetPasswordAction />} />
-              <Route path="*" element={<Navigate to={CloudRoutes.Login} state={{ from: location }} />} />
+              <Route
+                path="*"
+                element={<Navigate to={`${CloudRoutes.Login}${loggedOut ? "" : `?from=${location.pathname}`}`} />}
+              />
             </Routes>
           </Suspense>
         </FormContent>

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
 import { LabeledInput, Link, LoadingButton } from "components";
+import HeadTitle from "components/HeadTitle";
 
 import useRouter from "hooks/useRouter";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
@@ -20,10 +21,11 @@ const LoginPageValidationSchema = yup.object().shape({
 const LoginPage: React.FC = () => {
   const formatMessage = useIntl().formatMessage;
   const { login } = useAuthService();
-  const { location, replace } = useRouter();
+  const { query, replace } = useRouter();
 
   return (
     <div>
+      <HeadTitle titles={[{ id: "login.login" }]} />
       <FormTitle bold>
         <FormattedMessage id="login.loginTitle" />
       </FormTitle>
@@ -35,18 +37,15 @@ const LoginPage: React.FC = () => {
         }}
         validationSchema={LoginPageValidationSchema}
         onSubmit={async (values, { setFieldError }) => {
-          return (
-            login(values)
-              // @ts-expect-error state is now unkown, needs proper typing
-              .then((_) => replace(location.state?.from ?? "/"))
-              .catch((err) => {
-                if (err instanceof FieldError) {
-                  setFieldError(err.field, err.message);
-                } else {
-                  setFieldError("password", err.message);
-                }
-              })
-          );
+          return login(values)
+            .then(() => replace(query.from ?? "/"))
+            .catch((err) => {
+              if (err instanceof FieldError) {
+                setFieldError(err.field, err.message);
+              } else {
+                setFieldError("password", err.message);
+              }
+            });
         }}
         validateOnBlur
         validateOnChange={false}

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
 import { LoadingButton, LabeledInput, Link } from "components";
+import HeadTitle from "components/HeadTitle";
 
 import { useNotificationService } from "hooks/services/Notification/NotificationService";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
@@ -23,6 +24,7 @@ const ResetPasswordPage: React.FC = () => {
 
   return (
     <div>
+      <HeadTitle titles={[{ id: "login.resetPassword" }]} />
       <FormTitle bold>
         <FormattedMessage id="login.resetPassword" />
       </FormTitle>

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
@@ -5,6 +5,7 @@ import styled from "styled-components";
 import * as yup from "yup";
 
 import { H1, LabeledInput, Link, LoadingButton } from "components";
+import HeadTitle from "components/HeadTitle";
 
 import { useConfig } from "config";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
@@ -43,6 +44,7 @@ const SignupPage: React.FC = () => {
 
   return (
     <div>
+      <HeadTitle titles={[{ id: "login.signup" }]} />
       <H1 bold>
         <FormattedMessage id="login.activateAccess" />
       </H1>

diff --git a/airbyte-webapp/src/utils/stateUtils.ts b/airbyte-webapp/src/utils/stateUtils.ts