[core] Add authentication to Toolpad Core

.eslintignore

@@ -16,3 +16,4 @@ build
 
 .generated
 .github
+.coverage

docs/data/toolpad/core/all-components/all-components.md

@@ -3,5 +3,7 @@
 <p class="description">This page contains an index to the components included in Toolpad Core.</p>
 
 - [App Provider](/toolpad/core/react-app-provider/)
+- [Account](/toolpad/core/react-account/)
 - [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
 - [Data Grid](/toolpad/core/react-data-grid/)
+- [Sign In Page](/toolpad/core/react-sign-in-page/)

docs/data/toolpad/core/components/account/AccountCustom.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+
+export default function AccountCustom() {
+  const [session, setSession] = React.useState(null);
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: '[email protected]',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    // preview-start
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        <Account
+          slotProps={{
+            signInButton: {
+              color: 'info',
+              variant: 'outlined',
+              sx: {
+                color: 'primaryDark',
+                fontFamily: 'Inter',
+                fontSize: '1em',
+              },
+            },
+            signOutButton: { color: 'primary', variant: 'outlined' },
+          }}
+          signInLabel="Login"
+          signOutLabel="Logout"
+        />
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/account/AccountCustom.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+  Account,
+  AuthenticationContext,
+  SessionContext,
+  Session,
+} from '@toolpad/core';
+
+export default function AccountCustom() {
+  const [session, setSession] = React.useState<Session | null>(null);
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: '[email protected]',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    // preview-start
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        <Account
+          slotProps={{
+            signInButton: {
+              color: 'info',
+              variant: 'outlined',
+              sx: {
+                color: 'primaryDark',
+                fontFamily: 'Inter',
+                fontSize: '1em',
+              },
+            },
+            signOutButton: { color: 'primary', variant: 'outlined' },
+          }}
+          signInLabel="Login"
+          signOutLabel="Logout"
+        />
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+    // preview-end
+  );
+}

docs/data/toolpad/core/components/account/AccountCustom.tsx.preview

@@ -0,0 +1,20 @@
+<AuthenticationContext.Provider value={authentication}>
+  <SessionContext.Provider value={session}>
+    <Account
+      slotProps={{
+        signInButton: {
+          color: 'info',
+          variant: 'outlined',
+          sx: {
+            color: 'primaryDark',
+            fontFamily: 'Inter',
+            fontSize: '1em',
+          },
+        },
+        signOutButton: { color: 'primary', variant: 'outlined' },
+      }}
+      signInLabel="Login"
+      signOutLabel="Logout"
+    />
+  </SessionContext.Provider>
+</AuthenticationContext.Provider>

docs/data/toolpad/core/components/account/AccountDemo.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+
+export default function AccountDemo() {
+  const [session, setSession] = React.useState(null);
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: '[email protected]',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        <Account />
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}

docs/data/toolpad/core/components/account/AccountDemo.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  Account,
+  AuthenticationContext,
+  SessionContext,
+  Session,
+} from '@toolpad/core';
+
+export default function AccountDemo() {
+  const [session, setSession] = React.useState<Session | null>(null);
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: '[email protected]',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        <Account />
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}

docs/data/toolpad/core/components/account/AccountDemo.tsx.preview

@@ -0,0 +1,5 @@
+<AuthenticationContext.Provider value={authentication}>
+  <SessionContext.Provider value={session}>
+    <Account />
+  </SessionContext.Provider>
+</AuthenticationContext.Provider>

