feat: Implement Email/SSO UI

.github/workflows/deploy-dev.yml

@@ -82,6 +82,7 @@ jobs:
                   VITE_FIRE_APP_ID: ${{ secrets.DEV__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
                   VITE_CLARITY_PROJECT_ID: ${{ secrets.DEV__REACT_APP_CLARITY_PROJECT_ID }}
+                  VITE_OAUTH_ID_GOOGLE: ${{ secrets.DEV__REACT_APP_OAUTH_ID_GOOGLE }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

.github/workflows/deploy-epsilon.yml

@@ -77,6 +77,7 @@ jobs:
                   VITE_FIRE_APP_ID: ${{ secrets.DEV__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
                   VITE_CLARITY_PROJECT_ID: ${{ secrets.DEV__REACT_APP_CLARITY_PROJECT_ID }}
+                  VITE_OAUTH_ID_GOOGLE: ${{ secrets.DEV__REACT_APP_OAUTH_ID_GOOGLE }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

.github/workflows/deploy-prod.yml

@@ -72,6 +72,7 @@ jobs:
                   VITE_FIRE_APP_ID: ${{ secrets.PROD__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
                   VITE_CLARITY_PROJECT_ID: ${{ secrets.PROD__VITE_CLARITY_PROJECT_ID }}
+                  VITE_OAUTH_ID_GOOGLE: ${{ secrets.PROD__REACT_APP_OAUTH_ID_GOOGLE }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

.github/workflows/deploy-staging.yml

@@ -80,6 +80,7 @@ jobs:
                   VITE_FIRE_APP_ID: ${{ secrets.STAGING__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
                   VITE_CLARITY_PROJECT_ID: ${{ secrets.STAGING__VITE_CLARITY_PROJECT_ID }}
+                  VITE_OAUTH_ID_GOOGLE: ${{ secrets.STAGING__REACT_APP_OAUTH_ID_GOOGLE }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

packages/frontend/.gitignore

@@ -2,6 +2,7 @@ dist/
 
 # testing
 /coverage
+*.keystore
 
 # production
 /dist

packages/frontend/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.alphaday"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 0
-        versionName "0.0.1"
+        versionCode 1
+        versionName "1.0.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -25,7 +25,7 @@ android {
 }
 
 repositories {
-    flatDir{
+    flatDir {
         dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
     }
 }

packages/frontend/package.json

@@ -27,6 +27,7 @@
     "@capacitor/status-bar": "5.0.6",
     "@ionic/react": "7.6.1",
     "@ionic/react-router": "7.1.2",
+    "@react-oauth/google": "0.12.1",
     "@reduxjs/toolkit": "1.8.0",
     "@sentry/react": "7.8.1",
     "@sentry/tracing": "7.8.1",

packages/frontend/src/MobileApp.tsx

@@ -6,6 +6,7 @@ import PreloaderPage from "./pages/preloader";
 import "@alphaday/ui-kit/global.scss";
 
 const SuperfeedPage = lazyRetry(() => import("./mobile-pages/superfeed"));
+const AuthPage = lazyRetry(() => import("./mobile-pages/auth"));
 
 const App: React.FC = () => {
     useAppInit();
@@ -16,6 +17,7 @@ const App: React.FC = () => {
             <Switch>
                 <Suspense fallback={<PreloaderPage />}>
                     <Route path="/" exact component={SuperfeedPage} />
+                    <Route path="/auth*" exact component={AuthPage} />
                     {/* Add more routes as needed */}
                 </Suspense>
             </Switch>

packages/frontend/src/api/hooks/index.ts

@@ -23,3 +23,4 @@ export * from "./useKeyPress";
 export * from "./useFeatureFlags";
 export * from "./useWalletViewStateUpdater";
 export * from "./useWidgetHeight";
+export * from "./useAuth";

packages/frontend/src/api/hooks/useAuth.ts

@@ -0,0 +1,123 @@
+import { useCallback } from "react";
+import { useGoogleLogin } from "@react-oauth/google";
+import { useHistory } from "react-router";
+import {
+    useRequestCodeMutation,
+    useVerifyTokenMutation,
+    useSsoLoginMutation,
+} from "../services";
+import { useAppDispatch, useAppSelector } from "../store/hooks";
+import * as userStore from "../store/slices/user";
+import { EAuthMethod, EAuthState, TUserAccess } from "../types";
+import { Logger } from "../utils/logging";
+
+interface IUseAuth {
+    isAuthenticated: boolean;
+    authState: TUserAccess;
+    openAuthModal: () => void;
+    resetAuthState: () => void;
+    requestCode: (email: string) => Promise<void>;
+    verifyToken: (email: string, code: string) => Promise<void>;
+    ssoLogin: (provider: EAuthMethod) => void;
+}
+
+/**
+ * useAuth
+ *
+ * @returns
+ */
+export const useAuth = (): IUseAuth => {
+    const dispatch = useAppDispatch();
+    const authState = useAppSelector(userStore.selectAuthState);
+    const isAuthenticated = useAppSelector(userStore.selectIsAuthenticated);
+    const navigate = useHistory();
+
+    const [requestCodeMut] = useRequestCodeMutation();
+    const [verifyTokenMut] = useVerifyTokenMutation();
+    const [ssoLoginMut] = useSsoLoginMutation();
+
+    const openAuthModal = useCallback(() => {
+        dispatch(userStore.initAuthMethodSelection());
+    }, [dispatch]);
+
+    const requestCode = useCallback(
+        async (email: string) => {
+            try {
+                await requestCodeMut({ email }).unwrap();
+                dispatch(userStore.setAuthState(EAuthState.VerifyingEmail));
+            } catch (e) {
+                Logger.error(
+                    "useAuth::requestCode: error sending OTP to email",
+                    e
+                );
+            }
+        },
+        [dispatch, requestCodeMut]
+    );
+
+    const verifyToken = useCallback(
+        async (email: string, code: string) => {
+            try {
+                const verifyResp = await verifyTokenMut({
+                    email,
+                    code,
+                }).unwrap();
+
+                dispatch(
+                    userStore.setAuthToken({ value: verifyResp.accessToken })
+                );
+            } catch (e) {
+                Logger.error("useAuth::verifyToken: error verifying OTP", e);
+            }
+        },
+        [dispatch, verifyTokenMut]
+    );
+
+    const googleSSOCallback = useCallback(
+        ({ access_token }: Record<string, string>) => {
+            ssoLoginMut({
+                accessToken: access_token,
+                provider: EAuthMethod.Google,
+            })
+                .unwrap()
+                .then((r) => {
+                    Logger.debug("useAuth::googleSSOLogin: success", r);
+                    dispatch(userStore.setAuthToken({ value: r.accessToken }));
+                    dispatch(userStore.setAuthState(EAuthState.Verified));
+                    Logger.debug("useAuth::googleSSOLogin: redirecting");
+                    navigate.push("/");
+                })
+                .catch((e) =>
+                    Logger.error("useAuth::googleSSOLogin: error", e)
+                );
+        },
+        [ssoLoginMut, dispatch, navigate]
+    );
+
+    const googleSSOLogin = useGoogleLogin({
+        onSuccess: googleSSOCallback,
+        redirect_uri: `${window.location.origin}/auth/google_callback/`,
+    });
+    const ssoLogin = useCallback(
+        (provider: EAuthMethod) => {
+            if (provider === EAuthMethod.Google) {
+                googleSSOLogin();
+            }
+        },
+        [googleSSOLogin]
+    );
+
+    const resetAuthState = useCallback(() => {
+        dispatch(userStore.resetAuthState());
+    }, [dispatch]);
+
+    return {
+        isAuthenticated,
+        authState,
+        openAuthModal,
+        resetAuthState,
+        requestCode,
+        verifyToken,
+        ssoLogin,
+    };
+};

packages/frontend/src/api/services/auth/authEndpoints.ts

@@ -0,0 +1,91 @@
+import { EAuthMethod } from "src/api/types";
+import { Logger } from "src/api/utils/logging";
+import CONFIG from "src/config";
+import { alphadayApi } from "../alphadayApi";
+import {
+    TVerificationCodeRequest,
+    TVerificationCodeResponse,
+    TVerifyEmailRequest,
+    TVerifyEmailRawResponse,
+    TVerifyEmailResponse,
+    TSSOLoginRequest,
+    TSSOLoginRawResponse,
+    TSSOLoginResponse,
+} from "./types";
+
+const { AUTH } = CONFIG.API.DEFAULT.ROUTES;
+
+export const authApi = alphadayApi.injectEndpoints({
+    endpoints: (builder) => ({
+        requestCode: builder.mutation<
+            TVerificationCodeResponse,
+            TVerificationCodeRequest
+        >({
+            query: (req) => {
+                const path = `${AUTH.BASE}${AUTH.VERIFY_EMAIL}`;
+                Logger.debug("requestCode: body", JSON.stringify(req));
+                Logger.debug("requestCode: querying", path);
+                return {
+                    url: path,
+                    body: req,
+                    method: "POST",
+                };
+            },
+        }),
+        verifyToken: builder.mutation<
+            TVerifyEmailResponse,
+            TVerifyEmailRequest
+        >({
+            query: (req) => {
+                const path = `${AUTH.BASE}${AUTH.VERIFY_TOKEN}`;
+                Logger.debug("verifyToken: body", JSON.stringify(req));
+                Logger.debug("verifyToken: querying", path);
+                return {
+                    url: path,
+                    body: req,
+                    method: "POST",
+                };
+            },
+            transformResponse: (rawResult: TVerifyEmailRawResponse) => {
+                return {
+                    accessToken: rawResult.access_token,
+                    refreshToken: rawResult.refresh_token,
+                };
+            },
+        }),
+        ssoLogin: builder.mutation<TSSOLoginResponse, TSSOLoginRequest>({
+            query: (req) => {
+                const path = `${AUTH.BASE}${AUTH.CONVERT_TOKEN}`;
+                Logger.debug("ssoLogin: body", JSON.stringify(req));
+                Logger.debug("ssoLogin: querying", path);
+                return {
+                    url: path,
+                    body: {
+                        grant_type: "convert_token",
+                        backend:
+                            req.provider === EAuthMethod.Google
+                                ? "google-oauth2"
+                                : "apple",
+                        token: req.accessToken,
+                        client_id: CONFIG.APP.X_APP_ID,
+                        client_secret: CONFIG.APP.X_APP_SECRET,
+                    },
+                    method: "POST",
+                };
+            },
+            transformResponse: (rawResult: TSSOLoginRawResponse) => {
+                return {
+                    accessToken: rawResult.access_token,
+                    refreshToken: rawResult.refresh_token,
+                };
+            },
+        }),
+    }),
+    overrideExisting: false,
+});
+
+export const {
+    useRequestCodeMutation,
+    useVerifyTokenMutation,
+    useSsoLoginMutation,
+} = authApi;

packages/frontend/src/api/services/auth/types.ts

@@ -0,0 +1,39 @@
+import { EAuthMethod } from "src/api/types";
+
+export type TVerificationCodeRequest = {
+    email: string;
+};
+
+export type TVerificationCodeResponse = void;
+
+export type TVerifyEmailRequest = {
+    email: string;
+    code: string;
+};
+
+export type TVerifyEmailResponse = {
+    accessToken: string;
+    refreshToken: string;
+};
+
+export type TVerifyEmailRawResponse = {
+    access_token: string;
+    refresh_token: string;
+};
+
+export type TSSOLoginRequest = {
+    accessToken: string;
+    provider: EAuthMethod;
+    idToken?: string;
+    code?: string;
+};
+
+export type TSSOLoginRawResponse = {
+    access_token: string;
+    refresh_token: string;
+};
+
+export type TSSOLoginResponse = {
+    accessToken: string;
+    refreshToken: string;
+};

packages/frontend/src/api/services/index.ts

@@ -75,6 +75,9 @@ export * from "./lens-feed/types";
 export * from "./features/featuresEndpoints";
 export * from "./features/types";
 
+export * from "./auth/authEndpoints";
+export * from "./auth/types";
+
 /**
  * alphadayApi export should be last
  */