More improvements

packages/toolpad-app/src/appDom/index.ts

@@ -13,7 +13,7 @@ import invariant from 'invariant';
 import { BoxProps, ThemeOptions as MuiThemeOptions } from '@mui/material';
 import { guessTitle, pascalCase, removeDiacritics, uncapitalize } from '@mui/toolpad-utils/strings';
 import { mapProperties, mapValues, hasOwnProperty } from '@mui/toolpad-utils/collections';
-import { AuthProvider, ConnectionStatus } from '../types';
+import { AuthProviderConfig, ConnectionStatus } from '../types';
 import { omit, update, updateOrCreate } from '../utils/immutability';
 import { ExactEntriesOf, Maybe } from '../utils/types';
 import { envBindingSchema } from '../server/schema';
@@ -58,7 +58,7 @@ export interface AppNode extends AppDomNodeBase {
   readonly parentId: null;
   readonly attributes: {
     readonly authentication?: {
-      readonly providers?: AuthProvider[];
+      readonly providers?: AuthProviderConfig[];
     };
     readonly authorization?: {
       readonly roles?: {

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

@@ -16,14 +16,14 @@ export default function SignInPage() {
   const { signIn, isSigningIn } = React.useContext(AuthContext);
 
   const [errorSnackbarMessage, setErrorSnackbarMessage] = React.useState<string>('');
-  const [latestSelectedProvider, setLatestSelectedProvider] = React.useState<
-    AuthProvider['provider'] | null
-  >(null);
+  const [latestSelectedProvider, setLatestSelectedProvider] = React.useState<AuthProvider | null>(
+    null,
+  );
 
-  const { authProviders: authProviderConfigs } = React.useContext(AuthContext);
+  const { authProviders } = React.useContext(AuthContext);
 
   const handleSignIn = React.useCallback(
-    (provider: AuthProvider['provider']) => () => {
+    (provider: AuthProvider) => () => {
       setLatestSelectedProvider(provider);
       signIn(provider);
     },
@@ -48,11 +48,6 @@ export default function SignInPage() {
     setErrorSnackbarMessage('');
   }, []);
 
-  const authProviders = React.useMemo(
-    () => authProviderConfigs.map((providerConfig) => providerConfig.provider),
-    [authProviderConfigs],
-  );
-
   const productIcon = theme.palette.mode === 'dark' ? productIconDark : productIconLight;
 
   return (

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

@@ -8,7 +8,7 @@ export const AUTH_CSRF_PATH = `${AUTH_API_PATH}/csrf`;
 export const AUTH_SIGNIN_PATH = `${AUTH_API_PATH}/signin`;
 export const AUTH_SIGNOUT_PATH = `${AUTH_API_PATH}/signout`;
 
-export type AuthProvider = { provider: 'github' | 'google' };
+export type AuthProvider = 'github' | 'google';
 export interface AuthSession {
   user: {
     name: string;
@@ -20,7 +20,7 @@ export interface AuthSession {
 
 export interface AuthPayload {
   session: AuthSession | null;
-  signIn: (provider: AuthProvider['provider']) => void | Promise<void>;
+  signIn: (provider: AuthProvider) => void | Promise<void>;
   signOut: () => void | Promise<void>;
   isSigningIn: boolean;
   isSigningOut: boolean;
@@ -44,9 +44,11 @@ interface UseAuthInput {
 }
 
 export function useAuth({ dom, basename }: UseAuthInput): AuthPayload {
-  const app = appDom.getApp(dom);
-
-  const authProviders = app.attributes.authentication?.providers ?? [];
+  const authProviders = React.useMemo(() => {
+    const app = appDom.getApp(dom);
+    const authProviderConfigs = app.attributes.authentication?.providers ?? [];
+    return authProviderConfigs.map((providerConfig) => providerConfig.provider);
+  }, [dom]);
 
   const hasAuthentication = authProviders.length > 0;
 
@@ -101,7 +103,7 @@ export function useAuth({ dom, basename }: UseAuthInput): AuthPayload {
   }, [basename, signOut]);
 
   const signIn = React.useCallback(
-    async (provider: AuthProvider['provider']) => {
+    async (provider: AuthProvider) => {
       try {
         setIsSigningIn(true);
 

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

@@ -93,7 +93,6 @@ export async function createAuthPagesMiddleware(project: ToolpadProject) {
 
     if (
       hasAuthentication &&
-      req.originalUrl.startsWith(base) &&
       req.get('sec-fetch-dest') === 'document' &&
       req.originalUrl !== signInPath &&
       !req.originalUrl.startsWith(`${base}/api/auth`)

packages/toolpad-app/src/toolpad/AppEditor/AppAuthorizationEditor.tsx

@@ -33,7 +33,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import GoogleIcon from '@mui/icons-material/Google';
 import { useAppState, useAppStateApi } from '../AppState';
 import * as appDom from '../../appDom';
-import { AuthProvider } from '../../types';
+import { AuthProviderConfig, AuthProvider } from '../../types';
 
 const AUTH_PROVIDERS = new Map([
   ['github', { name: 'GitHub', Icon: GitHubIcon }],
@@ -314,7 +314,7 @@ export function AppAuthenticationEditor() {
   const appState = useAppStateApi();
 
   const handleAuthProvidersChange = React.useCallback(
-    (event: SelectChangeEvent<AuthProvider['provider'][]>) => {
+    (event: SelectChangeEvent<AuthProvider[]>) => {
       const {
         target: { value: providers },
       } = event;
@@ -325,7 +325,7 @@ export function AppAuthenticationEditor() {
         draft = appDom.setNodeNamespacedProp(draft, app, 'attributes', 'authentication', {
           ...app.attributes?.authentication,
           providers: (typeof providers === 'string' ? providers.split(',') : providers).map(
-            (provider) => ({ provider } as AuthProvider),
+            (provider) => ({ provider } as AuthProviderConfig),
           ),
         });
 
@@ -347,7 +347,7 @@ export function AppAuthenticationEditor() {
     <Stack direction="column">
       <FormControl>
         <InputLabel id="auth-providers-label">Authentication providers</InputLabel>
-        <Select<AuthProvider['provider'][]>
+        <Select<AuthProvider[]>
           labelId="auth-providers-label"
           label="Authentication providers"
           id="auth-providers"
@@ -364,7 +364,7 @@ export function AppAuthenticationEditor() {
           {[...AUTH_PROVIDERS].map(([value, { name, Icon }]) => (
             <MenuItem key={value} value={value}>
               <Stack direction="row" alignItems="center">
-                <Checkbox checked={authProviders.indexOf(value as AuthProvider['provider']) > -1} />
+                <Checkbox checked={authProviders.indexOf(value as AuthProvider) > -1} />
                 <Icon fontSize="small" />
                 <Typography ml={1}>{name}</Typography>
               </Stack>

packages/toolpad-app/src/types.ts

@@ -213,6 +213,8 @@ export interface ToolpadProjectOptions {
 
 export type CodeEditorFileType = 'resource' | 'component';
 
-export interface AuthProvider {
-  provider: 'github' | 'google';
+export type AuthProvider = 'github' | 'google';
+
+export interface AuthProviderConfig {
+  provider: AuthProvider;
 }