Unable to Access Custom Data Passed to signIn Function with Google OAuth Provider in NextAuth

[sundaray]

Hey folks,

I'm using NextAuth (^4.24.5) in my Next.js (14.2.15) application with the app directory. I've set up authentication with both the Email provider and the Google OAuth provider.

In my login form, I'm passing additional custom data to the signIn function as the third argument. Here's my code:

"use client"

import * as React from "react"
import { useSearchParams } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { signIn } from "next-auth/react"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { userAuthSchema } from "@/lib/validations"
import { useToast } from "@/hooks/use-toast"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Icons } from "@/components/icons"

export type FormData = z.infer<typeof userAuthSchema>

export function LoginForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormData>({ resolver: zodResolver(userAuthSchema) })

  const [isLoading, setIsLoading] = React.useState<boolean>(false)
  const [isGoogleLoading, setIsGoogleLoading] = React.useState<boolean>(false)

  const searchParams = useSearchParams()
  const { toast } = useToast()

  async function onSubmit(data: FormData) {
    setIsLoading(true)

    const signInResult = await signIn(
      "email",
      {
        email: data.email.toLowerCase(),
        redirect: false,
        callbackUrl: searchParams?.get("from") || "/",
      },
      { title: "credits" }
    )

    setIsLoading(false)

    if (!signInResult?.ok) {
      toast({
        title: "Something went wrong.",
        description: "Your login request failed. Please try again.",
        variant: "destructive",
      })
      return
    }

    toast({
      title: "Check your email",
      description:
        "I've sent you a login link. Be sure to check your spam too.",
    })

    reset()
  }

  return (
      <div className="grid gap-6 bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="grid gap-6">
            <div className="grid gap-1">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="[email protected]"
                disabled={isLoading || isGoogleLoading}
                {...register("email")}
              />
              {errors.email && (
                <p className="px-1 text-xs text-red-600 animate-in fade-in-0 slide-in-from-left-1">
                  {errors.email.message}
                </p>
              )}
            </div>

            <Button
              type="submit"
              className="w-full rounded-full bg-sky-600 text-white hover:bg-sky-500 hover:text-white"
              disabled={isLoading}
            >
              {isLoading && (
                <Icons.spinner className="mr-2 size-4 animate-spin" />
              )}
              Email me a login link
            </Button>
          </div>
        </form>
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t" />
          </div>
          <div className="relative flex justify-center text-xs uppercase text-muted-foreground">
            <span className="bg-white px-2">Or</span>
          </div>
        </div>
        <Button
          type="submit"
          className="border-zinc-300 bg-white text-zinc-900"
          variant="outline"
          onClick={() => {
            setIsGoogleLoading(true)
            signIn(
              "google",
              {
                callbackUrl: searchParams?.get("from") || "/",
              },
              { title: "credits" }
            )
          }}
          disabled={isLoading || isGoogleLoading}
        >
          {isGoogleLoading ? (
            <Icons.spinner className="mr-2 size-4 animate-spin" />
          ) : (
            <Icons.google className="mr-2 size-6" />
          )}{" "}
          Log in with Google
        </Button>
      </div>
  )
}

Notice that I am passing { title: "credits" } as the third argument to the signIn function for both the providers.

The /api/auth/[....nextauth]/route.ts file looks like this:

import { NextRequest } from "next/server"
import NextAuth from "next-auth"

import { authOptions } from "@/lib/auth"

type RouteHandlerContext = { params: { nextauth: string[] } }

async function auth(req: NextRequest, context: RouteHandlerContext) {
  return await NextAuth(req, context, authOptions(req))
}

export { auth as GET, auth as POST }

Here is the simplified signIn callback inside my auth.ts file:

async signIn({ account, profile, email }) {
    console.log("Request: ", req
}

When I log in using the Email provider, I can access the custom data ({ title: "credits" }) in the req object within the signIn callback. Specifically, I see it in req.searchParams:

// Output when using Email provider
Request: {
  // ...other properties
  searchParams: URLSearchParams { 'title' => 'credits' },
  // ...other properties
}

However, when I log in using the Google OAuth provider, the custom data is not present in the req object within the signIn callback.

My Question:

1. Why can't I access the custom data passed to signIn when using Google OAuth provider?
2. Do I need to configure something differently to make this data available in the signIn?
3. Is there a recommended way to persist custom data through the OAuth flow with providers like Google so that it can be accessed in the signIn callback?