authTwa, router udpate > protectedLayout

src/app/router/index.tsx

@@ -3,21 +3,32 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Routes } from "~/app/router/constants";
 import { RootPage } from "~/pages/root";
 import { ViewContentPage } from "~/pages/view-content";
+import { ProtectedLayout } from "./protected-layout";
 
 const router = createBrowserRouter([
-  { path: Routes.Root, element: <RootPage /> },
+  {
-  { path: Routes.ViewContent, element: <ViewContentPage /> },
+    element: <ProtectedLayout />,
-  { path: Routes.SentryCheck, element: <div className="flex justify-center items-center h-screen">
+    children: [
-    <button
+      { path: Routes.Root, element: <RootPage /> },
-    type="button"
+      { path: Routes.ViewContent, element: <ViewContentPage /> },
-    className="btn btn-primary p-2 border bg-red-900"
+      { 
-    onClick={() => {
+        path: Routes.SentryCheck, 
-      throw new Error("Sentry Test Error");
+        element: (
-    }}
+          <div className="flex h-screen items-center justify-center">
-  >
+            <button
-    Sentry Test Error
+              type="button"
-  </button>
+              className="btn btn-primary border bg-red-900 p-2"
-  </div> },
+              onClick={() => {
+                throw new Error("Sentry Test Error");
+              }}
+            >
+              Sentry Test Error
+            </button>
+          </div>
+        ),
+      },
+    ],
+  },
 ]);
 
 export const AppRouter = () => {

src/app/router/protected-layout/index.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { useAuthTwa } from '~/shared/services/authTwa';
+
+export const ProtectedLayout = () => {
+  const auth = useAuthTwa();
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+
+  useEffect(() => {
+    void auth.mutateAsync().finally(() => {
+      setIsInitialLoad(false);
+    });
+  }, []);
+
+  if (isInitialLoad || auth.isLoading) {
+    return null;
+  }
+
+  return <Outlet />;
+};

src/pages/root/steps/welcome-step/index.tsx

@@ -102,7 +102,7 @@ export const WelcomeStep = ({ nextStep }: WelcomeStepProps) => {
       <section
         className={"relative flex h-[100vh] items-center justify-center"}
       >
-        <img alt={"splash"} className={"mb-20 h-[400px]"} src={"/splash.gif"} />
+        <img alt={"splash"} className={"mb-20 w-[50%]"} src={"/splash.gif"} />
       </section>
     );
   }
@@ -112,7 +112,7 @@ export const WelcomeStep = ({ nextStep }: WelcomeStepProps) => {
       <div className="flex items-center justify-center overflow-hidden w-[100%] h-[400px]">
         <img
           alt={"splash"}
-          className={" w-full shrink-0"}
+          className={"w-[50%] shrink-0"}
           src={"/splash.gif"}
         />
       </div>

src/shared/services/authTwa/index.ts

@@ -0,0 +1,26 @@
+import { useMutation } from "react-query";
+import { request } from "~/shared/libs";
+import { useWebApp } from "@vkruglikov/react-telegram-web-app";
+
+const sessionStorageKey = "auth_v1_token";
+
+export const useAuthTwa = () => {
+  const WebApp = useWebApp();
+
+  const makeAuthRequest = async () => {
+    const res = await request.post<{
+      auth_v1_token: string;
+    }>("/auth.twa", {
+      twa_data: WebApp.initData,
+    });
+
+    if (res?.data?.auth_v1_token) {
+      localStorage.setItem(sessionStorageKey, res.data.auth_v1_token);
+    } else {
+      throw new Error("Failed to get auth token");
+    }
+    return res;
+  };
+
+  return useMutation(["auth"], makeAuthRequest);
+};