docs/data/toolpad/core/components/account/AccountWithDashboard.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { AppProvider, DashboardLayout } from '@toolpad/core';
+
+export default function AccountWithDashboard() {
+  const [session, setSession] = React.useState({
+    user: {
+      name: 'Bharat Kashyap',
+      email: '[email protected]',
+      image: 'https://avatars.githubusercontent.com/u/19550456',
+    },
+  });
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: '[email protected]',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AppProvider session={session} authentication={authentication}>
+      <DashboardLayout>
+        <Box sx={{ px: 6, py: 2 }}>Dashboard content</Box>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/account/AccountWithDashboard.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { Session, AppProvider, DashboardLayout } from '@toolpad/core';
+
+export default function AccountWithDashboard() {
+  const [session, setSession] = React.useState<Session | null>({
+    user: {
+      name: 'Bharat Kashyap',
+      email: '[email protected]',
+      image: 'https://avatars.githubusercontent.com/u/19550456',
+    },
+  });
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: '[email protected]',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AppProvider session={session} authentication={authentication}>
+      <DashboardLayout>
+        <Box sx={{ px: 6, py: 2 }}>Dashboard content</Box>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/account/AccountWithDashboard.tsx.preview

@@ -0,0 +1,3 @@
+<DashboardLayout>
+  <Box sx={{ px: 6, py: 2 }}>Dashboard content</Box>
+</DashboardLayout>

docs/data/toolpad/core/components/account/account.md

@@ -0,0 +1,29 @@
+---
+productId: toolpad-core
+title: Account
+components: Account
+---
+
+# Account
+
+<p class="description">A component that renders an account management dropdown for your application.</p>
+
+The `Account` component is a quick and easy way to display an account management menu for authenticated users. It is deeply integrated with the `SignInPage` and `DashboardLayout` components, meaning that it automatically appears in the top navigation bar inside `DashboardLayout` once your users have signed in through the `SignInPage`.
+
+## States
+
+When signed out, the component renders as an inline sign in button within the dashboard layout. If a `session` object is present, the component is rendered as a dropdown containing the user's account details as well as an option to sign out.
+
+{{"demo": "AccountDemo.js", "bg": "gradient" }}
+
+## Customization
+
+### Components
+
+`Account` can take different labels for the sign in and sign out buttons through the `signInLabel` and `signOutLabel` props. Deeper changes can be made by passing in `slotProps` to the underlying components.
+
+{{"demo": "AccountCustom.js", "bg": "gradient" }}
+
+### 🚧 Composition
+
+The `Account` component allows adding your own menu options, including deeply nested options. This is in progress.

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

@@ -1,7 +1,7 @@
 ---
 productId: toolpad-core
 title: Dashboard Layout
-components: AppProvider, DashboardLayout
+components: AppProvider, DashboardLayout, Account
 ---
 
 # Dashboard Layout
@@ -50,3 +50,13 @@ The main navigation items that can be used are:
 Navigation links have an optional `action` prop that can be used to render any content on the right-side of the respective list item, such as badges with numbers, or buttons to toggle a popover menu.
 
 {{"demo": "DashboardLayoutNavigationActions.js", "height": 500, "iframe": true}}
+
+## Account
+
+The `DashboardLayout` comes integrated with the [`<Account />`](/toolpad/core/react-account/) component. It renders as an account management menu when a user is signed in – a `session` object is present – and a button when not.
+
+:::warning
+The use of an `iframe` may cause some spacing issues in the following demo.
+:::
+
+{{"demo": "../account/AccountWithDashboard.js", "iframe": true, "height": 320 }}

docs/data/toolpad/core/components/sign-in-page/AuthJsSignInApp.js

@@ -0,0 +1,46 @@
+/* eslint-disable import/no-unresolved */
+
+import * as React from 'react';
+import { AuthError } from 'next-auth';
+
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { providerMap, signIn } from './auth';
+
+export default function AuthJsSignInApp() {
+  return (
+    <SignInPage
+      providers={providerMap}
+      signIn={async (provider, formData, callbackUrl) => {
+        'use server';
+        try {
+          return await signIn(provider.id, {
+            ...(formData && {
+              email: formData.get('email'),
+              password: formData.get('password'),
+            }),
+            redirectTo: callbackUrl ?? '/',
+          });
+        } catch (error) {
+          if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+            throw error;
+          }
+          // Handle Auth.js errors
+          if (error instanceof AuthError) {
+            return {
+              error:
+                error.type === 'CredentialsSignin'
+                  ? 'Invalid credentials.'
+                  : 'An error with Auth.js occurred.',
+              type: error.type,
+            };
+          }
+          // An error boundary must exist to handle unknown errors
+          return {
+            error: 'Something went wrong.',
+            type: 'UnknownError',
+          };
+        }
+      }}
+    />
+  );
+}