Merge branch 'main' into patch-2

nextauthjs · Nov 23, 2024 · f9d9f68 · f9d9f68
2 parents fd37687 + 6b32df0
commit f9d9f68
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 65 deletions.
diff --git a/.github/dependabot.yml b/.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"
diff --git a/docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx b/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(`

diff --git a/docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx b/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={{

diff --git a/docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx b/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>
   )

diff --git a/docs/components/OAuthProviderInstructions/content/index.tsx b/docs/components/OAuthProviderInstructions/content/index.tsx
@@ -58,7 +58,9 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
       )}
     >
       {/* Step 1 */}
-      <StepTitle>Register OAuth App in {providerName}'s dashboard</StepTitle>
+      <StepTitle count={1}>
+        Register OAuth App in {providerName}'s dashboard
+      </StepTitle>
       <p className="mt-6 leading-7 first:mt-0">
         First you have to setup an OAuth application on the {providerName}{" "}
         developers dashboard.
@@ -115,7 +117,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
         environment(s).
       </Callout>
       {/* Step 2 */}
-      <StepTitle>Setup Environment Variables</StepTitle>
+      <StepTitle count={2}>Setup Environment Variables</StepTitle>
       <p className="mt-6 leading-7 first:mt-0">
         Once registered, you should receive a{" "}
         {manifest.requiresIssuer.includes(providerId) ? (
@@ -132,40 +134,48 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
       </p>
       <Code>
         <Code.Next>
-          <Pre
-            data-copy=""
-            data-filename=".env.local"
-            dangerouslySetInnerHTML={{
-              __html: highlight(envString),
-            }}
-          />
+          <Pre data-copy="" data-filename=".env.local">
+            <div className="px-4">
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: highlight(envString),
+                }}
+              />
+            </div>
+          </Pre>
         </Code.Next>
         <Code.Qwik>
-          <Pre
-            data-copy=""
-            data-filename=".env"
-            dangerouslySetInnerHTML={{
-              __html: highlight(envString),
-            }}
-          />
+          <Pre data-copy="" data-filename=".env">
+            <div className="px-4">
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: highlight(envString),
+                }}
+              />
+            </div>
+          </Pre>
         </Code.Qwik>
         <Code.Svelte>
-          <Pre
-            data-copy=""
-            data-filename=".env"
-            dangerouslySetInnerHTML={{
-              __html: highlight(envString),
-            }}
-          />
+          <Pre data-copy="" data-filename=".env">
+            <div className="px-4">
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: highlight(envString),
+                }}
+              />
+            </div>
+          </Pre>
         </Code.Svelte>
         <Code.Express>
-          <Pre
-            data-copy=""
-            data-filename=".env"
-            dangerouslySetInnerHTML={{
-              __html: highlight(envString),
-            }}
-          />
+          <Pre data-copy="" data-filename=".env">
+            <div className="px-4">
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: highlight(envString),
+                }}
+              />
+            </div>
+          </Pre>
           <p className="mt-2 leading-7 first:mt-0">
             Assuming{" "}
             <Link href="https://www.npmjs.com/package/dotenv">
@@ -188,7 +198,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
         if needed, but then you’ll need to pass them to the provider manually.
       </p>
       {/* Step 3 */}
-      <StepTitle>Setup Provider</StepTitle>
+      <StepTitle count={3}>Setup Provider</StepTitle>
       <p className="mt-6 leading-7 first:mt-0">
         Let’s enable {providerName} as a sign in option in our Auth.js
         configuration. You’ll have to import the <NXCode>{providerName}</NXCode>{" "}
@@ -201,7 +211,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
         highlight={highlight}
       />
       {/* Step 4 */}
-      <StepTitle>Add Signin Button</StepTitle>
+      <StepTitle count={4}>Add Signin Button</StepTitle>
       <p className="mt-6 leading-7 first:mt-0">
         Next, we can add a signin button somewhere in your application like the
         Navbar. It will trigger Auth.js sign in when clicked.
@@ -212,7 +222,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
         highlight={highlight}
       />
       {/* Step 5 */}
-      <StepTitle>Ship it!</StepTitle>
+      <StepTitle count={5}>Ship it!</StepTitle>
       <p className="mt-6 leading-7 first:mt-0">
         Click the “Sign in with {providerName}" button and if all went well, you
         should be redirected to {providerName} and once authenticated,

diff --git a/docs/pages/getting-started/adapters/drizzle.mdx b/docs/pages/getting-started/adapters/drizzle.mdx
@@ -34,8 +34,8 @@ To use this adapter, you must have setup Drizzle ORM and Drizzle Kit in your pro
 1. Create your schema file, based off of one of the ones below.
 2. Install a supported database driver to your project, like `@libsql/client`, `mysql2` or `postgres`.
 3. Create a `drizzle.config.ts` [file](https://orm.drizzle.team/kit-docs/conf).
-4. Generate the initial migration from your schema file with a command like, `drizzle-kit generate:pg`.
-5. Apply migrations by using `migrate()` function or push changes directly to your database with a command like, `drizzle-kit push:pg`.
+4. Generate the initial migration from your schema file with a command like, `drizzle-kit generate`.
+5. Apply migrations by using `migrate()` function or push changes directly to your database with a command like, `drizzle-kit push`.
 6. If your schemas differ from the default ones, pass them as the second parameter to the adapter.
 
 #### Schemas

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -69,7 +69,7 @@
   "dependencies": {
     "@panva/hkdf": "^1.2.1",
     "jose": "^5.9.6",
-    "oauth4webapi": "^3.1.1",
+    "oauth4webapi": "^3.1.3",
     "preact": "10.24.3",
     "preact-render-to-string": "6.5.11"
   },

diff --git a/packages/core/src/lib/actions/callback/oauth/callback.ts b/packages/core/src/lib/actions/callback/oauth/callback.ts
@@ -264,7 +264,11 @@ export async function handleOAuth(
         as,
         client,
         processedCodeResponse.access_token,
-        { [o.customFetch]: provider[customFetch] }
+        {
+          [o.customFetch]: provider[customFetch],
+          // TODO: move away from allowing insecure HTTP requests
+          [o.allowInsecureRequests]: true,
+        }
       )
       profile = await userinfoResponse.json()
     } else {