Merge branch 'main' into feat/add-slugify-in-tabs

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -61,6 +61,7 @@ body:
         - "Kinde"
         - "Line"
         - "LinkedIn"
+        - "Loops"
         - "Mailchimp"
         - "Mail.ru"
         - "Mastodon"

.github/dependabot.yml

@@ -0,0 +1,15 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    versioning-strategy: "increase"
+    allow:
+      - dependency-name: "oauth4webapi"
+      - dependency-name: "jose"

.github/workflows/release.yml

@@ -107,7 +107,7 @@ jobs:
         run: cd apps/examples/nextjs-docker && pnpm test:docker
       - name: Run E2E tests
         continue-on-error: true # TODO: Make this less flakey
-        if: github.repository == 'nextauthjs/next-auth'
+        if: ${{ env.PACKAGES_CHANGES == 'true' || github.ref == 'refs/heads/main' }}
         timeout-minutes: 15
         env:
           AUTH_SECRET: ${{ secrets.AUTH_SECRET }}

.gitignore

@@ -87,7 +87,7 @@ docs/.next
 docs/manifest.mjs
 
 # Core
-packages/core/src/providers/oauth-types.ts
+packages/core/src/providers/provider-types.ts
 packages/core/lib
 packages/core/providers
 packages/core/src/lib/pages/styles.ts

.prettierignore

@@ -32,7 +32,7 @@ packages/**/*.js
 !packages/*/scripts/*.js
 
 # @auth/core
-packages/core/src/providers/oauth-types.ts
+packages/core/src/providers/provider-types.ts
 packages/core/src/lib/pages/styles.ts
 
 # @auth/sveltekit
@@ -43,7 +43,7 @@ packages/frameworks-sveltekit/vite.config.{js,ts}.timestamp-*
 packages/frameworks-express/providers
 
 # next-auth
-packages/next-auth/src/providers/oauth-types.ts
+packages/next-auth/src/providers/provider-types.ts
 packages/next-auth/css/index.css
 
 # Adapters

README.md

@@ -166,15 +166,22 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
         <div>Encore</div>
         <sub>💵</sub>
       </td>
+      <td align="center" valign="top">
+        <a href="https://sent.dm/?ref=auth.js" target="_blank">
+          <img width="108" src="https://avatars.githubusercontent.com/u/153308555?v=4" alt="Sent.dm Logo" />
+        </a><br />
+        <div>Sent.dm</div>
+        <sub>💵</sub>
+      </td>
+    </tr>
+    <tr>
       <td align="center" valign="top">
         <a href="https://arcjet.com/?ref=auth.js" target="_blank">
           <img width="108" src="https://avatars.githubusercontent.com/u/24397786?s=200&v=4" alt="Arcjet Logo" />
         </a><br />
         <div>Arcjet</div>
         <sub>💵</sub>
       </td>
-    </tr>
-    <tr>
       <td align="center" valign="top">
         <a href="https://route4me.com/?ref=auth.js" target="_blank">
           <img width="108" src="https://avatars.githubusercontent.com/u/7936820?v=4" alt="Route4Me Logo" />

apps/dev/nextjs/app/client.tsx

@@ -34,7 +34,11 @@ export default function Client() {
           ) : (
             <>
               <button onClick={() => signIn("github")}>Sign in GitHub</button>
-              <button onClick={() => signIn("credentials", {})}>
+              <button
+                onClick={async () => {
+                  await signIn("webauthn", {})
+                }}
+              >
                 Sign in Credentials
               </button>
             </>

apps/dev/nextjs/auth.ts

@@ -1,7 +1,7 @@
 import NextAuth from "next-auth"
-import type { NextAuthConfig } from "next-auth"
 import Credentials from "next-auth/providers/credentials"
 import Keycloak from "next-auth/providers/keycloak"
+import GitHub from "next-auth/providers/github"
 
 // import { PrismaClient } from "@prisma/client"
 // import { PrismaAdapter } from "@auth/prisma-adapter"
@@ -66,8 +66,10 @@ export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
         }
       },
     }),
+    GitHub,
     Keycloak,
   ],
+
   callbacks: {
     jwt({ token, trigger, session }) {
       if (trigger === "update") token.name = session.user.name

docs/components/Footer/index.tsx

@@ -58,24 +58,6 @@ export function Footer({ className = "" }) {
                 Discord Community
               </a>
             </li>
-            <li>
-              <a
-                className="flex items-center gap-1 text-current"
-                target="_blank"
-                rel="noopener noreferrer"
-                title="vercel.com homepage"
-                href="https://vercel.com?utm_source=authjs&utm_campaign=oss"
-              >
-                <span>Powered by</span>
-                <svg height={20} viewBox="0 0 283 64" fill="none">
-                  <title>Vercel</title>
-                  <path
-                    fill="currentColor"
-                    d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"
-                  />
-                </svg>
-              </a>
-            </li>
           </ul>
         </div>
         <div className="flex flex-col">

docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx

@@ -21,6 +21,7 @@ export function SetupCode({ providerId, providerName, highlight }: Props) {
           data-copy=""
           data-language="tsx"
           icon={TSIcon}
+          className="px-4"
           dangerouslySetInnerHTML={{
             __html: highlight(`
 import NextAuth from "next-auth"
@@ -40,6 +41,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
@@ -57,6 +59,7 @@ export const { GET, POST } = handlers
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
@@ -78,6 +81,7 @@ export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$({
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
@@ -98,6 +102,7 @@ export const { handle, signIn } = SvelteKitAuth({
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`export { handle } from "./auth"`),
@@ -113,6 +118,7 @@ export const { handle, signIn } = SvelteKitAuth({
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
@@ -134,6 +140,7 @@ export const load: LayoutServerLoad = async (event) => {
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`

docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx

@@ -17,6 +17,7 @@ export function SignInCode({ providerId, providerName, highlight }: Props) {
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
@@ -43,10 +44,12 @@ export default function SignIn() {
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
 "use client"
+
 import { signIn } from "next-auth/react"
  
 export default function SignIn() {
@@ -64,6 +67,7 @@ export default function SignIn() {
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           dangerouslySetInnerHTML={{
             __html: highlight(`
@@ -107,6 +111,7 @@ export default component$(() => {
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           data-filename="src/routes/+page.svelte"
           dangerouslySetInnerHTML={{
@@ -131,6 +136,7 @@ export default component$(() => {
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           data-filename="src/routes/signin/+page.server.ts"
           dangerouslySetInnerHTML={{
@@ -148,6 +154,7 @@ export const actions: Actions = { default: signIn }
           data-theme="default"
           data-copy=""
           data-language="tsx"
+          className="px-4"
           icon={TSIcon}
           data-filename="src/routes/+page.svelte"
           dangerouslySetInnerHTML={{

docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx

@@ -1,12 +1,29 @@
 interface Props {
   children: React.ReactNode
+  count: number
 }
 
-export function StepTitle({ children }: Props) {
+export function StepTitle({ children, count }: Props) {
   return (
     <h3
-      className={`mt-8 text-2xl font-semibold tracking-tight text-slate-900 before:!-mt-[1px] before:flex before:items-center before:justify-center dark:text-slate-100`}
+      className={`relative mt-8 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100`}
     >
+      <span
+        className="absolute rounded-full"
+        style={{
+          left: "-2.65rem",
+          color: "#a3a3a3",
+          backgroundColor: "#f3f4f6",
+          top: "52%",
+          transform: "translateY(-50%)",
+          fontSize: "1rem",
+          width: "33px",
+          height: "33px",
+          textAlign: "center",
+        }}
+      >
+        {count}
+      </span>
       {children}
     </h3>
   )