Merge branch 'main' into patch-2

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -42,6 +42,7 @@ body:
         - "Discord"
         - "Dribbble"
         - "Dropbox"
+        - "Eventbrite"
         - "EVE Online"
         - "Facebook"
         - "FACEIT"

.vscode/snippets.code-snippets

@@ -3,12 +3,12 @@
     "description": "Markdown link to OAuth 2 specification",
     "scope": "typescript",
     "prefix": "oauth2",
-    "body": ["[OAuth 2](https://datatracker.ietf.org/doc/html/rfc6749)"]
+    "body": ["[OAuth 2](https://datatracker.ietf.org/doc/html/rfc6749)"],
   },
   "oidc-spec": {
     "description": "Markdown link to OpenID Connect specification",
     "scope": "typescript",
     "prefix": "oidc",
-    "body": ["[OIDC](https://openid.net/specs/openid-connect-core-1_0.html)"]
-  }
+    "body": ["[OIDC](https://openid.net/specs/openid-connect-core-1_0.html)"],
+  },
 }

README.md

@@ -93,7 +93,7 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
         <sub>💵</sub>
       </td>
       <td align="center" valign="top">
-        <a href="https://auth0.com" target="_blank">
+        <a href="https://a0.to/signup/nextauthjs" target="_blank">
           <img height="96" src="https://avatars.githubusercontent.com/u/2824157?v=4" alt="Auth0 Logo" />
         </a><br />
         <div>Auth0</div>

apps/examples/nextjs-pages/components/auth-components.tsx

