Add authenticated session to app server context

docs/data/toolpad/concepts/custom-functions.md

@@ -174,3 +174,16 @@ export async function getData() {
  return api.getData(token);
 }
 ```
+
+### Get the current authenticated session with `context.session`
+
+If your Toolpad app has [authentication](/toolpad/concepts/authentication/) enabled, you can get data from the authenticated session, such as the logged-in user's `email`, `name` or `avatar`. Example:
+
+```jsx
+import { getContext } from '@mui/toolpad/server';
+
+export async function getCurrentUserEmail() {
+ const { session } = getContext();
+ return session?.user.email;
+}
+```

docs/data/toolpad/reference/api/get-context.md

@@ -33,14 +33,26 @@ a `ServerContext` containing information on the context the backend function was
 
 ### ServerContext
 
-This described a certain context under which a backend function was called.
+This describes a certain context under which a backend function was called.
 
 **Properties**
 
-| Name | Type | Description |
-| :---------- | :-------------------------------------- | :------------------------------------------------ |
-| `cookies` | `Record<string, string>` | A dictionary mapping cookie name to cookie value. |
-| `setCookie` | `(name: string, value: string) => void` | Use to set a cookie `name` with `value`. |
+| Name | Type | Description |
+| :---------- | :------------------------------------------- | :--------------------------------------------------------------------------- |
+| `cookies` | `Record<string, string>` | A dictionary mapping cookie name to cookie value. |
+| `setCookie` | `(name: string, value: string) => void` | Use to set a cookie `name` with `value`. |
+| `session` | `{ user: ServerContextSessionUser } \| null` | Get current [authenticated](/toolpad/concepts/authentication/) session data. |
+
+### ServerContextSessionUser
+
+**Properties**
+
+| Name | Type | Description |
+| :-------- | :--------------- | :---------------------------------------------------------- |
+| `name?` | `string \| null` | Logged-in user name. |
+| `email?` | `string \| null` | Logged-in user email. |
+| `avatar?` | `string \| null` | Logged-in user avatar image URL. |
+| `roles` | `string[]` | Logged-in user [roles](/toolpad/concepts/rbac/) in Toolpad. |
 
 ## Usage
 

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -1662,7 +1662,8 @@ export function ToolpadAppProvider({
  (window as any).toggleDevtools = () => toggleDevtools();
  }, [toggleDevtools]);
 
- const authContext = useAuth({ dom, basename, signInPagePath: `${basename}/signin` });
+ const authContext = useAuth({ dom, basename, signInPagePath: '/signin' });
+
  const appHost = useNonNullableContext(AppHostContext);
  const showPreviewHeader = shouldShowPreviewHeader(appHost);
 

packages/toolpad-app/src/runtime/useAuth.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as appDom from '@mui/toolpad-core/appDom';
 import { useNonNullableContext } from '@mui/toolpad-utils/react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { AppHostContext } from './AppHostContext';
 
 const AUTH_API_PATH = '/api/auth';
@@ -52,10 +53,13 @@ export const AuthContext = React.createContext<AuthPayload>({
 interface UseAuthInput {
  dom: appDom.RenderTree;
  basename: string;
- signInPagePath?: string;
+ signInPagePath: string;
 }
 
 export function useAuth({ dom, basename, signInPagePath }: UseAuthInput): AuthPayload {
+ const location = useLocation();
+ const navigate = useNavigate();
+
  const authProviders = React.useMemo(() => {
  const app = appDom.getApp(dom);
  const authProviderConfigs = app.attributes.authentication?.providers ?? [];
@@ -107,10 +111,10 @@ export function useAuth({ dom, basename, signInPagePath }: UseAuthInput): AuthPa
  setSession(null);
  setIsSigningOut(false);
 
- if (!signInPagePath || window.location.pathname !== signInPagePath) {
- window.location.href = `${basename}${AUTH_SIGNIN_PATH}`;
+ if (location.pathname !== signInPagePath) {
+ navigate(signInPagePath);
  }
- }, [basename, getCsrfToken, signInPagePath]);
+ }, [basename, getCsrfToken, location.pathname, navigate, signInPagePath]);
 
  const getSession = React.useCallback(async () => {
  setIsSigningIn(true);

packages/toolpad-app/src/server/DataManager.ts

@@ -198,7 +198,7 @@ export default class DataManager {
  invariant(typeof pageName === 'string', 'pageName url param required');
  invariant(typeof queryName === 'string', 'queryName url variable required');
 
- const ctx = createServerContext(req, res);
+ const ctx = await createServerContext(req, res);
  const result = await withContext(ctx, async () => {
  return this.execQuery(pageName, queryName, req.body);
  });

packages/toolpad-app/src/server/auth.ts

@@ -8,9 +8,9 @@ import { AuthConfig, TokenSet } from '@auth/core/types';
 import { OAuthConfig } from '@auth/core/providers';
 import chalk from 'chalk';
 import * as appDom from '@mui/toolpad-core/appDom';
-import { JWT, getToken } from '@auth/core/jwt';
+import { adaptRequestFromExpressToFetch } from '@mui/toolpad-utils/httpApiAdapters';
+import { getUserToken } from '@mui/toolpad-core/auth';
 import { asyncHandler } from '../utils/express';
-import { adaptRequestFromExpressToFetch } from './httpApiAdapters';
 import type { ToolpadProject } from './localMode';
 
 const SKIP_VERIFICATION_PROVIDERS: appDom.AuthProvider[] = [
@@ -35,23 +35,6 @@ export async function getRequireAuthentication(project: ToolpadProject): Promise
  return authProviders.length > 0;
 }
 
-export async function getUserToken(req: express.Request): Promise<JWT | null> {
- let token = null;
- if (process.env.TOOLPAD_AUTH_SECRET) {
- const request = adaptRequestFromExpressToFetch(req);
-
- // @TODO: Library types are wrong as salt should not be required, remove once fixed
- // Github discussion: https://github.com/nextauthjs/next-auth/discussions/9133
- // @ts-ignore
- token = await getToken({
- req: request,
- secret: process.env.TOOLPAD_AUTH_SECRET,
- });
- }
-
- return token;
-}
-
 function getMappedRoles(
  roles: string[],
  allRoles: string[],

packages/toolpad-app/src/server/rpc.ts

@@ -74,7 +74,7 @@ export function createRpcHandler(definition: MethodResolvers): express.RequestHa
  let rawResult;
  let error: Error | null = null;
  try {
- const ctx = createServerContext(req, res);
+ const ctx = await createServerContext(req, res);
  rawResult = await withContext(ctx, async () => {
  return method({ params, req, res });
  });

packages/toolpad-core/package.json

@@ -42,6 +42,7 @@
  "url": "https://github.com/mui/mui-toolpad/issues"
  },
  "dependencies": {
+ "@auth/core": "0.25.1",
  "@mui/material": "5.15.10",
  "@mui/toolpad-utils": "workspace:*",
  "@tanstack/react-query": "5.18.1",
@@ -57,6 +58,7 @@
  },
  "devDependencies": {
  "@types/cookie": "0.6.0",
+ "@types/express": "4.17.21",
  "@types/invariant": "2.2.37",
  "@types/react": "18.2.55",
  "@types/react-is": "18.2.4",

packages/toolpad-core/src/auth.ts

@@ -0,0 +1,20 @@
+import type express from 'express';
+import { JWT, getToken } from '@auth/core/jwt';
+import { adaptRequestFromExpressToFetch } from '@mui/toolpad-utils/httpApiAdapters';
+
+export async function getUserToken(req: express.Request): Promise<JWT | null> {
+ let token = null;
+ if (process.env.TOOLPAD_AUTH_SECRET) {
+ const request = adaptRequestFromExpressToFetch(req);
+
+ // @TODO: Library types are wrong as salt should not be required, remove once fixed
+ // Github discussion: https://github.com/nextauthjs/next-auth/discussions/9133
+ // @ts-ignore
+ token = await getToken({
+ req: request,
+ secret: process.env.TOOLPAD_AUTH_SECRET,
+ });
+ }
+
+ return token;
+}

packages/toolpad-core/src/serverRuntime.ts

@@ -2,6 +2,15 @@ import { AsyncLocalStorage } from 'node:async_hooks';
 import { IncomingMessage, ServerResponse } from 'node:http';
 import * as cookie from 'cookie';
 import { isWebContainer } from '@webcontainer/env';
+import type express from 'express';
+import { getUserToken } from './auth';
+
+interface ServerContextSessionUser {
+ name?: string | null;
+ email?: string | null;
+ avatar?: string | null;
+ roles?: string[];
+}
 
 export interface ServerContext {
  /**
@@ -12,6 +21,10 @@ export interface ServerContext {
  * Use to set a cookie `name` with `value`.
  */
  setCookie: (name: string, value: string) => void;
+ /**
+ * Data about current authenticated session.
+ */
+ session: { user: ServerContextSessionUser } | null;
 }
 
 const contextStore = new AsyncLocalStorage<ServerContext>();
@@ -20,13 +33,28 @@ export function getServerContext(): ServerContext | undefined {
  return contextStore.getStore();
 }
 
-export function createServerContext(req: IncomingMessage, res: ServerResponse): ServerContext {
+export async function createServerContext(
+ req: IncomingMessage,
+ res: ServerResponse,
+): Promise<ServerContext> {
  const cookies = cookie.parse(req.headers.cookie || '');
+
+ const token = await getUserToken(req as express.Request);
+ const session = token && {
+ user: {
+ name: token.name,
+ email: token.email,
+ avatar: token.picture,
+ roles: token.roles,
+ },
+ };
+
  return {
  cookies,
  setCookie(name, value) {
  res.setHeader('Set-Cookie', cookie.serialize(name, value, { path: '/' }));
  },
+ session,
  };
 }
 

packages/toolpad-core/tsconfig.json

@@ -12,5 +12,5 @@
  "pretty": true,
  "preserveWatchOutput": true
  },
- "include": ["src/**/*.ts", "src/**/*.tsx", "public/serverModules.d.ts"]
+ "include": ["src/**/*.ts", "src/**/*.tsx", "public/serverModules.d.ts", "typings/**/*.d.ts"]
 }

packages/toolpad-core/typings/@auth.d.ts

@@ -0,0 +1,10 @@
+export declare module '@auth/core/types' {
+ interface User {
+ roles: string[];
+ }
+}
+export declare module '@auth/core/jwt' {
+ interface JWT {
+ roles: string[];
+ }
+}

packages/toolpad-utils/package.json

@@ -65,6 +65,7 @@
  "yaml-diff-patch": "2.0.0"
  },
  "devDependencies": {
+ "@types/express": "4.17.21",
  "@types/invariant": "2.2.37",
  "@types/prettier": "2.7.3",
  "@types/react": "18.2.55",

packages/toolpad-app/src/server/httpApiAdapters.ts → packages/toolpad-utils/src/httpApiAdapters.ts

@@ -1,14 +1,17 @@
-import express from 'express';
+import type express from 'express';
 
 export function encodeRequestBody(req: express.Request) {
  const contentType = req.headers['content-type'];
 
  if (typeof req.body === 'object' && contentType?.includes('application/x-www-form-urlencoded')) {
- return Object.entries(req.body as Record<string, any>).reduce((acc, [key, value]) => {
- const encKey = encodeURIComponent(key);
- const encValue = encodeURIComponent(value);
- return `${acc ? `${acc}&` : ''}${encKey}=${encValue}`;
- }, '');
+ return Object.entries(req.body as Record<string, string | number | boolean>).reduce(
+ (acc, [key, value]) => {
+ const encKey = encodeURIComponent(key);
+ const encValue = encodeURIComponent(value);
+ return `${acc ? `${acc}&` : ''}${encKey}=${encValue}`;
+ },
+ '',
+ );
  }
 
  if (contentType?.includes('application/json')) {

test/integration/auth/domain.spec.ts

@@ -8,6 +8,8 @@ const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 test.use({
  ignoreConsoleErrors: [
  /Failed to load resource: the server responded with a status of 401 \(Unauthorized\)/,
+ /NetworkError when attempting to fetch resource./,
+ /The operation was aborted./,
  ],
 });
 
@@ -41,7 +43,7 @@ test('Must be authenticated with valid domain to access app', async ({ page, req
  // Sign in with valid domain
  await tryCredentialsSignIn(page, 'mui', 'mui');
  await expect(page).toHaveURL(/\/prod\/pages\/mypage/);
- await expect(page.getByText('message: hello world')).toBeVisible();
+ await expect(page.getByText('my email: test@mui.com')).toBeVisible();
 
  // Is not redirected when authenticated
  await page.goto('/prod/pages/mypage');

test/integration/auth/fixture-domain/toolpad/pages/mypage/page.yml

@@ -12,9 +12,9 @@ spec:
  props:
  value:
  $$jsExpression: |
- `message: ${hello.data.message}`
+ `my email: ${getMySession.data.user.email}`
  queries:
- - name: hello
+ - name: getMySession
  query:
- function: hello
+ function: getMySession
  kind: local

test/integration/auth/fixture-domain/toolpad/resources/functions.ts

@@ -1,3 +1,6 @@
-export async function hello() {
- return { message: 'hello world' };
+import { getContext } from '@mui/toolpad/server';
+
+export async function getMySession() {
+ const context = getContext();
+ return context.session;
 }