🪟 🎉 Enable OAuth login (#15414)

* Enable OAuth login

* Style buttons

* Make sure to hide error wrapper without error

* Extract OAuthProviders type

* Make google login button outline more visible

* Add provider to segment identify call

* Switch TOS checkbox by disclaimer

* Address review feedback

* Hide password change section for OAuth accounts

* Update airbyte-webapp/src/packages/cloud/locales/en.json

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* Address review feedback

* Add additional flags to disable on sign-up

* Adding more tests

* Review feedback

* Fix broken linting

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

Author: Tim Roes

airbyte-webapp/src/hooks/services/Analytics/useAnalyticsService.tsx

@@ -66,12 +66,12 @@ export const useAnalytics = (): AnalyticsServiceProviderValue => {
   return analyticsContext;
 };
 
-export const useAnalyticsIdentifyUser = (userId?: string): void => {
+export const useAnalyticsIdentifyUser = (userId?: string, traits?: Record<string, unknown>): void => {
   const analyticsService = useAnalyticsService();
 
   useEffect(() => {
     if (userId) {
-      analyticsService.identify(userId);
+      analyticsService.identify(userId, traits);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userId]);

airbyte-webapp/src/hooks/services/Experiment/experiments.ts

@@ -9,4 +9,8 @@ export interface Experiments {
   "authPage.hideSelfHostedCTA": boolean;
   "authPage.signup.hideName": boolean;
   "authPage.signup.hideCompanyName": boolean;
+  "authPage.oauth.google": boolean;
+  "authPage.oauth.github": boolean;
+  "authPage.oauth.google.signUpPage": boolean;
+  "authPage.oauth.github.signUpPage": boolean;
 }

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -136,7 +136,7 @@ const MainViewRoutes = () => {
 };
 
 export const Routing: React.FC = () => {
-  const { user, inited } = useAuthService();
+  const { user, inited, providers } = useAuthService();
   const config = useConfig();
   useFullStory(config.fullstory, config.fullstory.enabled, user);
 
@@ -156,7 +156,7 @@ export const Routing: React.FC = () => {
     [user]
   );
   useAnalyticsRegisterValues(analyticsContext);
-  useAnalyticsIdentifyUser(user?.userId);
+  useAnalyticsIdentifyUser(user?.userId, { providers });
   useTrackPageAnalytics();
 
   if (!inited) {

airbyte-webapp/src/packages/cloud/lib/auth/AuthProviders.ts

@@ -1,3 +1,5 @@
 export enum AuthProviders {
   GoogleIdentityPlatform = "google_identity_platform",
 }
+
+export type OAuthProviders = "github" | "google";

airbyte-webapp/src/packages/cloud/lib/auth/GoogleAuthService.ts

@@ -1,3 +1,5 @@
+import type { OAuthProviders } from "./AuthProviders";
+
 import {
   Auth,
   User,
@@ -15,35 +17,16 @@ import {
   updatePassword,
   updateEmail,
   AuthErrorCodes,
+  signInWithPopup,
+  GoogleAuthProvider,
+  GithubAuthProvider,
 } from "firebase/auth";
 
 import { Provider } from "config";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
 import { EmailLinkErrorCodes, ErrorCodes } from "packages/cloud/services/auth/types";
 
-interface AuthService {
-  login(email: string, password: string): Promise<UserCredential>;
-
-  signOut(): Promise<void>;
-
-  signUp(email: string, password: string): Promise<UserCredential>;
-
-  reauthenticate(email: string, passwordPassword: string): Promise<UserCredential>;
-
-  updatePassword(newPassword: string): Promise<void>;
-
-  resetPassword(email: string): Promise<void>;
-
-  finishResetPassword(code: string, newPassword: string): Promise<void>;
-
-  sendEmailVerifiedLink(): Promise<void>;
-
-  updateEmail(email: string, password: string): Promise<void>;
-
-  signInWithEmailLink(email: string): Promise<UserCredential>;
-}
-
-export class GoogleAuthService implements AuthService {
+export class GoogleAuthService {
   constructor(private firebaseAuthProvider: Provider<Auth>) {}
 
   get auth(): Auth {
@@ -54,6 +37,10 @@ export class GoogleAuthService implements AuthService {
     return this.auth.currentUser;
   }
 
+  async loginWithOAuth(provider: OAuthProviders) {
+    await signInWithPopup(this.auth, provider === "github" ? new GithubAuthProvider() : new GoogleAuthProvider());
+  }
+
   async login(email: string, password: string): Promise<UserCredential> {
     return signInWithEmailAndPassword(this.auth, email, password).catch((err) => {
       switch (err.code) {

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -28,14 +28,19 @@
   "login.companyName": "Company name*",
   "login.companyName.placeholder": "Acme Inc.",
   "login.subscribe": "Receive community and feature updates. You can unsubscribe any time. ",
-  "login.security": "By using the service, you agree to to our <terms>Terms of Service</terms> and <privacy>Privacy\u00a0Policy</privacy>.",
+  "login.disclaimer": "By signing up and continuing, you agree to our <terms>Terms of Service</terms> and <privacy>Privacy Policy</privacy>.",
   "login.inviteTitle": "Invite access",
   "login.inviteLinkExpired": "This invite link expired. A new invite link was sent to your email.",
   "login.inviteLinkInvalid": "This invite link is no longer valid.",
   "login.rightSideFrameTitle": "More about Airbyte",
   "login.quoteText": "Airbyte has cut <b>months of employee hours off</b> of our ELT pipeline development and delivered usable data to us in hours instead of weeks. We are excited for the future of Airbyte, enthusiastic about their approach, and optimistic about our future together.",
   "login.quoteAuthor": "Micah Mangione",
   "login.quoteAuthorJobTitle": "Director of Technology",
+  "login.oauth.or": "or",
+  "login.oauth.google": "Continue with Google",
+  "login.oauth.github": "Continue with GitHub",
+  "login.oauth.differentCredentialsError": "Use your email and password to sign in.",
+  "login.oauth.unknownError": "An unknown error happened during sign in: {error}",
 
   "confirmResetPassword.newPassword": "Enter a new password",
   "confirmResetPassword.success": "Your password has been reset. Please log in with the new password.",

airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx

@@ -1,12 +1,14 @@
-import { User as FbUser } from "firebase/auth";
+import { User as FirebaseUser } from "firebase/auth";
 import React, { useCallback, useContext, useMemo, useRef } from "react";
 import { useQueryClient } from "react-query";
 import { useEffectOnce } from "react-use";
+import { Observable, Subject } from "rxjs";
 
 import { Action, Namespace } from "core/analytics";
+import { isCommonRequestError } from "core/request/CommonRequestError";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import useTypesafeReducer from "hooks/useTypesafeReducer";
-import { AuthProviders } from "packages/cloud/lib/auth/AuthProviders";
+import { AuthProviders, OAuthProviders } from "packages/cloud/lib/auth/AuthProviders";
 import { GoogleAuthService } from "packages/cloud/lib/auth/GoogleAuthService";
 import { User } from "packages/cloud/lib/domain/users";
 import { useGetUserService } from "packages/cloud/services/users/UserService";
@@ -39,13 +41,18 @@ export type AuthSendEmailVerification = () => Promise<void>;
 export type AuthVerifyEmail = (code: string) => Promise<void>;
 export type AuthLogout = () => Promise<void>;
 
+type OAuthLoginState = "waiting" | "loading" | "done";
+
 interface AuthContextApi {
   user: User | null;
   inited: boolean;
   emailVerified: boolean;
   isLoading: boolean;
   loggedOut: boolean;
+  providers: string[] | null;
+  hasPasswordLogin: () => boolean;
   login: AuthLogin;
+  loginWithOAuth: (provider: OAuthProviders) => Observable<OAuthLoginState>;
   signUpWithEmailLink: (form: { name: string; email: string; password: string; news: boolean }) => Promise<void>;
   signUp: AuthSignUp;
   updatePassword: AuthUpdatePassword;
@@ -70,10 +77,61 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
   const analytics = useAnalyticsService();
   const authService = useInitService(() => new GoogleAuthService(() => auth), [auth]);
 
+  /**
+   * Create a user object in the Airbyte database from an existing Firebase user.
+   * This will make sure that the user account is tracked in our database as well
+   * as create a workspace for that user. This method also takes care of sending
+   * the relevant user creation analytics events.
+   */
+  const createAirbyteUser = async (
+    firebaseUser: FirebaseUser,
+    userData: { name?: string; companyName?: string; news?: boolean } = {}
+  ): Promise<User> => {
+    // Create the Airbyte user on our server
+    const user = await userService.create({
+      authProvider: AuthProviders.GoogleIdentityPlatform,
+      authUserId: firebaseUser.uid,
+      email: firebaseUser.email ?? "",
+      name: userData.name ?? firebaseUser.displayName ?? "",
+      companyName: userData.companyName ?? "",
+      news: userData.news ?? false,
+    });
+
+    analytics.track(Namespace.USER, Action.CREATE, {
+      actionDescription: "New user registered",
+      user_id: firebaseUser.uid,
+      name: user.name,
+      email: user.email,
+      // Which login provider was used, e.g. "password", "google.com", "github.com"
+      provider: firebaseUser.providerData[0]?.providerId,
+      ...getUtmFromStorage(),
+    });
+
+    return user;
+  };
+
   const onAfterAuth = useCallback(
-    async (currentUser: FbUser, user?: User) => {
-      user ??= await userService.getByAuthId(currentUser.uid, AuthProviders.GoogleIdentityPlatform);
-      loggedIn({ user, emailVerified: currentUser.emailVerified });
+    async (currentUser: FirebaseUser, user?: User) => {
+      try {
+        user ??= await userService.getByAuthId(currentUser.uid, AuthProviders.GoogleIdentityPlatform);
+        loggedIn({
+          user,
+          emailVerified: currentUser.emailVerified,
+          providers: currentUser.providerData.map(({ providerId }) => providerId),
+        });
+      } catch (e) {
+        if (isCommonRequestError(e) && e.status === 404) {
+          // If there is a firebase user but not database user we'll create a db user in this step
+          // and retry the onAfterAuth step. This will always happen when a user logins via OAuth
+          // the first time and we don't have a database user yet for them. In rare cases this can
+          // also happen for email/password users if they closed their browser or got some network
+          // errors in between creating the firebase user and the database user originally.
+          const user = await createAirbyteUser(currentUser);
+          await onAfterAuth(currentUser, user);
+        } else {
+          throw e;
+        }
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [userService]
@@ -103,13 +161,37 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
       isLoading: state.loading,
       emailVerified: state.emailVerified,
       loggedOut: state.loggedOut,
+      providers: state.providers,
+      hasPasswordLogin(): boolean {
+        return !!state.providers?.includes("password");
+      },
       async login(values: { email: string; password: string }): Promise<void> {
         await authService.login(values.email, values.password);
 
         if (auth.currentUser) {
           await onAfterAuth(auth.currentUser);
         }
       },
+      loginWithOAuth(provider): Observable<OAuthLoginState> {
+        const state = new Subject<OAuthLoginState>();
+        try {
+          state.next("waiting");
+          authService
+            .loginWithOAuth(provider)
+            .then(async () => {
+              state.next("loading");
+              if (auth.currentUser) {
+                await onAfterAuth(auth.currentUser);
+                state.next("done");
+                state.complete();
+              }
+            })
+            .catch((e) => state.error(e));
+        } catch (e) {
+          state.error(e);
+        }
+        return state.asObservable();
+      },
       async logout(): Promise<void> {
         await userService.revokeUserSession();
         await authService.signOut();
@@ -148,7 +230,7 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
         await authService.finishResetPassword(code, newPassword);
       },
       async signUpWithEmailLink({ name, email, password, news }): Promise<void> {
-        let firebaseUser: FbUser;
+        let firebaseUser: FirebaseUser;
 
         try {
           ({ user: firebaseUser } = await authService.signInWithEmailLink(email));
@@ -175,29 +257,14 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
         news: boolean;
       }): Promise<void> {
         // Create a user account in firebase
-        const { user: fbUser } = await authService.signUp(form.email, form.password);
-
-        // Create the Airbyte user on our server
-        const user = await userService.create({
-          authProvider: AuthProviders.GoogleIdentityPlatform,
-          authUserId: fbUser.uid,
-          email: form.email,
-          name: form.name,
-          companyName: form.companyName,
-          news: form.news,
-        });
+        const { user: firebaseUser } = await authService.signUp(form.email, form.password);
+
+        // Create a user in our database for that firebase user
+        await createAirbyteUser(firebaseUser, { name: form.name, companyName: form.companyName, news: form.news });
 
         // Send verification mail via firebase
         await authService.sendEmailVerifiedLink();
 
-        analytics.track(Namespace.USER, Action.CREATE, {
-          actionDescription: "New user registered",
-          user_id: fbUser.uid,
-          name: user.name,
-          email: user.email,
-          ...getUtmFromStorage(),
-        });
-
         if (auth.currentUser) {
           await onAfterAuth(auth.currentUser);
         }

airbyte-webapp/src/packages/cloud/services/auth/reducer.ts

@@ -4,7 +4,7 @@ import { User } from "packages/cloud/lib/domain/users";
 
 export const actions = {
   authInited: createAction("AUTH_INITED")<void>(),
-  loggedIn: createAction("LOGGED_IN")<{ user: User; emailVerified: boolean }>(),
+  loggedIn: createAction("LOGGED_IN")<{ user: User; emailVerified: boolean; providers: string[] }>(),
   emailVerified: createAction("EMAIL_VERIFIED")<boolean>(),
   loggedOut: createAction("LOGGED_OUT")<void>(),
   updateUserName: createAction("UPDATE_USER_NAME")<{ value: string }>(),
@@ -18,6 +18,7 @@ export interface AuthServiceState {
   emailVerified: boolean;
   loading: boolean;
   loggedOut: boolean;
+  providers: string[] | null;
 }
 
 export const initialState: AuthServiceState = {
@@ -26,6 +27,7 @@ export const initialState: AuthServiceState = {
   emailVerified: false,
   loading: false,
   loggedOut: false,
+  providers: null,
 };
 
 export const authStateReducer = createReducer<AuthServiceState, Actions>(initialState)
@@ -40,6 +42,7 @@ export const authStateReducer = createReducer<AuthServiceState, Actions>(initial
       ...state,
       currentUser: action.payload.user,
       emailVerified: action.payload.emailVerified,
+      providers: action.payload.providers,
       inited: true,
       loading: false,
       loggedOut: false,
@@ -57,6 +60,7 @@ export const authStateReducer = createReducer<AuthServiceState, Actions>(initial
       currentUser: null,
       emailVerified: false,
       loggedOut: true,
+      providers: null,
     };
   })
   .handleAction(actions.updateUserName, (state, action): AuthServiceState => {