feat(auth): User profile and viewer context (#4480)

* viewer node

* feat(auth): rudamentary viewer context and profile page

app/package.json

@@ -88,7 +88,7 @@
     "build:relay": "relay-compiler",
     "test": "jest --config ./jest.config.js",
     "dev": "pnpm run dev:server:init & pnpm run build:static && pnpm run build:relay && vite",
-    "dev:auth": "export DANGEROUSLY_SET_PHOENIX_ENABLE_AUTH=true && export DANGEROUSLY_SET_PHOENIX_SECRET=secret && pnpm run dev:server & pnpm run build:static && pnpm run build:relay && vite",
+    "dev:auth": "export DANGEROUSLY_SET_PHOENIX_ENABLE_AUTH=true && export DANGEROUSLY_SET_PHOENIX_SECRET=secretsecretsecretsecretsecretsecretsecret1 && pnpm run dev:server & pnpm run build:static && pnpm run build:relay && vite",
     "dev:ui": "pnpm run build:static && pnpm run build:relay && vite",
     "dev:server:init": "python -m phoenix.server.main --dev serve --with-fixture=chatbot --with-project=demo_llama_index --force-fixture-ingestion",
     "dev:server": "python -m phoenix.server.main --dev serve",

app/src/Routes.tsx

@@ -7,6 +7,8 @@ import { embeddingLoaderQuery$data } from "./pages/embedding/__generated__/embed
 import { projectLoaderQuery$data } from "./pages/project/__generated__/projectLoaderQuery.graphql";
 import {
   APIsPage,
+  AuthenticatedRoot,
+  authenticatedRootLoader,
   datasetLoader,
   DatasetPage,
   DatasetsPage,
@@ -23,7 +25,6 @@ import {
   experimentsLoader,
   ExperimentsPage,
   homeLoader,
-  Layout,
   LoginPage,
   ModelPage,
   ModelRoot,
@@ -41,7 +42,7 @@ const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" errorElement={<ErrorElement />}>
       <Route path="/login" element={<LoginPage />} />
-      <Route element={<Layout />}>
+      <Route element={<AuthenticatedRoot />} loader={authenticatedRootLoader}>
         <Route
           path="/profile"
           handle={{ crumb: () => "profile" }}

app/src/contexts/ViewerContext.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { graphql, useRefetchableFragment } from "react-relay";
+
+import {
+  ViewerContext_viewer$data,
+  ViewerContext_viewer$key,
+} from "./__generated__/ViewerContext_viewer.graphql";
+
+export type ViewerContextType = {
+  viewer: ViewerContext_viewer$data["viewer"];
+};
+
+export const ViewerContext = React.createContext<ViewerContextType>({
+  viewer: null,
+});
+
+export function useViewer() {
+  const context = React.useContext(ViewerContext);
+  if (context == null) {
+    throw new Error("useViewer must be used within a ViewerProvider");
+  }
+  return context;
+}
+
+export function ViewerProvider({
+  query,
+  children,
+}: React.PropsWithChildren<{
+  query: ViewerContext_viewer$key;
+}>) {
+  const [data] = useRefetchableFragment(
+    graphql`
+      fragment ViewerContext_viewer on Query
+      @refetchable(queryName: "ViewerContextRefetchQuery") {
+        viewer {
+          id
+          username
+          email
+          role {
+            name
+          }
+        }
+      }
+    `,
+    query
+  );
+  return (
+    <ViewerContext.Provider value={{ viewer: data.viewer }}>
+      {children}
+    </ViewerContext.Provider>
+  );
+}

app/src/pages/AuthenticatedRoot.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useLoaderData } from "react-router";
+
+import { ViewerProvider } from "@phoenix/contexts/ViewerContext";
+
+import { authenticatedRootLoaderQuery$data } from "./__generated__/authenticatedRootLoaderQuery.graphql";
+import { Layout } from "./Layout";
+
+/**
+ * The root of the authenticated application. Note that authentication might be entirely disabled
+ */
+export function AuthenticatedRoot() {
+  const loaderData = useLoaderData() as authenticatedRootLoaderQuery$data;
+  return (
+    <ViewerProvider query={loaderData}>
+      <Layout />
+    </ViewerProvider>
+  );
+}