@@ -17,7 +17,7 @@ export function SignOut(props: React.ComponentPropsWithRef<typeof Button>) {
     <Button
       onClick={() => signOut()}
       variant="ghost"
-      className="p-0 w-full"
+      className="w-full p-0"
       {...props}
     >
       Sign Out

apps/examples/nextjs-pages/components/client-example.tsx

@@ -13,7 +13,7 @@ const UpdateForm = () => {
   return (
     <>
       <h2 className="text-xl font-bold">Updating the session</h2>
-      <div className="flex items-center space-x-2 w-full max-w-sm">
+      <div className="flex w-full max-w-sm items-center space-x-2">
         <Input
           type="text"
           placeholder={session.user.name ?? ""}
@@ -43,7 +43,7 @@ const UpdateForm = () => {
 export default function ClientExample() {
   const { data: session, status } = useSession()
   return (
-    <div className="mx-auto mt-10 space-y-4 max-w-screen-md">
+    <div className="mx-auto mt-10 max-w-screen-md space-y-4">
       <h1 className="text-3xl font-bold">Client Side Rendering Usage</h1>
       <p className="leading-loose">
         This page fetches session data client side using the{" "}

apps/examples/nextjs-pages/components/custom-link.tsx

@@ -32,7 +32,7 @@ const CustomLink = ({
       {...rest}
     >
       {children}
-      <ExternalLink className="inline-block ml-0.5 w-4 h-4" />
+      <ExternalLink className="ml-0.5 inline-block h-4 w-4" />
     </Link>
   )
 }

apps/examples/nextjs-pages/components/footer.tsx

@@ -2,7 +2,7 @@ import CustomLink from "./custom-link"
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col px-4 my-4 mx-0 space-y-1 w-full text-sm sm:px-6 md:flex-row md:items-center md:my-12 md:mx-auto md:space-y-0 md:space-x-4 md:max-w-3xl md:h-5">
+    <footer className="mx-0 my-4 flex w-full flex-col space-y-1 px-4 text-sm sm:px-6 md:mx-auto md:my-12 md:h-5 md:max-w-3xl md:flex-row md:items-center md:space-x-4 md:space-y-0">
       <CustomLink href="https://nextjs.authjs.dev">Documentation</CustomLink>
       <CustomLink href="https://www.npmjs.com/package/next-auth">
         NPM

apps/examples/nextjs-pages/components/header.tsx

@@ -3,8 +3,8 @@ import UserButton from "./user-button"
 
 export default function Header() {
   return (
-    <header className="flex sticky justify-center border-b">
-      <div className="flex justify-between items-center px-4 mx-auto w-full max-w-3xl sm:px-6 h-[4.5rem]">
+    <header className="sticky flex justify-center border-b">
+      <div className="mx-auto flex h-[4.5rem] w-full max-w-3xl items-center justify-between px-4 sm:px-6">
         <MainNav />
         <UserButton />
       </div>

apps/examples/nextjs-pages/components/main-nav.tsx

@@ -15,7 +15,7 @@ import React from "react"
 
 export function MainNav() {
   return (
-    <div className="flex items-center space-x-2 h-full lg:space-x-4">
+    <div className="flex h-full items-center space-x-2 lg:space-x-4">
       <CustomLink href="/" className="p-4">
         <Image src="/logo.png" alt="Home" width="32" height="32" />
       </CustomLink>
@@ -61,13 +61,13 @@ const ListItem = React.forwardRef<
         <a
           ref={ref}
           className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors",
             className
           )}
           {...props}
         >
           <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="text-sm leading-snug line-clamp-2 text-muted-foreground">
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
             {children}
           </p>
         </a>

apps/examples/nextjs-pages/components/session-data.tsx

@@ -4,17 +4,17 @@ export default function SessionData({ session }: { session: Session | null }) {
   console.log("session-data.session", session)
   if (session?.user) {
     return (
-      <div className="overflow-auto p-4 space-y-2 w-full bg-gray-100 rounded-md">
+      <div className="w-full space-y-2 overflow-auto rounded-md bg-gray-100 p-4">
         <h2 className="text-xl font-bold">Current Session Data</h2>
         {Object.keys(session.user).length > 3 ? (
-          <blockquote className="pl-2 border-l-4 border-gray-300">
+          <blockquote className="border-l-4 border-gray-300 pl-2">
             In this example, the whole session object is passed to the page,
             including the raw user object. Our recommendation is to{" "}
             <em>only pass the necessary fields</em> to the page, as the raw user
             object may contain sensitive information.
           </blockquote>
         ) : (
-          <blockquote className="pl-2 border-l-4 border-gray-300">
+          <blockquote className="border-l-4 border-gray-300 pl-2">
             In this example, only some fields in the user object is passed to
             the page to avoid exposing sensitive information.
           </blockquote>
@@ -25,7 +25,7 @@ export default function SessionData({ session }: { session: Session | null }) {
   }
 
   return (
-    <p className="overflow-auto p-4 space-y-2 w-full bg-gray-100 rounded-md">
+    <p className="w-full space-y-2 overflow-auto rounded-md bg-gray-100 p-4">
       No session data, please <b>Sign In</b> first.
     </p>
   )

apps/examples/nextjs-pages/components/ui/avatar.tsx

@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className
     )}
     {...props}

apps/examples/nextjs-pages/components/ui/dropdown-menu.tsx

@@ -25,14 +25,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto w-4 h-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
         className
       )}
       {...props}
@@ -81,7 +81,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -97,15 +97,15 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="flex absolute left-2 justify-center items-center w-3.5 h-3.5">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="w-4 h-4" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -121,14 +121,14 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="flex absolute left-2 justify-center items-center w-3.5 h-3.5">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="w-2 h-2 fill-current" />
+        <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -160,7 +160,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))

apps/examples/nextjs-pages/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

apps/examples/nextjs-pages/components/ui/navigation-menu.tsx

@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       )}
       ref={ref}
@@ -104,12 +104,12 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
       className
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ))
 NavigationMenuIndicator.displayName =

apps/examples/nextjs-pages/components/user-button.tsx

@@ -16,8 +16,8 @@ export default function UserButton() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative w-8 h-8 rounded-full">
-          <Avatar className="w-8 h-8">
+        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+          <Avatar className="h-8 w-8">
             {session.user.image && (
               <AvatarImage
                 src={session.user.image}
@@ -34,7 +34,7 @@ export default function UserButton() {
             <p className="text-sm font-medium leading-none">
               {session.user.name}
             </p>
-            <p className="text-xs leading-none text-muted-foreground">
+            <p className="text-muted-foreground text-xs leading-none">
               {session.user.email}
             </p>
           </div>

apps/examples/nextjs-pages/pages/api-example/index.tsx

@@ -12,7 +12,7 @@ export default function Page() {
     })()
   }, [])
   return (
-    <div className="mx-auto mt-10 space-y-4 max-w-screen-md">
+    <div className="mx-auto mt-10 max-w-screen-md space-y-4">
       <h1 className="text-3xl font-bold">Route Handler Usage</h1>
       <p className="leading-loose">
         This page fetches data from an API{" "}
@@ -27,11 +27,11 @@ export default function Page() {
       </p>
       <h2 className="text-xl font-bold">Data from API Route:</h2>
       {data ? (
-        <pre className="overflow-auto p-4 space-y-2 w-full bg-gray-100 rounded-md">
+        <pre className="w-full space-y-2 overflow-auto rounded-md bg-gray-100 p-4">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ) : (
-        <p className="overflow-auto p-4 space-y-2 w-full bg-gray-100 rounded-md">
+        <p className="w-full space-y-2 overflow-auto rounded-md bg-gray-100 p-4">
           No data from API Route, please <b>Sign In</b> first.
         </p>
       )}

apps/examples/nextjs-pages/pages/index.tsx

@@ -2,7 +2,7 @@ import CustomLink from "@/components/custom-link"
 
 export default function Index() {
   return (
-    <div className="mx-auto mt-10 space-y-4 max-w-screen-md">
+    <div className="mx-auto mt-10 max-w-screen-md space-y-4">
       <h1 className="text-3xl font-bold">NextAuth.js Example</h1>
       <p className="leading-loose">
         This is an example site to demonstrate how to use{" "}

apps/examples/nextjs-pages/pages/middleware-example/index.tsx

@@ -2,7 +2,7 @@ import CustomLink from "@/components/custom-link"
 
 export default function Page() {
   return (
-    <div className="mx-auto mt-10 space-y-4 max-w-screen-md">
+    <div className="mx-auto mt-10 max-w-screen-md space-y-4">
       <h1 className="text-3xl font-bold">Middleware usage</h1>
       <p className="leading-loose">
         This page is protected by using the universal{" "}

apps/examples/nextjs-pages/pages/policy/index.tsx

@@ -1,6 +1,6 @@
 export default function PolicyPage() {
   return (
-    <div className="mx-auto mt-10 space-y-4 max-w-screen-md">
+    <div className="mx-auto mt-10 max-w-screen-md space-y-4">
       <section>
         <h2 className="text-xl font-bold">Terms of Service</h2>
         <p>

apps/examples/nextjs-pages/pages/server-example/index.tsx

@@ -10,7 +10,7 @@ export default function Page({
   serverSession: session,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
-    <div className="mx-auto mt-10 space-y-4 max-w-screen-md">
+    <div className="mx-auto mt-10 max-w-screen-md space-y-4">
       <h1 className="text-3xl font-bold">
         <code>getServerSideProps</code> Usage
       </h1>

apps/examples/nextjs/app/api-example/page.tsx

@@ -25,11 +25,11 @@ export default function Page() {
         </CustomLink>{" "}
         method.
       </p>
-      <div className="flex flex-col bg-gray-100 rounded-md">
-        <div className="p-4 font-bold bg-gray-200 rounded-t-md">
+      <div className="flex flex-col rounded-md bg-gray-100">
+        <div className="rounded-t-md bg-gray-200 p-4 font-bold">
           Data from API Route
         </div>
-        <pre className="py-6 px-4 whitespace-pre-wrap break-all">
+        <pre className="whitespace-pre-wrap break-all px-4 py-6">
           {JSON.stringify(data, null, 2)}
         </pre>
       </div>