A customizable sign in UI component that abstracts away the pain needed to wire together a secure authentication page for your application.
+A customizable sign-in UI component that abstracts away the pain needed to wire together a secure authentication page for your application.
The `SignInPage` component is a quick way to generate a ready-to-use authentication page with multiple OAuth providers, or a credentials form. @@ -49,7 +49,7 @@ This renders an alert with the `error` string as the message. The component is composable with any authentication library you might want to use. The following is a `SignInPage` with [Auth.js](https://authjs.dev/) using GitHub, Next.js App router and server actions. -{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next.png", "alt": "Auth.js & Next.js with Toolpad Core sign in page", "caption": "Auth.js & Next.js app router with Toolpad Core Sign In page", "zoom": true, "indent": 1 }} +{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next.png", "alt": "Auth.js & Next.js with Toolpad Core sign-in page", "caption": "Auth.js & Next.js app router with Toolpad Core Sign-in page", "zoom": true, "indent": 1 }} #### Setting up @@ -61,7 +61,7 @@ To get the required credentials, create an application in the GitHub developer s ##### Server Configuration -The `SignInPage` component can slot in as a custom sign in page inside Auth.js: +The `SignInPage` component can slot in as a custom sign-in page inside Auth.js: ```ts title="./auth.ts" // ... @@ -74,7 +74,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({ // ... ``` -You can then have a fully built GitHub sign in page appear at `/auth/signin` by adding `SignInPage` to `page.tsx`: +You can then have a fully built GitHub sign-in page appear at `/auth/signin` by adding `SignInPage` to `page.tsx`: ```tsx title="./app/auth/signin/page.tsx" // ... @@ -127,7 +127,7 @@ export default function SignIn() { ``` :::info -If you're using the default [Next.js app directory example](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs/), all of this is already configured for you. Otherwise, follow the [custom sign in page instructions](https://authjs.dev/guides/pages/signin). +If you're using the default [Next.js app directory example](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs/), all of this is already configured for you. Otherwise, follow the [custom sign-in page instructions](https://authjs.dev/guides/pages/signin). ::: ## Customization diff --git a/docs/data/toolpad/core/pages.ts b/docs/data/toolpad/core/pages.ts index ded2cc7eaa3..6114ccbf359 100644 --- a/docs/data/toolpad/core/pages.ts +++ b/docs/data/toolpad/core/pages.ts @@ -63,7 +63,7 @@ const pages: MuiPage[] = [ }, { pathname: '/toolpad/core/react-sign-in-page', - title: 'Sign In Page', + title: 'Sign-in Page', }, { pathname: '/toolpad/core/react-account', diff --git a/docs/pages/toolpad/core/api/account.json b/docs/pages/toolpad/core/api/account.json index 82dc61ebcef..15e25043fb5 100644 --- a/docs/pages/toolpad/core/api/account.json +++ b/docs/pages/toolpad/core/api/account.json @@ -21,6 +21,6 @@ "muiName": "Account", "filename": "/packages/toolpad-core/src/Account/Account.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/toolpad/core/api/notifications-provider.json b/docs/pages/toolpad/core/api/notifications-provider.json index fd4f0305dc9..0f9fff077a2 100644 --- a/docs/pages/toolpad/core/api/notifications-provider.json +++ b/docs/pages/toolpad/core/api/notifications-provider.json @@ -16,6 +16,6 @@ "muiName": "NotificationsProvider", "filename": "/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/toolpad/core/api/sign-in-page.json b/docs/pages/toolpad/core/api/sign-in-page.json index ac51a1fbbd7..4621baecf70 100644 --- a/docs/pages/toolpad/core/api/sign-in-page.json +++ b/docs/pages/toolpad/core/api/sign-in-page.json @@ -39,6 +39,6 @@ "muiName": "SignInPage", "filename": "/packages/toolpad-core/src/SignInPage/SignInPage.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/packages/toolpad-core/src/Account/Account.tsx b/packages/toolpad-core/src/Account/Account.tsx index c073608ff70..e1b7991a33e 100644 --- a/packages/toolpad-core/src/Account/Account.tsx +++ b/packages/toolpad-core/src/Account/Account.tsx @@ -40,7 +40,7 @@ export interface AccountProps { * * - [Account](https://mui.com/toolpad/core/react-account/) * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/) - * - [Sign In Page](https://mui.com/toolpad/core/react-sign-in-page/) + * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/) * * API: * diff --git a/packages/toolpad-core/src/SignInPage/SignInPage.tsx b/packages/toolpad-core/src/SignInPage/SignInPage.tsx index 09f3e1cdfa5..718d6dc59b8 100644 --- a/packages/toolpad-core/src/SignInPage/SignInPage.tsx +++ b/packages/toolpad-core/src/SignInPage/SignInPage.tsx @@ -151,7 +151,7 @@ export interface SignInPageProps { * * Demos: * - * - [Sign In Page](https://mui.com/toolpad/core/react-sign-in-page/) + * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/) * * API: * diff --git a/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx b/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx index 330e8fbc886..af37a13285c 100644 --- a/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx +++ b/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx @@ -149,7 +149,7 @@ let nextId = 1; * * Demos: * - * - [Sign In Page](https://mui.com/toolpad/core/react-sign-in-page/) + * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/) * - [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) * * API: