{"id":15675364,"url":"https://github.com/timmikeladze/next-auth-mui","last_synced_at":"2025-10-15T20:07:05.102Z","repository":{"id":37021286,"uuid":"497284862","full_name":"TimMikeladze/next-auth-mui","owner":"TimMikeladze","description":"🔐 Sign-in dialog for NextAuth built with MUI and React. Detects configured OAuth and Email providers and renders buttons or input fields for each respectively. Fully themeable, extensible and customizable to support custom credential flows.","archived":false,"fork":false,"pushed_at":"2023-03-18T23:57:51.000Z","size":3254,"stargazers_count":12,"open_issues_count":12,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T19:57:34.995Z","etag":null,"topics":["auth","authentication","login","material-ui","mui","muiv5","next","nextauth","nextauthjs","nextjs","oauth","signin"],"latest_commit_sha":null,"homepage":"https://timmikeladze.github.io/next-auth-mui/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TimMikeladze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"linesofcodedev","custom":["https://www.paypal.me/TimMikeladze"]}},"created_at":"2022-05-28T10:27:22.000Z","updated_at":"2025-01-24T01:13:14.000Z","dependencies_parsed_at":"2024-10-23T12:11:49.503Z","dependency_job_id":null,"html_url":"https://github.com/TimMikeladze/next-auth-mui","commit_stats":{"total_commits":48,"total_committers":4,"mean_commits":12.0,"dds":"0.41666666666666663","last_synced_commit":"59f6cde97198de059682d498858df5b06dd897fe"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fnext-auth-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fnext-auth-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fnext-auth-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fnext-auth-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimMikeladze","download_url":"https://codeload.github.com/TimMikeladze/next-auth-mui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252777357,"owners_count":21802589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","authentication","login","material-ui","mui","muiv5","next","nextauth","nextauthjs","nextjs","oauth","signin"],"created_at":"2024-10-03T15:58:56.272Z","updated_at":"2025-10-15T20:07:00.071Z","avatar_url":"https://github.com/TimMikeladze.png","language":"TypeScript","funding_links":["https://ko-fi.com/linesofcodedev","https://www.paypal.me/TimMikeladze"],"categories":[],"sub_categories":[],"readme":"# next-auth-mui\n\nSign-in dialog for NextAuth built with MUI and React. Detects configured OAuth and Email providers and renders buttons or input fields for each respectively. Fully themeable, extensible and customizable to support custom credential flows.\n\n[Storybook](https://timmikeladze.github.io/next-auth-mui/) - [Examples](https://github.com/TimMikeladze/next-auth-mui/blob/master/src/stories/NextAuthDialog.stories.tsx)\n\n![](docs/example.png)\n\n## Getting started\n\n### Install\n\n```console\nnpm install next-auth-mui\n\nyarn add next-auth-mui\n```\n❗Note: [NextAuth](https://github.com/nextauthjs/next-auth) needs to be configured and [MUI](https://github.com/mui/material-ui) has to be installed in your project.\n\n\n### Usage\n\nSimply render the `\u003cNextAuthDialog /\u003e` component in your app. This component will automatically detect the configured providers by sending a request to the `/api/auth/providers` endpoint and render the appropriate sign-in buttons or input fields.\n\n```tsx\nimport React from 'react';\nimport { Button } from '@mui/material';\nimport NextAuthDialog from 'next-auth-mui';\n\nconst Example = () =\u003e {\n  const [open, setOpen] = React.useState(false);\n  return (\n    \u003c\u003e\n      \u003cNextAuthDialog open={open} onClose={() =\u003e setOpen(false)} /\u003e\n\n      \u003cButton onClick={() =\u003e setOpen(true)}\u003e\n        Sign-in\n      \u003c/Button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Customization\n\nComponents rendered within the `next-auth-mui` dialog are customizable through passing the standard props supported by the respective `@mui/material` components.\n\nIf you need to implement custom logic for fetching providers or want complete control over the sign-in dialog, you can also import the `AuthDialog` component.\n\n\n```tsx\nimport { AuthDialog } from 'next-auth-mui';\n```\n\n### Custom email authentication\n\nA common use-case is using a 3rd party email authentication service to send magic links alongside NextAuth's OAuth providers. In this case you can implement a custom email submit handler.\n\nIn the example below we're using [magic.link](https://magic.link/) to send emails and a custom credentials provider to authenticate the user.\n\nAdditionally, a custom email validator is included to only allow emails that end in `@gmail.com`.\n\n```tsx\nimport NextAuthDialog, { isValidEmail } from 'next-auth-mui';\n\n\u003cNextAuthDialog\n  open\n  {/* Render email field even if there is no email provider configured */}\n  alwaysShowEmailField\n  emailValidator={(email) =\u003e isValidEmail(email) \u0026\u0026 email.endsWith('@gmail.com')}\n  {/* Custom email submit handler */}\n  onSubmitEmail={async (email) =\u003e {\n    // Send magic link\n    const didToken = await magic.auth.loginWithMagicLink({ email });\n\n    // sign in with NextAuth\n    await signIn(`credentials`, {\n      didToken,\n      callbackUrl: router.query[`callbackUrl`]\n    });\n  }}\n/\u003e\n```\n\n## All options\n\n```tsx\nexport type NextAuthDialogProps = AuthDialogProps \u0026 {\n  /**\n   * Disable sorting of providers by name when rendering their buttons.\n   */\n  disableSortByName?: boolean;\n  /**\n   * The endpoint of NextAuth server. Defaults to `/api/auth/providers`.\n   */\n  url?: string;\n}\n\nexport type AuthDialogProps = PropsWithChildren\u003c{\n  /**\n   * See @mui/material documentation\n   */\n  ButtonProps?: ButtonProps,\n  /**\n   * See @mui/material documentation\n   */\n  ButtonTypographyProps?: TypographyProps,\n  /**\n   * See @mui/material documentation\n   */\n  DialogContentProps?: DialogContentProps;\n  /**\n   * See @mui/material documentation\n   */\n  DialogContentTextProps?: DialogContentTextProps\n  /**\n   * See @mui/material documentation\n   */\n  DialogProps?: DialogProps;\n  /**\n   * See @mui/material documentation\n   */\n  DialogTitleProps?: DialogTitleProps;\n  /**\n   * Props passed to the email input field. See @mui/material documentation\n   */\n  EmailFieldProps?: TextFieldProps;\n  /**\n   * Props to pass to the default loading indicator. See @mui/material documentation\n   */\n  LinearProgressProps?: LinearProgressProps;\n  /**\n   * A custom loading indicator.\n   */\n  Progress?: React.ReactNode;\n  /**\n   * Always show the email field regardless if email provider has been configured.\n   * This is useful for implementing email auth with a 3rd party api.\n   */\n  alwaysShowEmailField?: boolean;\n  /**\n   * Controls width of dialog.\n   * When breakpoint \u003e= viewport the dialog will be rendered in mobile mode.\n   * Defaults to `xs`.\n   */\n  breakpoint?: Breakpoint,\n  /**\n   * Content to render at the bottom of the dialog.\n   */\n  childrenBottom?: React.ReactNode;\n  /**\n   * Content to render at the top of the dialog. Alias for `children` to keep backwards compatibility.\n   */\n  childrenTop?: React.ReactNode;\n  /**\n   * Disable autofocus of email field.\n   */\n  disableEmailAutoFocus?: boolean;\n  /**\n   * Text to display between email field and oauth buttons. Defaults to \"or\".\n   */\n  dividerText?: string | React.ReactNode;\n  /**\n   * Render error text instead of providers\n   */\n  error?: string,\n  /**\n   * Hide the provider icons on their buttons.\n   */\n  hideProviderIcon?: boolean;\n  /**\n   * Hide the provider names on their buttons.\n   */\n  hideProviderName?: boolean;\n  /**\n   * Hide the dialog title. In mobile mode this will hide the close \"x\" icon.\n   */\n  hideTitle?: boolean;\n  /**\n   * Custom email validation function.\n   */\n  isValidEmail?: (email: string) =\u003e boolean | Promise\u003cboolean\u003e;\n  /**\n   * If true a loading indicator will be displayed in the dialog.\n   */\n  loading?: boolean;\n  /**\n   * Callback for closing the dialog.\n   */\n  onClose?: () =\u003e void;\n  /**\n   * Callback runs on a failed sign in.\n   */\n  onOAuthSignInError?: (error: Error) =\u003e void;\n  /**\n   * Callback runs on a successful sign in.\n   */\n  onOAuthSignInSuccess?: (response: SignInResponse | undefined) =\u003e void;\n  /**\n   * Override default email submission function.\n   * This is useful for implementing authentication with a 3rd party API like MagicLink.\n   */\n  onSubmitEmail?: (email: string) =\u003e Promise\u003cvoid\u003e;\n  /**\n   * When true the dialog will be open.\n   */\n  open: boolean,\n  /**\n   * An object mapping of provider id to provider config.\n   */\n  providers?: Record\u003cstring, ProviderConfig\u003e;\n  /**\n   * Additional sign in options to be passed when calling `signIn`.  See next-auth for documentation\n   */\n  signInOptions?: SignInOptions;\n  /**\n   * Text to display in the dialog title. Empty by default.\n   */\n  titleText?: string | React.ReactNode;\n}\u003e\n\nexport type OauthProviderConfig = {\n  /**\n   * Override props passed to provider's button. See @mui/material documentation.\n   */\n  ButtonProps?: ButtonProps\n  /**\n   * Override props passed to provider's button's typography. See @mui/material documentation.\n   */\n  ButtonTypographyProps?: TypographyProps\n  /**\n   * Override props passed to provider's icon. See @iconify/react documentation.\n   */\n  IconProps?: IconProps;\n  /**\n   * Hide the provider icon on button.\n   */\n  hideProviderIcon?: boolean;\n  /**\n   * Hide the provider names button.\n   */\n  hideProviderName?: boolean;\n  /**\n   * Override the provider's icon. Can be a @iconify/react icon name or a custom component.\n   */\n  icon?: string | React.ReactNode;\n  /**\n   * Override the provider's name when rendering the button.\n   */\n  label?: string;\n}\n\nexport type EmailProviderConfig = {\n  /**\n   * Override props passed to the email's input field. See @mui/material documentation.\n   */\n  EmailFieldProps?: TextFieldProps,\n  /**\n   * Override end icon rendered in the email input field\n   */\n  endIcon?: React.ReactNode;\n  /**\n   * Override text rendered below the email input field.\n   */\n  helperText?: string | React.ReactNode;\n  /**\n   * Override the placeholder text rendered in the email input field.\n   */\n  placeholder?: string;\n  /**\n   * Override start icon rendered in the email input field\n   */\n  startIcon?: React.ReactNode;\n}\n\nexport type ProviderConfig = OauthProviderConfig \u0026 EmailProviderConfig \u0026 {\n  /**\n   * ID of the provider.\n   */\n  id: string;\n  /**\n   * Name of the provider. Will be used as the button's label and used when sorting providers.\n   */\n  name: string;\n  /**\n   * Override sign in options to be passed when calling `signIn`.  See next-auth for documentation\n   */\n  signInOptions?: SignInOptions;\n  /**\n   * Type of the provider.\n   * Only `email` and `oauth` are supported, all other types will be ignored when rendering fields.\n   */\n  type: 'oauth' | 'email' | string;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmikeladze%2Fnext-auth-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmikeladze%2Fnext-auth-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmikeladze%2Fnext-auth-mui/lists"}